An opinionated and modular gulpfile. Made with ❤️ by Grrr, a digital creative agency in Amsterdam.
Basic installation and configuration is as follows:
Install this package in your project through yarn or npm:
npm install grrr-gulpfile --save-dev
- Create a
gulp.jsonconfig file (see below).
- Add the required Babel dependencies for your project. A good starting point is by adding
@babel/preset-env. See the Babel docs for more information. Now specify the Babel config in the
gulp.json. See below for an example, or check the Babel docs for more information.
Run gulp by calling:
gulp --cwd . --gulpfile 'node_modules/grrr-gulpfile/gulpfile.babel.js'
Tip: save this as an npm script in your project's
package.json, for example:
- To build, run the build task:
npm run watch
- To watch, run the watch task:
npm run watch
- To build for a specific environment:
npm run build:production
- To run a specific task:
npm run build images
Check the examples for a basic and advanced
The project uses a few sensible defaults for
eslint (specs and ignores). These defaults can be overwritten:
- The Autoprefixer options used in
sass. These can be specified in the
gulp.jsonfile in an
autoprefixerobject within the
- The rules used in
sass:lint. Place a
.sass-lint.ymlfile in your project.
eslintrules. Place an
.eslintrcfile in your project. You can additionally add an
.eslintignorefor ignoring (wildcarded) folders or packages specific to your project.
Specify which tasks to run by calling gulp like:
gulp [task-name] --cwd . --gulpfile 'node_modules/grrr-gulpfile/gulpfile.js'. Or if speciefied
gulp as a script:
yarn run gulp <task>.
The individual tasks include:
browsersyncauto refresh and hot reloading in the browser
cleanremoves all built assets
copycopies files that don't need processing (like fonts, videos and the favicon)
eslintlints js with opinionated rules, which can be overwritten by including your own
imagesruns imagemin on all images in the
config.paths.images.srcand saves the result to
initprints some debug info
iconscreates a svg sprite
modernizrchecks js and scss source files for Modernizr tests and creates a custom Modernizr build
revisioncreates a revisioned filename for each static asset
sasscompiles sass with globbing
sass:lintlints sass with opinionated rules, which can be overwritten by including your own
The main tasks are:
buildruns all above tasks, except
browsersync(some tasks are dependent on the called environment)
watchruns the same tasks as
defaultbut will retrigger when files are changed, and will start browsersync
For more info, jump into the tasks folder.
To make changes to this gulpfile, it's best to replace the installed package in a real project with a locally linked development version. This can be done with both yarn or npm. We use yarn in this example; for npm check the npm docs . Inside the root of the
grrr-gulpfile repo, run:
Inside the root of the project you want to test the gulpfile, run:
yarn link grrr-gulpfile
When you're done, you can publish the changes on
npm and unlink the development version by running the following inside the project:
yarn unlink grrr-gulpfile yarn install