/gulp-standard-tasks

gulp-standard-tasks is a opinionated set of tasks that can be registered with gulp to quickly enable building of static assets.

Primary LanguageJavaScript

gulp-standard-tasks

gulp-standard-tasks is an opinionated set of tasks that can be registered with gulp to quickly enable building of static assets. Aside from building static assets it also bundles Browsersync to enable auto reloading of the browser when changes have been made to the page or assets.

Installation

To install gulp-standard-tasks install it from npm using

npm install gulp-standard-tasks --save-dev

Usage

To use gulp-standard-tasks register the tasks you want to use using gulp. Instructions on how to do this for each task follow.

Clean

The clean task is used to remove a directory and its contents. This is typically used before regenerating your assets so you can ensure the folder your assets are built to does not contain any legacy assets.

Options

To use the clean task, register it with gulp.task passing the folder to be deleted as a parameter.

Example usage

const gulp = require('gulp');
const tasks = require('gulp-standard-tasks')(gulp);

gulp.task('clean-images', tasks.clean('./_site/images/**/*'));

Copy

The copy task enables you to copy assets from one location to another.

Options

The copy task accepts an object with the following properties:

  • src Standard gulp src expression specifying files to be copied
  • dest Destination directory

Example usage:

const gulp = require('gulp');
const tasks = require('gulp-standard-tasks')(gulp);

gulp.task('docs-image-copy', ['clean-images'], tasks.copy({
	src: './docs/images/**/*',
	dest: './.site/images'
}));

CSS

The css task enables you to compile Sass to CSS. It takes an opinionated approach to building Sass by taking advantage of the following gulp plugins to optimise for browser support and file size.

  • gulp-sass
  • gulp-rename
  • gulp-combine-media-queries
  • gulp-autoprefixer
  • gulp-csso

Options

The css task accepts an object with the following properties:

  • src Standard gulp src expression
  • dest Destination directory,
  • mode Development (dev) or Production (prod) mode
  • autoprefixer Autoprefixer browser expression for what you want to support, default value 'last 3 versions'
  • csso Enable csso CSS optimisation default value true (prod mode), false (dev mode)
  • sourcemaps Enable sourcemaps default value true (dev mode), false (prod mode)
  • browserSync Enable Browsersync default value false
  • rename Object to be passed to gulp-rename - see gulp-rename for available options

Example usage:

const gulp = require('gulp');
const tasks = require('gulp-standard-tasks')(gulp);

gulp.task('sass-dev', tasks.css({
	src: 'docs/_scss/docs.scss',
	dest: 'docs/css'
}));

gulp.task('sass-prod', tasks.css({
	src: 'docs/_scss/docs.scss',
	dest: 'docs/css',
	mode: 'prod'
}));

SVG

Reusable task for compiling SVG into spritesheets

Options

The svg task accepts an object with the following properties:

  • src Standard gulp src expression
  • dest Destination directory,
  • prefix A prefix the svg filenames will use when referenced in the spritesheet default value 'icon-',
  • removeFill Option to remove the fill of the SVG so it can be styled using CSS default value false

Example usage:

const gulp = require('gulp');
const tasks = require('gulp-standard-tasks')(gulp);

gulp.task('svg-icons', tasks.svg({
    src: 'src/svg/icons/*.svg',
    dest: 'dist/images',
    removeFill: true
}));

JavaScript

Reusable task for compiling JavaScript using browserify

Options

The browserify task accepts an object with the following properties:

  • src Standard gulp src expression
  • dest Destination directory,
  • bundleName Name of the bundle to be built inside the destination folder
  • mode Development (dev) or Production (prod) mode default value dev
  • watch Should watchify be enabled for this build (watches files and rebuilds on changes) default value false
  • minify Should JavaScript be minified using uglify default value true (prod mode), false (dev mode)
  • fullPaths Should Browserify include the full paths to the modules it has included (needed for tools such as discify that do deep package inspection) default value true (dev mode), false (prod mode)

Example usage:

const gulp = require('gulp');
const tasks = require('gulp-standard-tasks')(gulp);

gulp.task('browserify', tasks.browserify({
    src: 'docs/scripts/docs.js',
    dest: '.site/scripts',
    bundleName: 'docs-bundle.min.js'
}));

Jekyll

To use the Jekyll builder you will need to have first installed the Jekyll Ruby Gem. This task will wrap the Ruby Gem to enable Jeyll builds to be controlled by Gulp.

Example usage:

const gulp = require('gulp');
const tasks = require('gulp-standard-tasks')(gulp);

gulp.task('jekyll-build', tasks.jekyll.build);

Browsersync

A Browsersync instance is exposed by gulp-standard-tasks so that this instance can be shared between tasks.

Options

gulp-standard-tasks exposes an instance of Browsersync. This means any of the functionality documented on the Browsersync website can be used when using this module.

Example usage:

This example shows how you might use Browsersync in conjunction with Jekyll to reload the content after Jekyll has rebuilt the page.

const gulp = require('gulp');
const tasks = require('gulp-standard-tasks')(gulp);

gulp.task('serve', ['jekyll-build'], function() {
    tasks.browserSync({
        server: {
            baseDir: '.site'
        }
    });
});


gulp.task('jekyll-build', tasks.jekyll.build);
gulp.task('jekyll-rebuild', ['jekyll-build'], () => tasks.browserSync.reload());

Contributing

gulp-standard-tasks is maintained by Beamly and is closed to outside contributions.

Licence

gulp-standard-tasks is licensed under the Apache 2.0 license.