Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
2016 development tool
{
"presets": [
"es2015",
"react"
],
"env": {
"development": {
"presets": [
"power-assert"
]
}
}
}
const gulp = require('gulp'),
$ = require('gulp-load-plugins')(),
connect = require('connect'),
serveStatic = require('serve-static'),
connectLivereload = require('connect-livereload'),
del = require('del'),
path = require('path'),
webpack = require('webpack'),
glob = require('glob'),
distDir = path.join(__dirname, 'dist'),
bundler = webpack(webpackConfig());
function webpackConfig(environment = 'development') {
const config = {
entry: {
'app': './src/scripts/app.js',
},
output: {
path: path.join(distDir, 'scripts'),
filename: '[name].js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
}
]
}
};
if (environment === 'development') {
config.devtool = 'inline-source-map';
} else if (environment === 'testing') {
config.devtool = 'inline-source-map';
config.entry = {
test: glob.sync(path.join(__dirname, 'test/**/*-test.js'))
};
config.output = {
path: path.join(__dirname, '.power-asserted'),
filename: '[name].js'
};
config.module.loaders.push({
test: /\.json$/,
loader: 'json'
});
} else if (environment === 'production') {
config.plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
];
}
return config;
}
gulp.task('clean', del.bind(null, [distDir]));
gulp.task('html', () => {
return gulp.src('src/**/*.html')
.pipe(gulp.dest(distDir))
.pipe($.livereload());
});
gulp.task('fonts', () => {
return gulp.src([
'node_modules/bootstrap/fonts/*'
])
.pipe(gulp.dest(path.join(distDir, 'fonts')));
});
gulp.task('stub', () => {
return gulp.src('src/stub/**/*.json')
.pipe(gulp.dest(path.join(distDir, 'stub')));
});
gulp.task('image', () => {
return gulp.src('src/img/**/*')
.pipe(gulp.dest(path.join(distDir, 'img')));
});
function less() {
return gulp.src('src/styles/**/*.less')
.pipe($.plumber(function(err) {
$.util.log('[less]', err.toString({
colors: true,
chunkModules: false
}));
// @see https://github.com/floatdrop/gulp-plumber/issues/30#issuecomment-218222434
this.emit('end');
this.destroy();
}))
.pipe($.less({
paths: [
'node_modules/bootstrap/less'
]
}));
}
gulp.task('less:dev', () => {
return less()
.pipe(gulp.dest(path.join(distDir, 'styles')))
.pipe($.livereload());
});
gulp.task('less:prod', () => {
return less()
.pipe($.minifyCss())
.pipe(gulp.dest(path.join(distDir, 'styles')));
});
gulp.task('js:dev', cb => {
bundler.run((err, stats) => {
if (err) {
throw new $.util.PluginError('webpack:build', err);
}
$.util.log('[webpack:build]', stats.toString({
colors: true,
chunkModules: false
}));
cb();
$.livereload.reload();
});
});
gulp.task('js:prod', cb => {
webpack(webpackConfig('production')).run((err, stats) => {
if (err) {
throw new $.util.PluginError('webpack:build', err);
}
$.util.log('[webpack:build]', stats.toString({
colors: true,
chunkModules: false
}));
cb();
});
});
gulp.task('js:test', cb => {
webpack(webpackConfig('testing')).run((err, stats) => {
if (err) {
throw new $.util.PluginError('webpack:build', err);
}
$.util.log('[webpack:build]', stats.toString({
colors: true,
chunkModules: false
}));
cb();
});
});
gulp.task('dev', ['html', 'image', 'fonts', 'stub', 'js:dev', 'less:dev', 'serve'], () => {
gulp.watch('src/**/*.html', ['html']);
gulp.watch('src/scripts/**/*.js', ['js:dev']);
gulp.watch('src/styles/**/*.less', ['less:dev']);
});
gulp.task('build', ['html', 'image', 'fonts', 'stub', 'js:prod', 'less:prod']);
gulp.task('serve', () => {
const port = Number(process.env.PORT || '3000')
$.livereload.listen();
connect()
.use(connectLivereload())
.use(serveStatic(distDir))
.listen(port);
});
gulp.task('default', ['dev']);
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "gulp clean && gulp default",
"build": "gulp clean && gulp build",
"test": "mocha --require test/setup.js test/*-test.js test/**/*-test.js",
"mocha": "mocha --require test/setup.js",
"gulp": "gulp",
"testem": "testem",
"serve": "gulp serve"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-power-assert": "^1.0.0",
"babel-preset-react": "^6.16.0",
"connect": "^3.5.0",
"connect-livereload": "^0.6.0",
"del": "^2.2.2",
"eslint": "^3.12.2",
"glob": "^7.1.1",
"gulp": "^3.9.1",
"gulp-less": "^3.3.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.4.0",
"gulp-minify-css": "^1.2.4",
"gulp-plumber": "^1.1.0",
"gulp-util": "^3.0.7",
"json-loader": "^0.5.4",
"mocha": "^3.2.0",
"power-assert": "^1.4.2",
"serve-static": "^1.11.1",
"testem": "^1.14.1",
"webpack": "^1.14.0"
},
"dependencies": {
"bootstrap": "^3.3.7",
"react": "^15.4.1",
"react-dom": "^15.4.1"
}
}
require('babel-register')();
{
"framework": "mocha",
"before_tests": "npm run gulp js:test",
"on_exit": "rm -rf .power-asserted",
"src_files": [
".power-asserted/test.js"
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment