From 21e5e7eac92f99838f9a40da7bfeaf6cfeb3c7e9 Mon Sep 17 00:00:00 2001 From: Konstantin Tarkus Date: Fri, 5 Jun 2015 02:34:06 +0300 Subject: [PATCH] Update Gulp and Webpack configs to use ES2015 syntax NOTE: Make sure that you use the latest Gulp version (3.9+) @sebmck :+1: --- gulpfile.js => gulpfile.babel.js | 102 +++++++++++++------------------ package.json | 2 +- webpack.config.js | 39 ++++++------ 3 files changed, 62 insertions(+), 81 deletions(-) rename gulpfile.js => gulpfile.babel.js (60%) diff --git a/gulpfile.js b/gulpfile.babel.js similarity index 60% rename from gulpfile.js rename to gulpfile.babel.js index c23b36f11..fc13b64b4 100644 --- a/gulpfile.js +++ b/gulpfile.babel.js @@ -6,38 +6,30 @@ * LICENSE.txt file in the root directory of this source tree. */ -'use strict'; - -// Include Gulp and other build automation tools and utilities -// See: https://github.com/gulpjs/gulp/blob/master/docs/API.md -var gulp = require('gulp'); -var $ = require('gulp-load-plugins')(); -var del = require('del'); -var path = require('path'); -var runSequence = require('run-sequence'); -var webpack = require('webpack'); -var argv = require('minimist')(process.argv.slice(2)); - -var src = {}; -var watch = false; -var browserSync; +import cp from 'child_process'; +import gulp from 'gulp'; +import gulpLoadPlugins from 'gulp-load-plugins'; +import del from 'del'; +import path from 'path'; +import runSequence from 'run-sequence'; +import webpack from 'webpack'; +import minimist from 'minimist'; + +const $ = gulpLoadPlugins(); +const argv = minimist(process.argv.slice(2)); +const src = Object.create(null); + +let watch = false; +let browserSync; // The default task gulp.task('default', ['sync']); // Clean output directory -gulp.task('clean', del.bind( - null, ['.tmp', 'build/*', '!build/.git'], {dot: true} -)); - -// 3rd party libraries -gulp.task('vendor', function() { - return gulp.src('node_modules/bootstrap/dist/fonts/**') - .pipe(gulp.dest('build/fonts')); -}); +gulp.task('clean', () => del(['.tmp', 'build/*', '!build/.git'], {dot: true})); // Static files -gulp.task('assets', function() { +gulp.task('assets', () => { src.assets = [ 'package.json', 'src/assets/**', @@ -51,11 +43,11 @@ gulp.task('assets', function() { }); // Bundle -gulp.task('bundle', function(cb) { - var config = require('./webpack.config.js'); - var bundler = webpack(config); - var bundlerRunCount = 0; - var verbose = !!argv.verbose; +gulp.task('bundle', cb => { + let config = require('./webpack.config.js'); + const bundler = webpack(config); + const verbose = !!argv.verbose; + let bundlerRunCount = 0; function bundle(err, stats) { if (err) { @@ -73,7 +65,7 @@ gulp.task('bundle', function(cb) { cachedAssets: verbose })); - if (++bundlerRunCount == config.length) { + if (++bundlerRunCount === config.length) { return cb(); } } @@ -86,36 +78,30 @@ gulp.task('bundle', function(cb) { }); // Build the app from source code -gulp.task('build', ['clean'], function(cb) { - runSequence(['vendor', 'assets', 'bundle'], cb); -}); +gulp.task('build', ['clean'], cb => { runSequence(['assets', 'bundle'], cb); }); // Build and start watching for modifications -gulp.task('build:watch', function(cb) { +gulp.task('build:watch', cb => { watch = true; - runSequence('build', function() { + runSequence('build', () => { gulp.watch(src.assets, ['assets']); cb(); }); }); // Launch a Node.js/Express server -gulp.task('serve', ['build:watch'], function(cb) { +gulp.task('serve', ['build:watch'], cb => { src.server = [ 'build/server.js', 'build/content/**/*', 'build/templates/**/*' ]; - - var started = false; - var cp = require('child_process'); - var assign = require('react/lib/Object.assign'); - - var server = (function startup() { + let started = false; + let server = (function startup() { var child = cp.fork('build/server.js', { - env: assign({NODE_ENV: 'development'}, process.env) + env: Object.assign({NODE_ENV: 'development'}, process.env) }); - child.once('message', function(message) { + child.once('message', message => { if (message.match(/^online$/)) { if (browserSync) { browserSync.reload(); @@ -134,13 +120,11 @@ gulp.task('serve', ['build:watch'], function(cb) { return child; })(); - process.on('exit', function() { - server.kill('SIGTERM'); - }); + process.on('exit', () => server.kill('SIGTERM')); }); // Launch BrowserSync development server -gulp.task('sync', ['serve'], function(cb) { +gulp.task('sync', ['serve'], cb => { browserSync = require('browser-sync'); browserSync({ @@ -155,31 +139,29 @@ gulp.task('sync', ['serve'], function(cb) { proxy: 'localhost:5000' }, cb); - process.on('exit', function() { - browserSync.exit(); - }); + process.on('exit', () => browserSync.exit()); gulp.watch(['build/**/*.*'].concat( - src.server.map(function(file) { return '!' + file; }) - ), function(file) { + src.server.map(file => '!' + file) + ), file => { browserSync.reload(path.relative(__dirname, file.path)); }); }); // Deploy via Git -gulp.task('deploy', function(cb) { - var push = require('git-push'); - var remote = argv.production ? +gulp.task('deploy', cb => { + const push = require('git-push'); + const remote = argv.production ? 'https://github.com/{user}/{repo}.git' : 'https://github.com/{user}/{repo}-test.git'; push('./build', remote, cb); }); // Run PageSpeed Insights -gulp.task('pagespeed', function(cb) { - var pagespeed = require('psi'); +gulp.task('pagespeed', cb => { + const pagespeed = require('psi'); // Update the below URL to the public URL of your site - pagespeed.output('example.com', { + pagespeed('example.com', { strategy: 'mobile' // By default we use the PageSpeed Insights free (no API key) tier. // Use a Google Developer API key if you have one: http://goo.gl/RkN0vE diff --git a/package.json b/package.json index efadbec63..e36a7915a 100644 --- a/package.json +++ b/package.json @@ -65,7 +65,7 @@ }, "scripts": { "start": "node server.js", - "lint": "eslint src", + "lint": "eslint src gulpfile.babel.js webpack.config.js", "test": "eslint src && jest", "preupdate-webdriver": "npm install", "update-webdriver": "webdriver-manager update" diff --git a/webpack.config.js b/webpack.config.js index 95b6e0145..ef3c2d362 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -6,17 +6,16 @@ * LICENSE.txt file in the root directory of this source tree. */ -'use strict'; - -var _ = require('lodash'); -var webpack = require('webpack'); -var autoprefixer = require('autoprefixer-core'); -var argv = require('minimist')(process.argv.slice(2)); - -var DEBUG = !argv.release; -var STYLE_LOADER = 'style-loader/useable'; -var CSS_LOADER = DEBUG ? 'css-loader' : 'css-loader?minimize'; -var AUTOPREFIXER_BROWSERS = [ +import webpack, { DefinePlugin, BannerPlugin } from 'webpack'; +import merge from 'lodash/object/merge'; +import autoprefixer from 'autoprefixer-core'; +import minimist from 'minimist'; + +const argv = minimist(process.argv.slice(2)); +const DEBUG = !argv.release; +const STYLE_LOADER = 'style-loader/useable'; +const CSS_LOADER = DEBUG ? 'css-loader' : 'css-loader?minimize'; +const AUTOPREFIXER_BROWSERS = [ 'Android 2.3', 'Android >= 4', 'Chrome >= 20', @@ -26,7 +25,7 @@ var AUTOPREFIXER_BROWSERS = [ 'Opera >= 12', 'Safari >= 6' ]; -var GLOBALS = { +const GLOBALS = { 'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"', '__DEV__': DEBUG }; @@ -36,7 +35,7 @@ var GLOBALS = { // client-side (app.js) and server-side (server.js) bundles // ----------------------------------------------------------------------------- -var config = { +const config = { output: { path: './build/', publicPath: './', @@ -108,14 +107,14 @@ var config = { // Configuration for the client-side bundle (app.js) // ----------------------------------------------------------------------------- -var appConfig = _.merge({}, config, { +const appConfig = merge({}, config, { entry: './src/app.js', output: { filename: 'app.js' }, devtool: DEBUG ? 'source-map' : false, plugins: config.plugins.concat([ - new webpack.DefinePlugin(_.merge(GLOBALS, {'__SERVER__': false})) + new DefinePlugin(merge(GLOBALS, {'__SERVER__': false})) ].concat(DEBUG ? [] : [ new webpack.optimize.DedupePlugin(), new webpack.optimize.UglifyJsPlugin(), @@ -128,7 +127,7 @@ var appConfig = _.merge({}, config, { // Configuration for the server-side bundle (server.js) // ----------------------------------------------------------------------------- -var serverConfig = _.merge({}, config, { +const serverConfig = merge({}, config, { entry: './src/server.js', output: { filename: 'server.js', @@ -146,18 +145,18 @@ var serverConfig = _.merge({}, config, { }, devtool: DEBUG ? 'source-map' : 'cheap-module-source-map', plugins: config.plugins.concat( - new webpack.DefinePlugin(_.merge(GLOBALS, {'__SERVER__': true})), - new webpack.BannerPlugin('require("source-map-support").install();', + new DefinePlugin(merge(GLOBALS, {'__SERVER__': true})), + new BannerPlugin('require("source-map-support").install();', { raw: true, entryOnly: false }) ), module: { loaders: config.module.loaders.map(function(loader) { // Remove style-loader - return _.merge(loader, { + return merge(loader, { loader: loader.loader = loader.loader.replace(STYLE_LOADER + '!', '') }); }) } }); -module.exports = [appConfig, serverConfig]; +export default [appConfig, serverConfig];