node package manager

gulp-modern-tasks

gulp-modern-tasks

About

A few opinionated gulp task helpers to help from having to write the same build code between projects.

API

compileJS

JS code is compiled with babel, packaged with browserify, and includes watchify.

If isProduction is true, files will be minified, and no sourcemaps will be generated.

Browerify transforms inlcuded are: babelify. To Include more use browserify-shim and specify extra config in package.json file.

parameters:

opts = {
files: Array<string>: Array of files passed to browserify when creating bundle.
outPath: string: Path built files are located at.
isProduction: bool: Should files be built for production.
}

example:

import {compileJS} from 'gulp-modern-tasks';
 
const opts = {
    files: ['./path/to/file.js'],
    outPath: './build/path',
    isProduction: false,
};
 
gulp.task('compile:js', () => compileJS(opts));
 
// to start watcher 
gulp.task('watch:js', () => {
    global.watch = true;
    compileJS(opts);
});
 

compileSASS

SASS code is compiled using gulp-sass which is a wrapper for node-sass.

If isProduction is true, files will be minified, and no sourcemaps will be generated.

parameters:

{
source: string: Main scss file.
outPath: string: Path built files are located at.
isProduction: bool: Should files be built for production.
}

example:

import {compileSASS} from 'gulp-modern-tasks';
 
const opts {
    source: './path/to/main.scss',
    outPath: './build/path',
    isProduction: false,
};
 
gulp.task('compile:sass', () => compileSASS(opts));
 
// start a watcher as you would normally 
gulp.task('watch:sass', () => {
    gulp.watch('./path/to/**/*.scss', ['compile:sass']);
});
 

testJS

Testing is done with gulp-mocha-phantomjs, implying tests must be written with mocha. Code is packaged and watched with browserify and watchify so code can be written in ES6. #### parameters:

{
files: Array<string>: Array of files passed to browserify when creating bundle.
outPath: string: Path built files are located at.
runner: string: HTML file phantomJS uses to build test environment.
}

example:

import {testJS} from 'gulp-modern-tasks';
 
const opts = {
    files: ['./path/to/file.js'],
    outPath: './build/path',
    runner: './path/to/runner.html',
};
 
gulp.task('test:js', () => testJS(opts));
 
// to start watch 
gulp.task('watch:jstest', () => {
    global.watch = true;
    testJS(opts);
});

lintJS

Linting is done with eslint and gulp-eslint.

parameters:

path: string: Glob or string of file(s) to lint.

example:

import {lintJS} from 'gulp-modern-tasks';
 
gulp.task('lint:js', () => lintJS('./path/to/**/*.js'));