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:

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.

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:

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.