Gulp Role

Existing configuration files (Gulpfile.js, gulp.config.js, webpack.config.js, package.json) will not be overridden.

  • Install gulp globally in the Vagrant box
  • Create a prefilled Gulpfile.js with useful tasks
    • Watch & live reload with BrowserSync
    • Compile Sass with Autoprefixer & source-maps
    • Bundle JavaScript with Webpack, preconfigured with Babel (optional)
    • Lossless images optimization with ImageMin
  • Create associated gulp.config.js and webpack.config.js
  • Add the necessary dependencies to package.json (only if the file doesn’t exist yet)

After the first provisioning, you should edit the gulp.config.js and webpack.config.js to match your project structure.

Parameters

  • gulp_directory: where should the gulpfile be created, defaults to <root_directory>/

  • gulp_create_config: Create the gulp.config.js used by the default Gulpefile.js, defaults to true

  • gulp_use_webpack: Setup Webpack alongside Gulp, defaults to true

  • gulp_use_purescript: Add PureScript support to Webpack, defaults to false

  • gulp_browserslist: Define Browserslist in package.json, defaults to:

    - Last 2 versions
- IE 11

Default tasks

Watch & live reload proxy

Run BrowserSync, watch for changes in files, compile and reload browser afterwards with:

npm start

Build for production

npm run build

Optimize images

For performance reason, this task is not included in the watch/build tasks. You should run it manually according to your needs.

Optimize jp(e)g, png, gif & svg files with:

gulp images