Skip to content

Instantly share code, notes, and snippets.

@emcniece
Created July 15, 2016 01:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emcniece/d01d16cbda178e1ff833534ab34de19e to your computer and use it in GitHub Desktop.
Save emcniece/d01d16cbda178e1ff833534ab34de19e to your computer and use it in GitHub Desktop.
'use strict';
import gulp from 'gulp';
import webpack from 'webpack';
import path from 'path';
import sync from 'run-sequence';
import rename from 'gulp-rename';
import template from 'gulp-template';
import fs from 'fs';
import yargs from 'yargs';
import lodash from 'lodash';
import gutil from 'gulp-util';
import serve from 'browser-sync';
import del from 'del';
import webpackDevMiddelware from 'webpack-dev-middleware';
import webpackHotMiddelware from 'webpack-hot-middleware';
import colorsSupported from 'supports-color';
import historyApiFallback from 'connect-history-api-fallback';
let root = 'client';
// helper method for resolving paths
let resolveToApp = (glob = '') => {
return path.join(root, 'app', glob); // app/{glob}
};
let resolveToComponents = (glob = '') => {
return path.join(root, 'app/components', glob); // app/components/{glob}
};
// map of all paths
let paths = {
js: resolveToComponents('**/*!(.spec.js).js'), // exclude spec files
styl: resolveToApp('**/*.styl'), // stylesheets
html: [
resolveToApp('**/*.html'),
path.join(root, 'index.html')
],
entry: [
'babel-polyfill',
path.join(__dirname, root, 'app/app.js')
],
output: root,
blankTemplates: path.join(__dirname, 'generator', 'component/**/*.**'),
dest: path.join(__dirname, 'dist')
};
// use webpack.config.js to build modules
gulp.task('webpack', ['clean'], (cb) => {
const config = require('./webpack.dist.config');
config.entry.app = paths.entry;
webpack(config, (err, stats) => {
if(err) {
throw new gutil.PluginError("webpack", err);
}
gutil.log("[webpack]", stats.toString({
colors: colorsSupported,
chunks: false,
errorDetails: true
}));
cb();
});
});
gulp.task('serve', () => {
const config = require('./webpack.dev.config');
config.entry.app = [
// this modules required to make HRM working
// it responsible for all this webpack magic.
// Application entry point.
'webpack-hot-middleware/client?reload=true',
].concat(paths.entry);
var compiler = webpack(config);
serve({
port: process.env.PORT || 3000,
open: false,
server: {baseDir: root},
middleware: [
historyApiFallback(),
webpackDevMiddelware(compiler, {
stats: {
colors: colorsSupported,
chunks: false,
modules: false
},
publicPath: config.output.publicPath
}),
webpackHotMiddelware(compiler)
]
});
});
gulp.task('watch', ['serve']);
gulp.task('component', () => {
const cap = (val) => {
return val.charAt(0).toUpperCase() + val.slice(1);
};
const name = yargs.argv.name;
const parentPath = yargs.argv.parent || '';
const destPath = path.join(resolveToComponents(), parentPath, name);
return gulp.src(paths.blankTemplates)
.pipe(template({
name: name,
upCaseName: cap(name)
}))
.pipe(rename((path) => {
path.basename = path.basename.replace('temp', name);
}))
.pipe(gulp.dest(destPath));
});
gulp.task('clean', (cb) => {
del([paths.dest]).then(function (paths) {
gutil.log("[clean]", paths);
cb();
})
});
gulp.task('default', ['watch']);
gulp.task('backend-build', () => {
const config = require('./webpack.backend.config');
config.entry.app = [
// this modules required to make HRM working
// it responsible for all this webpack magic.
// Application entry point.
'webpack-hot-middleware/server?reload=true',
].concat([
'babel-polyfill',
path.join(__dirname, 'server', 'app.js')
]);
var compiler = webpack(config);
serve({
port: process.env.PORT || 4000,
open: false,
server: {baseDir: 'server'},
middleware: [
webpackDevMiddelware(compiler, {
stats: {
colors: colorsSupported,
chunks: false,
modules: false
},
publicPath: config.output.publicPath
}),
webpackHotMiddelware(compiler)
]
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment