Skip to content

Commit

Permalink
Update Gulp and Webpack configs to use ES2015 syntax
Browse files Browse the repository at this point in the history 
NOTE: Make sure that you use the latest Gulp version (3.9+)

@sebmck 👍
  • Loading branch information
@koistya
koistya committed Jun 4, 2015
1 parent f069e0a commit 21e5e7e
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 81 deletions.
102 changes: 42 additions & 60 deletions gulpfile.js → gulpfile.babel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/**',
Expand All @@ -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) {
Expand All @@ -73,7 +65,7 @@ gulp.task('bundle', function(cb) {
cachedAssets: verbose
}));

if (++bundlerRunCount == config.length) {
if (++bundlerRunCount === config.length) {
return cb();
}
}
Expand All @@ -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();
Expand All @@ -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({
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
39 changes: 19 additions & 20 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -26,7 +25,7 @@ var AUTOPREFIXER_BROWSERS = [
'Opera >= 12',
'Safari >= 6'
];
var GLOBALS = {
const GLOBALS = {
'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
'__DEV__': DEBUG
};
Expand All @@ -36,7 +35,7 @@ var GLOBALS = {
// client-side (app.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------

var config = {
const config = {
output: {
path: './build/',
publicPath: './',
Expand Down Expand Up @@ -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(),
Expand All @@ -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',
Expand All @@ -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];

0 comments on commit 21e5e7e

Please sign in to comment.