This package has been deprecated

    Author message:

    This package has moved to @grrr/gulpfile

    grrr-gulpfile

    4.0.3 • Public • Published

    Grrr Gulpfile

    An opinionated and modular gulpfile. Made with ❤️ by Grrr, a digital creative agency in Amsterdam.

    Build Status Dependencies

    Quick start

    Basic installation and configuration is as follows:

    Install

    Install this package in your project through yarn or npm:

    npm install grrr-gulpfile --save-dev
    

    Configure

    1. Create a gulp.json config file (see below).
    2. Add the required Babel dependencies for your project. A good starting point is by adding @babel/preset-env.
    npm install --save-dev @babel/preset-env
    

    See the Babel docs for more information. Now specify the Babel config in the gulp.json. See the advanced example for an example, or check the Babel docs for more information.

    Run

    Run gulp by calling:

    gulp --cwd . --gulpfile 'node_modules/grrr-gulpfile/gulpfile.js'
    

    Tip: save this as an npm script in your project's package.json, for example:

    "scripts"{
        "watch": "gulp watch --cwd . --gulpfile 'node_modules/grrr-gulpfile/gulpfile.js'",
        "build": "gulp --cwd . --gulpfile 'node_modules/grrr-gulpfile/gulpfile.js'",
        "build:staging": "gulp --staging --cwd . --gulpfile 'node_modules/grrr-gulpfile/gulpfile.js'",
        "build:production": "BABEL_ENV=production gulp --production --cwd . --gulpfile 'node_modules/grrr-gulpfile/gulpfile.js'"
    },
    • 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

    Task configuration

    Check the examples for a basic and advanced gulp.json config.


    Overriding defaults

    The project uses a few sensible defaults for Autoprefixer, sass-lint, eslint (specs and ignores). These defaults can be overwritten:

    • The Autoprefixer options used in sass. These can be specified in the gulp.json file in an autoprefixer object within the sass task.
    • The rules used in sass:lint. Place a .sass-lint.yml file in your project.
    • The eslint rules. Place an .eslintrc file in your project. You can additionally add an .eslintignore for ignoring (wildcarded) folders or packages specific to your project.

    Available tasks

    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:

    • browsersync auto refresh and hot reloading in the browser
    • clean removes all built assets
    • copy copies files that don't need processing (like fonts, videos and the favicon)
    • eslint lints js with opinionated rules, which can be overwritten by including your own .eslintrc
    • images runs imagemin on all images in the config.paths.images.src and saves the result to config.paths.images.dist
    • javascript:build bundles JavaScript into a single bunle thru Browserify and transpiles it via Babel
    • javascript:watch watches for changes and builds the bundle when changes are detected
    • javascript:vendor copies and uglifies vendor files (can also concatenate them)
    • init prints some debug info
    • icons creates a svg sprite
    • modernizr checks js and scss source files for Modernizr tests and creates a custom Modernizr build
    • revision creates a revisioned filename for each static asset
    • sass compiles sass with globbing
    • sass:lint lints sass with opinionated rules, which can be overwritten by including your own .sass-lint.yml

    The main tasks are:

    • build runs all above tasks, except browsersync (some tasks are dependent on the called environment)
    • watch runs the same tasks as default but will retrigger when files are changed, and will start browsersync

    For more info, jump into the tasks folder.


    Contributing

    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:

    yarn link
    

    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
    

    Install

    npm i grrr-gulpfile

    DownloadsWeekly Downloads

    0

    Version

    4.0.3

    License

    MIT

    Unpacked Size

    30.3 kB

    Total Files

    29

    Last publish

    Collaborators

    • aapit
    • harmenjanssen
    • koenschaft
    • larixk
    • ramirohammen