This is a common, reusable Gulp file tailored towards front-end focused projects. It can be used as-is or customised to fit your development environment.
Clean: Deletes 'dist' directory
Images: Optimise PNGs, JPGs, SVGs, and GIFs
SVG Sprite: Merge SVGs into a sprite. One sprite is generated per directory within 'img/vectors'
Javascript: JSHint and minify javascript files
CSS: Clips empty files from the stream, sourcemaps (if not production), autoprefixes css, combines media queries, minifies css
- Clone the project / Download the zip.
git clone [email protected]:JakeCobley/gulpfile.js.git projectname
- Navigation to the working directory
cd projectname
- Install npm modules
npm i
- Update variables, paths, folders, extensions etc at top of the gulpfile.js file to suite your project.
$ npm run watch
- Builds assets and watches directories for changes.$ npm run build
- Builds all assets.$ npm run build:production
- Builds all assets for production (Minified CSS and JavaScript, compressed images etc).
This can be easily changed to suit your project.
+-- dist/
| +-- css
| +-- img
| | +-- vectors
| +-- js
+-- node_modules/
+-- src/
| +-- img
| | +-- vectors
| +-- js
| +-- scss
+-- .editorconfig
+-- .gitignore
+-- gulpfile.js
+-- LICENCE.md
+-- package.json
+-- README.md
Have a bug or a feature request? Please first read the contributing guidelines document and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.
Please read through our contributing guidelines. Included are directions for opening issues, coding standards, and notes on development.
Editor preferences are available in the editor config for easy use in common text editors. Read more and download plugins at http://editorconfig.org.
This project is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to those rules whenever possible.
See the Releases section of our GitHub project for changelogs for each release.