gulp-frontend-boilerplate

A gulp boilerplate with common frontend tasks.

This is a work in progress. Feel free to contribute.

Install

Requirements

Node (use brew or install it from here)

$ brew install node

Gulp (are you new with the streaming build system ? Take a sip here)

$ npm install -g gulp

Sass

$ gem install sass compass sass-css-importer sass-globbing

or Less

$ npm install -g less

or Stylus

$ npm install -g stylus

Clone this repository or grab it from npm

$ git clone https://github.com/dmnsgn/gulp-frontend-boilerplate.git

$ npm i gulp-frontend-boilerplate

Init

This step sets up the boilerplate to fit your needs (App Name, JS compiler/transpiler, JS framework, CSS preprocessor).

$ npm start

Then each time you clone the repo, use:

$ npm install

Usage

Configuration

Open gulp/config.js with your favorite text editor.

Option	Type	Default
verbose: provide a more verbose output when available (useful for debugging).	Boolean	false
port: the server port.	Number	3000
src: the source folder path, that's where you write code.	String	src
dist: the destination folder path, that's where your code is compiled.	String	dist
test: the test folder path.	String	test
browsers: the browser(s) targeted for autoprefixer and autopolyfiller (see full list of options here)	Array	['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']
prodUrl: the absolute url to use in the sitemap	String	''
analyticsUA: your google analytics UA	String	''
banner: add a text header above your main files.	String	filled with package.json datas

Gulp tasks

Launch it

This is the default task.

gulp

All the magic begins here:

• process .html files
• process .scss or .less files
• process .js and .coffee files with lint reports
• create a server with BrowserSync and serve dist folder
• watch changes in source folder
• reload on changes in source folder

---

Note: if you just want to build the project and serve a 'production ready' version, run gulp --prod.

Make changes

• Write your markup in src folder and in src/inc. Include your partials with <!-- @include templates/_filename.html -->
• Add some scss or less styles.
• Add some scripts: .js or .coffee.
• Add images in the - wait for it - images folder.
• Generate a spritesheet with corresponding mixins (located in styles/_sprite.scss) by adding .png files into images/sprite folder and retina version with @2x suffix.

Build for deploy

When you are happy with your changes, run:

gulp build

• Replace build tags with .min files, generates these minified files in dist folder (with optimization tasks)
• Add copyright headers and generate a sitemap.xmlfile

Tests tasks

Quick tests and stats with:

// w3c validation
gulp test:markup

// mocha tests (written in test folder)
gulp test:scripts

// PageSpeed Insights reporter for mobile and desktop
gulp test:psi

Clean it

Clean dist dir and clear all caches (sass cache, gulp cache)

gulp clean

Help

This command will give you a list of all tasks available.

gulp help

---

Note: Each task is self documented. You can use them individually (e.g. gulp images:spritesheet, gulp images:optimization) but you should use the tasks above (default then build. Then default if neeeded and build again. serve to check if all is ok before deploying).

External issues

• Gaze break watchers when renaming folder: shama/gaze#56. Waiting for gaze 0.6 gulpjs/gulp#600
• watch doesn't work when adding files: floatdrop/gulp-watch#50
• Run sequence is intended to be a temporary solution until orchestrator is updated to support non-dependent ordered tasks: gulpjs/gulp#347
• Gulp 4 will change. A lot: gulpjs/gulp#355 & gulpjs/gulp#347

Licence

MIT