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
gulp.jsonconfig file (see below).
.babelrcfile and add the required dependencies for the project. A good starting point is by adding
babel-preset-env, and adding it as the current preset in the
.babelrcfile. See the Babel documentation for more info.
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:
Then run by calling the watch task:
npm run watch
or build for a specific environment:
npm run build:production
or run a specific task:
npm run build images
Below is an example
gulp.json config, check the examples for more advanced configs.
Some defaults can be overwritten. These are:
sass. These can be specified in the
sass:lint. Place a
.sass-lint.ymlfile in your project.
eslintrules. Place an
.eslintrcfile in your project.
.eslintignorefor ignoring (wildcarded) folders or packages.
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
.babelrcfile + dependencies is required)
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:
defaultruns 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