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
- 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
- Copy or Concat files
- Production mode: JS / CSS minification + sources maps removal
npm install adfab-gulp-boilerplate --save
Upon installation, two files will be copied to the root of your project:
Configure the tasks you need
Every task rely on the
gulp-config.json 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.jsonfor details of every options of below for details about how it works
Task config usage
A task uses somes common parameters:
source: the source folder - a string or an array of string - relative to sourceRoot
destination: the source folder - a string or an array of string - relative to destinationRoot
task: the task you want to use, if the name is not the same as your task name
clean: cleans destination folder of the task before copying files. So removed files from your source folder will be removed from destination folder too. default true
watch: while using
gulp serveyour task source files will be watched by default. You can choose to watch other files for your task instead, or set to false to stop watching files for this task
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.
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:
copy: copy files from your source folder to destination folder
concat: copy files from your source folder to destination folder and concat them in a single file
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: 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: images optimizes image weight when copying
fonts: juste copy your font files
svgsprite: create a SVG sprite from all SVG files in a folder
You can use default task:
To execute all the task listed in your
gulp-config.json file in listed order.
You can use:
To compile only a task fom your
You can use:
To build your tasks and watch for updates to compile files
Browser live reloads
It start a Browsersync server.
It acts as a proxy to the domain you specified in
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
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:
It will remove sourcemap genreration and minify your js and css.
ISC - Copyright (c) 2016-2018 AdFab Team