gulpfile.js

Because I spent too much time redoing my gulp tasks, I make this to work with a unique configuration file written in YAML.

The project is inspired by Blendid (formerly known as Gulp Starter).

Changes

See changes in CHANGELOG

Execution graph

Here's how all the tasks run:

With this organisation, you can chain some process. For example, you can bundle your scripts with Browserify or Webpack and pass it to default Javascript task. Another example concern images, you can build sprites and optimize it by passing it to images task.

Quick start on a fresh project (empty directory)

Install gulpfile.js:

npm init
npm install gulpfile.js --save-dev --save-exact
npx gulpfile.js

Create configuration files:

touch gulpconfig.yml
touch .eslintrc

Start gulpfile.js:

npx gulpfile.js

Commands

npx gulpfile.js

This is where the magic happens. The perfect front-end workflow. This runs the development task, which starts compiling, watching, and live updating all our files as we change them. Browsersync will start a server on port 3000, or do whatever you've configured it to do. You'll be able to see live changes in all connected browsers.

More details

npx gulpfile.js [task] [options...]

• task: the name of the task to start. It could be global (lint, build or watch) or more specific like sass, sass:build or sass:public:build.
• options:

--config-file=YAML  change the configuration file used if there were none in the
                    current directory.
--no-favicon        disable favicon generation to save time on build.
--no-lint           disable lint tasks.
--revision[=JSON]   generate JSON with list of genereated files and some hash.
--sourcemaps        generate inline sourcemaps.
--sourcemap-files   generate external sourcemap files.

Examples

npx gulpfile.js build

Compiles files to your destination directory.

It's a good idea to add aliases for these commands to your package.json scripts object.

package.json:

{
  "scripts": {
    "start": "npx gulpfile.js",
    "build": "npx gulpfile.js build"
  }
}

Command line:

npm start
npm run build

Configuring tasks

Except for browsersync, all section define a set of tasks build on the same template. Each section define 2 entries:

• tasks: list of tasks
• settings: global override of task settings

For each tasks, you can override settings globally or for the task only. All options is detailed below.

Clean

Delete directories or files.

Template:

clean:
  files:
    - "dist/"
    - "src/sass/helpers/*.scss"

Browsersync

Override default settings and watch files not watched by other tasks.

Template:

browsersync:
  settings:
    server:
      baseDir: "build/"
  watch:
    - "**/*.html"

In this configuration, files in build directory will by served at http://localhost:3000 and all changes on HTML file will reload the browser. You can proxy an existing website as written below:

browsersync:
  settings:
    proxy: "http://website"

Related documentation:

• Browsersync options

Pug

Build PUG files into HTML. In the template below, one task called public is defined and compile all PUG files in directory assets/views in HTML file stored in build. You can pass data to PUG with data settings.

Template:

pug:
  tasks:
    public:
      src:
        - "assets/views/**/*.pug"
      dst: "build"
      settings:
        data: "pugdata.yml"

SASS

Build SASS files into CSS. In the template below, one task called public is defined and compile all SASS files in directory assets/sass in HTML file stored in build/css. You can override settings of SASS and autoprefixer. It's also possible to extract media queries and critical styles into separate files.

Template:

sass:
  tasks:
    public:
      src:
        - "assets/sass/**/*.scss"
      dst: "build/css"
  settings:
    sass:
      errLogToConsole: true
    mqpacker:
      sort: "desktop"
    inlineSVG:
      path: "assets/"
    extractMQ: true
    critical: true
    purgeCSS: true

Related documentation:

• Sass
• autoprefixer
• postcss-assets
• postcss-inline-svg
• postcss-purgecss
• rucksack
• CSS MQPacker

JavaScript

Concatenate multiple Javascript files into one. In the template below, one task called public is defined and concatenate all Javascript files in directory assets/js in two files (app.js and app.min.js) stored in build/js. You can override settings of Babel using .babelrc file.

Template:

javascript:
  tasks:
    public:
      src:
        - "assets/js/*.js"
      dst: "build/js"
      filename: "app.js"

Related documentation:

• Babel

Browserify

Package javascript files into one file. In the template below, one task called public is defined and package javascript files with entrypoint defined by src in two files (app.js and app.min.js) stored in build/js. You can override settings of Browserify and Babel.

Template:

browserify:
  tasks:
    public:
      src: "assets/js/app.js"
      dst: "build/js"
      filename: "app.js"
      settings:
        eslint: ".eslintrc"

Related documentation:

• Browserify
• Babel

Webpack

Package javascript files into one file. In the template below, one task called public is defined and package javascript files with entrypoint defined by src in two files (app.js and app.min.js) stored in build/js. You can override settings of Browserify, Babel and ESLint.

Template:

webpack:
  tasks:
    public:
      src: "assets/js/app.js"
      watch:
        - "assets/js/**/*.js"
      dst: "build/js"
      filename: "app.js"
      settings:
        babel:
          sourceType: "module"

Related documentation:

• Webpack
• Babel

TypeScript

