node package manager
Easy sharing. Manage teams and permissions with one click. Create a free org »

adfab-gulp-boilerplate

Adfab Gulp Boilerplate

NPM

npm version Build Status Dependency Status devDependency Status License

The goal of this Gulp boilerplate is to free you time so you can do something more interesting than reinventing the wheel, it includes:

  • Automatic reloading of the browser on code modification (using Browsersync)
  • CSS / JS Sourcemaps
  • HTML minification
  • Image minification
  • JS compilation
  • Babel transpiler (ES6 support FTW)
  • SASS or LESS compilation
  • Linting for JS, SASS and LESS
  • Desktop notifications on success and error
  • Fonticon generation
  • SVG Sprite generation
  • Production mode: JS / CSS minification + sources maps removal

Installation

npm install adfab-gulp-boilerplate

Upon installation, two files will be copied to the root of your project: gulpfile.js and gulp-config.js.

Usage

Configure the tasks you need

Every task rely on the gulp-config.js file for their configuration. Just fill-in the values you need.

  • vhost: your local url,
  • sourceRoot: root path where your assets will be stored
  • destinationRoot: the path where your public final assets will be stored
  • tasks: the list of all tasks you want to run. See details in gulp-config.js for details of every options of below for details about how it works

Task list

You can comment of remove the tasks you don't need. For exemple you will certainly need only one from less, sass and postcss.

Every tasks has a desktop notification when succeeded or failed, with detailed logs.

Here is a list of current taks available:

  • sass: to compile scss into css file, with autoprefixer, sourcemaps for development, minify for production
  • less: as sass, but for less
  • sasslint: checks your sass code
  • lesshint: checks your less code
  • postcss: the same, but for postcss
  • fonticon: takes all svg files in a folder to create a fonticon and a css/less/sass file to be included in your final css
  • jslibs: concatenates and uglify all your js libs into one single file
  • scripts: parse your js with babelify for es6 compatibility. adds sourcemaps for dev, uglify for production
  • eslint: checks your js code
  • views: minify your html
  • images: optimizes image weight when copying
  • fonts: juste copy your font files
  • svgsprite: create a svg sprite from all svg in a folder

Add custom task / Override task

You can create a folder named 'gulp-tasks' at the root of your project. In this folder you can add new tasks. If a task has the same name as a default boilerplate task, it will override it.

Tasks options

For every task you can add an option 'clean' to disable clean task for task destination folder before build:

{
    "taskName": {
        "clean": false
    }
}

It can be useful if your destination folder already contains other files you want to keep, but your deleted files won't be removed anymore from destination.

Browser live reloads

Start Browsersync:

gulp serve

It acts as a proxy to the domain you specified in gulp-config.js (property vhost). You can now access your project by specifying the 3000 port (if you usually access your project via http://project.localhost/, now it would be http://project.localhost:3000/).

You can also test it in production mode by passing the --production option. That way, it will remove sourcemaps and minify JS and CSS.

Development and production

Development mode (by default), adds sourcemaps to your code

You can run:

gulp --production

it will remove sourcemap genreration and minify your js and css.