commit 21e5e7eac92f99838f9a40da7bfeaf6cfeb3c7e9
parent f069e0ad67f766b236441a645b9fa071f43caab4
Author: Konstantin Tarkus <hello@tarkus.me>
Date: Fri, 5 Jun 2015 02:34:06 +0300
Update Gulp and Webpack configs to use ES2015 syntax
NOTE: Make sure that you use the latest Gulp version (3.9+)
@sebmck :+1:
Diffstat:
4 files changed, 190 insertions(+), 209 deletions(-)
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -0,0 +1,170 @@
+/*
+ * React.js Starter Kit
+ * Copyright (c) Konstantin Tarkus (@koistya), KriaSoft LLC
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.txt file in the root directory of this source tree.
+ */
+
+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(['.tmp', 'build/*', '!build/.git'], {dot: true}));
+
+// Static files
+gulp.task('assets', () => {
+ src.assets = [
+ 'package.json',
+ 'src/assets/**',
+ 'src/content*/**/*.*',
+ 'src/templates*/**/*.*'
+ ];
+ return gulp.src(src.assets)
+ .pipe($.changed('build'))
+ .pipe(gulp.dest('build'))
+ .pipe($.size({title: 'assets'}));
+});
+
+// Bundle
+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) {
+ throw new $.util.PluginError('webpack', err);
+ }
+
+ console.log(stats.toString({
+ colors: $.util.colors.supportsColor,
+ hash: verbose,
+ version: verbose,
+ timings: verbose,
+ chunks: verbose,
+ chunkModules: verbose,
+ cached: verbose,
+ cachedAssets: verbose
+ }));
+
+ if (++bundlerRunCount === config.length) {
+ return cb();
+ }
+ }
+
+ if (watch) {
+ bundler.watch(200, bundle);
+ } else {
+ bundler.run(bundle);
+ }
+});
+
+// Build the app from source code
+gulp.task('build', ['clean'], cb => { runSequence(['assets', 'bundle'], cb); });
+
+// Build and start watching for modifications
+gulp.task('build:watch', cb => {
+ watch = true;
+ runSequence('build', () => {
+ gulp.watch(src.assets, ['assets']);
+ cb();
+ });
+});
+
+// Launch a Node.js/Express server
+gulp.task('serve', ['build:watch'], cb => {
+ src.server = [
+ 'build/server.js',
+ 'build/content/**/*',
+ 'build/templates/**/*'
+ ];
+ let started = false;
+ let server = (function startup() {
+ var child = cp.fork('build/server.js', {
+ env: Object.assign({NODE_ENV: 'development'}, process.env)
+ });
+ child.once('message', message => {
+ if (message.match(/^online$/)) {
+ if (browserSync) {
+ browserSync.reload();
+ }
+ if (!started) {
+ started = true;
+ gulp.watch(src.server, function() {
+ $.util.log('Restarting development server.');
+ server.kill('SIGTERM');
+ server = startup();
+ });
+ cb();
+ }
+ }
+ });
+ return child;
+ })();
+
+ process.on('exit', () => server.kill('SIGTERM'));
+});
+
+// Launch BrowserSync development server
+gulp.task('sync', ['serve'], cb => {
+ browserSync = require('browser-sync');
+
+ browserSync({
+ logPrefix: 'RSK',
+ notify: false,
+ // Run as an https by setting 'https: true'
+ // Note: this uses an unsigned certificate which on first access
+ // will present a certificate warning in the browser.
+ https: false,
+ // Informs browser-sync to proxy our Express app which would run
+ // at the following location
+ proxy: 'localhost:5000'
+ }, cb);
+
+ process.on('exit', () => browserSync.exit());
+
+ gulp.watch(['build/**/*.*'].concat(
+ src.server.map(file => '!' + file)
+ ), file => {
+ browserSync.reload(path.relative(__dirname, file.path));
+ });
+});
+
+// Deploy via Git
+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', cb => {
+ const pagespeed = require('psi');
+ // Update the below URL to the public URL of your site
+ 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
+ // key: 'YOUR_API_KEY'
+ }, cb);
+});
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,188 +0,0 @@
-/*
- * React.js Starter Kit
- * Copyright (c) Konstantin Tarkus (@koistya), KriaSoft LLC
- *
- * This source code is licensed under the MIT license found in the
- * 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;
-
-// 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'));
-});
-
-// Static files
-gulp.task('assets', function() {
- src.assets = [
- 'package.json',
- 'src/assets/**',
- 'src/content*/**/*.*',
- 'src/templates*/**/*.*'
- ];
- return gulp.src(src.assets)
- .pipe($.changed('build'))
- .pipe(gulp.dest('build'))
- .pipe($.size({title: 'assets'}));
-});
-
-// Bundle
-gulp.task('bundle', function(cb) {
- var config = require('./webpack.config.js');
- var bundler = webpack(config);
- var bundlerRunCount = 0;
- var verbose = !!argv.verbose;
-
- function bundle(err, stats) {
- if (err) {
- throw new $.util.PluginError('webpack', err);
- }
-
- console.log(stats.toString({
- colors: $.util.colors.supportsColor,
- hash: verbose,
- version: verbose,
- timings: verbose,
- chunks: verbose,
- chunkModules: verbose,
- cached: verbose,
- cachedAssets: verbose
- }));
-
- if (++bundlerRunCount == config.length) {
- return cb();
- }
- }
-
- if (watch) {
- bundler.watch(200, bundle);
- } else {
- bundler.run(bundle);
- }
-});
-
-// Build the app from source code
-gulp.task('build', ['clean'], function(cb) {
- runSequence(['vendor', 'assets', 'bundle'], cb);
-});
-
-// Build and start watching for modifications
-gulp.task('build:watch', function(cb) {
- watch = true;
- runSequence('build', function() {
- gulp.watch(src.assets, ['assets']);
- cb();
- });
-});
-
-// Launch a Node.js/Express server
-gulp.task('serve', ['build:watch'], function(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() {
- var child = cp.fork('build/server.js', {
- env: assign({NODE_ENV: 'development'}, process.env)
- });
- child.once('message', function(message) {
- if (message.match(/^online$/)) {
- if (browserSync) {
- browserSync.reload();
- }
- if (!started) {
- started = true;
- gulp.watch(src.server, function() {
- $.util.log('Restarting development server.');
- server.kill('SIGTERM');
- server = startup();
- });
- cb();
- }
- }
- });
- return child;
- })();
-
- process.on('exit', function() {
- server.kill('SIGTERM');
- });
-});
-
-// Launch BrowserSync development server
-gulp.task('sync', ['serve'], function(cb) {
- browserSync = require('browser-sync');
-
- browserSync({
- logPrefix: 'RSK',
- notify: false,
- // Run as an https by setting 'https: true'
- // Note: this uses an unsigned certificate which on first access
- // will present a certificate warning in the browser.
- https: false,
- // Informs browser-sync to proxy our Express app which would run
- // at the following location
- proxy: 'localhost:5000'
- }, cb);
-
- process.on('exit', function() {
- browserSync.exit();
- });
-
- gulp.watch(['build/**/*.*'].concat(
- src.server.map(function(file) { return '!' + file; })
- ), function(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 ?
- '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');
- // Update the below URL to the public URL of your site
- pagespeed.output('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
- // key: 'YOUR_API_KEY'
- }, cb);
-});
diff --git 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
@@ -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];