Package TypeScript files into one javascript file. In the template below, one task called public is defined and package TypeScript files with entrypoint defined by src in two files (app.js and app.min.js) stored in build/js. You can override settings of Browserify, Babel and ESLint.

typescript:
  tasks:
    public:
      src: "assets/typescript/app.ts"
      watch:
        - "assets/typescript/**/*.ts"
      dst: "build/js"
      filename: "app.js"
      settings:
        eslint:
          configFile: ".eslintrc-ts"
          ignorePath: ".eslintignore-ts"

Related documentation:

• TypesSript
• Babel

Images

Minify images with imagemin. In the template below, one task called public is defined and optimize all images in directory assets/images and store them in build/images. You can override settings of imagemin.

Template:

images:
  tasks:
    public:
      src:
        - "assets/images/**/*.png"
        - "assets/images/**/*.jpg"
        - "assets/images/**/*.jpeg"
        - "assets/images/**/*.gif"
        - "assets/images/**/*.svg"
      dst: "build/images"
  settings:
    webp: true

Related documentation:

• gulp-imagemin
• imagemin-webp

Sprites

Convert a set of images into a spritesheet and CSS variables. The two templates below show the two way to define sprites: first one is normal method, the second is for retina configuration. All images in assets/sprites will be converted in a sprite stored in build/images. The name of the task define the name of the sprite file but you can add a prefix. SASS file is build in assets/sass/sprites. You can override settings of imagemin.

Template:

sprites:
  tasks:
    icon:
      src:
        - "assets/sprites/*.png"
        - "assets/sprites/*.jpg"
      dst: "build/images"
      settings:
        sass:
          dst: "assets/sass/sprites"
          rel: "../images"
        prefix: "icon"

sprites:
  tasks:
    icon:
      src-1x:
        - "assets/sprites/*.png"
        - "assets/sprites/*.jpg"
      src-2x:
        - "assets/sprites/*@2x.png"
        - "assets/sprites/*@2x.jpg"
      dst: "build/images"
      settings:
        sass:
          dst: "assets/sass/sprites"
          rel: "../images"
        prefix: "icon"

Related documentation:

• spritesmith

Fonts

Convert a set of SVG file in font files like FontAwesome or Foundation. In the template below, one task called custom is defined and convert all SVG in directory assets/svg and store font files in build/fonts and SASS file in assets/sass/fonts. In default behavior, the icons was named icon-{name-of-task}-{name-of-svg}. You can change the default prefix by any value in settings. In this case, the name of each icon is {prefix}-{name-of-task}-{name-of-svg}. If you define an empty prefix, the name become {name-of-task}-{name-of-svg}.

Template:

fonts:
  tasks:
    custom:
      src:
        - "assets/svg/*.svg"
      dst: "build/fonts"
      settings:
        sass:
          dst: "assets/sass/fonts"
          rel: "../fonts"
        prefix: "font"
  settings:
    template: "fontawesome"

Related documentation:

• iconfont

SVG store

Combine multiple SVG into one. It could be used as a sprite of SVG. In the template below, one task called icon is defined to combine all SVG files in the directory assets/svg into one file called icons.svg located in build/images. In default behavior, the icons was named icon-{name-of-svg}. You can change the default prefix by any value in settings. In this case, the name of each icon is {prefix}-{name-of-svg}. If you define an empty prefix, the name become {name-of-svg}.

** Template:**

svgstore:
  tasks:
    icons:
      src:
        - "assets/svg/*.svg"
      dst: "build/images"
      filename: "icons.svg"
      settings:
        prefix: "icon"

Related documentation:

• svstore

Revision

** Template **

revision: "build/rev-manifest.json"

** Result **

{
  "sass": {
    "public": {
      "app.css": {
        "md5": "63d00699ad1c641c27c5fa8488c90143",
        "revRelFile": "app.css",
        "sha1": "c997a7fd7d5ce37a2b1b132c7b0989af67a900a3",
        "sha256": "cf79d6c88f27aa05c84f71f6e6e3bfc27b7606aca905204786c52a4d0400c256"
      }
    }
  }
}

What's under the hood?

Gulp tasks! Built combining the following:

Feature	Packages Used
Live Updating	browsersync
Pug	gulp-pug, gulp-data, gulp-pug-linter
SASS	gulp-sass, Sass, gulp-postcss, autoprefixer, postcss-assets, postcss-inline-svg, postcss-svgo, postcss-purgecss, rucksack, CSS MQPacker, cssnano, gulp-sass-lint
JavaScript	gulp-concat, gulp-babel, gulp-terser, gulp-eslint
Browserify	browserify, babelify, gulp-terser, gulp-eslint
Webpack	webpack-stream, webpack, babelify, gulp-terser, gulp-eslint
TypeScript	browserify, tsify, typescript, babelify, gulp-terser, gulp-eslint
Images	gulp-imagemin, imagemin-webp
Sprites	gulp.spritesmith
Fonts	gulp-iconfont
SVG store	gulp-svgstore, gulp-svgmin