gulp-frontend-boilerplate

An ES6 boilerplate with common frontend tasks using Gulp 4 as build system.

This is a work in progress. Feel free to contribute. For an older version without Gulp 4, see 0.6.1.

Install

Requirements

Node (use brew or install it from here)

brew install node

Gulp (Getting started)

npm install -g gulpjs/gulp-cli#4.0

Clone this repository

OSX & Linux

git clone --depth 1 https://github.com/dmnsgn/gulp-frontend-boilerplate.git && cd gulp-frontend-boilerplate && rm -rf .git

Windows

git clone --depth 1 https://github.com/dmnsgn/gulp-frontend-boilerplate.git && cd gulp-frontend-boilerplate && rd /s /q .git

Start a new project

This step sets up the boilerplate to fit your needs (App Name, JS compiler/transpiler, JS framework, CSS preprocessor). It should only be ran once.

npm run init

Install an existing project

Then each time you clone the repo, use:

npm install

Usage

Configuration

Open package.json:

Option (`directories` and `config` keys)	Type	Default
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
verbose: provide a more verbose output when available (useful for debugging).	Boolean	false
port: the server port.	Number	3000
browsers: the browser(s) targeted for autoprefixer (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 and for metas	String	''
shareImageURL: the absolute url of the share image for metas	String	''
twitterHandle: twitter handle for metas	String	''
analyticsUA: your google analytics UA	String	''
developerURL: your URL.	String	''

Others keys:

Tasks

Launch it

This is the default task.

npm run dev

All the magic begins here:

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

Same as running gulp --env dev.

Note: if you just want to build the project and serve it, run npm run prod then gulp serve.

Make changes

Write your markup in src folder and in src/inc. Include your partials with 
Add some scss, less or styl 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,.less,.styl}) by adding .png files into images/sprite folder and retina version with @2x suffix.

Build

When you are happy with your changes, run:

npm run prod

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 testMarkup

# mocha tests (written in test folder)
gulp testScripts

# PageSpeed Insights reporter for mobile and desktop
gulp testPsi

Clean it

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

gulp clean

Help

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

gulp --tasks

External issues

On some OS, napa needs to be installed globally first npm install -g napa.
If running Linux, phantomjs-prebuilt@2.1.14 install: node install.js (from favicons └─┬ svg2png) might fail. Running apt-get install bzip2 seems to solve this issue.

Licence

MIT

kashiif/gulp-frontend-boilerplate