gulp-frontend-boilerplate v1.6.2

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:

Others keys:

• Babel
• ESLint
• stylelint

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 <!-- @include inc/_filename.html -->
• 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

Licence

MIT