AdFab Gulp Boilerplate

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

NPM

npm version Build Status Dependency Status devDependency Status License

Installation

npm install adfab-gulp-boilerplate --save

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

Usage

Configure the tasks you need

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

Task config usage

A task uses somes common parameters:

Example:

{
    "fonts": {
        "task": "copy",
        "source": "fonts/",
        "destination: "fonts/",
    }
}

That task named fonts will execute the copy task which will copy files from your source folder to your destination folder. It will clean font folder every time a file is added/removed from source folder, and will be watched.

{
    "sassadmin": {
        "task": "sass",
        "source": ["sass/admin.scss"],
        "watch": ["sass/**/*.scss"],
        "destination": "admin/css",
        "clean": false
    }
}

That task named sassadmin will execute the sass task which will compile sass to css files from your source folder to your destination folder. Destination folder wont be cleaned (as your admin css folder may contain other css files not manged by yourself). The source file is only your admin css file, but every .scss file updated from your sass folder will be watched.

Many tasks have more options we will detail in Task list overview part.

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.

Task list overview

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

Here is a list of current taks available:

Gulp usage

Build

You can use default task:

gulp

or

gulp build

To execute all the task listed in your gulp-config.json file in listed order.

Single task

You can use:

gulp <taskname>

To compile only a task fom your gulp-config.json file.

Watch

You can use:

gulp watch

To build your tasks and watch for updates to compile files

Browser live reloads

Using:

gulp serve

It start a Browsersync server.

It acts as a proxy to the domain you specified in gulp-config.json (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 for js/sass.

You can run:

gulp --production

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

License

ISC - Copyright (c) 2016-2018 AdFab Team