gulpfile.js
const gulp = require('gulp')
const loadPlugins = require('gulp-load-plugins')
const del = require('del')
const glob = require('glob')
const path = require('path')
const isparta = require('isparta')
const webpack = require('webpack')
const webpackStream = require('webpack-stream')
const Instrumenter = isparta.Instrumenter
const mochaGlobals = require('./test/setup/.globals')
const manifest = require('./package.json')
// Load all of our Gulp plugins
const $ = loadPlugins()
// Gather the library data from `package.json`
const config = manifest.babelBoilerplateOptions
const mainFile = manifest.main
const destinationFolder = path.dirname(mainFile)
const exportFileName = path.basename(mainFile, path.extname(mainFile))
function cleanDist(done) {
del([destinationFolder]).then(() => done())
}
function cleanTmp(done) {
del(['tmp']).then(() => done())
}
// Lint a set of files
function lint(files) {
return gulp
.src(files)
.pipe($.eslint())
.pipe($.eslint.format())
.pipe($.eslint.failAfterError())
}
function lintSrc() {
return lint('src/**/*.js')
}
function lintTest() {
return lint('test/**/*.js')
}
function lintGulpfile() {
return lint('gulpfile.js')
}
function build() {
return gulp
.src(path.join('src', config.entryFileName))
.pipe(
webpackStream(
{
output: {
filename: `${exportFileName}.js`,
libraryTarget: 'umd',
library: config.mainVarName,
},
// Add your own externals here. For instance,
// {
// jquery: true
// }
// would externalize the `jquery` module.
externals: {},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
query: {
babelrc: false,
presets: [
[
'es2015',
{
// Enable tree-shaking by disabling commonJS transformation
modules: false,
},
],
],
plugins: ['transform-object-rest-spread'],
},
},
],
},
],
},
devtool: 'source-map',
},
webpack
)
)
.pipe(gulp.dest(destinationFolder))
.pipe($.filter(['**', '!**/*.js.map']))
.pipe($.rename(`${exportFileName}.min.js`))
.pipe($.sourcemaps.init({ loadMaps: true }))
.pipe($.uglify())
.pipe($.sourcemaps.write('./'))
.pipe(gulp.dest(destinationFolder))
}
function _mocha() {
return gulp
.src(['test/setup/node.js', 'test/unit/**/*.js'], { read: false })
.pipe(
$.mocha({
reporter: 'dot',
globals: Object.keys(mochaGlobals.globals),
ignoreLeaks: false,
})
)
}
function _registerBabel() {
require('babel-register')
require('babel-polyfill')
}
function test() {
_registerBabel()
return _mocha()
}
function coverage(done) {
_registerBabel()
gulp
.src(['src/**/*.js'])
.pipe(
$.istanbul({
instrumenter: Instrumenter,
includeUntested: true,
})
)
.pipe($.istanbul.hookRequire())
.on('finish', () => {
return test().pipe($.istanbul.writeReports()).on('end', done)
})
}
const watchFiles = ['src/**/*', 'test/**/*', 'package.json', '**/.eslintrc']
// Run the headless unit tests as you make changes.
function watch() {
gulp.watch(watchFiles, ['test'])
}
function testBrowser() {
// Our testing bundle is made up of our unit tests, which
// should individually load up pieces of our application.
// We also include the browser setup file.
const testFiles = glob.sync('./test/unit/**/*.js')
const allFiles = ['./test/setup/browser.js'].concat(testFiles)
// Lets us differentiate between the first build and subsequent builds
var firstBuild = true
// This empty stream might seem like a hack, but we need to specify all of our files through
// the `entry` option of webpack. Otherwise, it ignores whatever file(s) are placed in here.
return gulp
.src('')
.pipe($.plumber())
.pipe(
webpackStream(
{
watch: true,
entry: allFiles,
output: {
filename: '__spec-build.js',
},
// Externals isn't necessary here since these are for tests.
module: {
// This is what allows us to author in future JavaScript
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
query: {
babelrc: false,
presets: [
[
'es2015',
{
modules: false,
},
],
],
plugins: ['transform-object-rest-spread'],
},
},
],
},
{
test: /\.json$/,
use: [
{
loader: 'json-loader',
},
],
},
],
},
plugins: [
// By default, webpack does `n=>n` compilation with entry files. This concatenates
// them into a single chunk.
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1,
}),
],
devtool: 'inline-source-map',
},
webpack,
() => {
if (firstBuild) {
$.livereload.listen({
port: 35729,
host: 'localhost',
start: true,
})
gulp.watch(watchFiles, ['lint'])
} else {
$.livereload.reload('./tmp/__spec-build.js')
}
firstBuild = false
}
)
)
.pipe(gulp.dest('./tmp'))
}
// Remove the built files
gulp.task('clean', cleanDist)
// Remove our temporary files
gulp.task('clean-tmp', cleanTmp)
// Lint our source code
gulp.task('lint-src', lintSrc)
// Lint our test code
gulp.task('lint-test', lintTest)
// Lint this file
gulp.task('lint-gulpfile', lintGulpfile)
// Lint everything
gulp.task('lint', ['lint-src', 'lint-test', 'lint-gulpfile'])
// Build two versions of the library
gulp.task('build', ['lint', 'clean'], build)
// Lint and run our tests
gulp.task('test', ['lint'], test)
// Set up coverage and run tests
gulp.task('coverage', ['lint'], coverage)
// Set up a livereload environment for our spec runner `test/runner.html`
gulp.task('test-browser', ['lint', 'clean-tmp'], testBrowser)
// Run the headless unit tests as you make changes.
gulp.task('watch', watch)
// An alias of test
gulp.task('default', ['test'])