Skip to content

Commit

Permalink
Merge pull request #1696 from pashist/gulp_update
Browse files Browse the repository at this point in the history 
Gulp update
  • Loading branch information
@liorkesos
liorkesos authored Jan 19, 2017
2 parents 3849aca + e25c4ba commit f08fc2c
Show file tree
Hide file tree
Showing 7 changed files with 193 additions and 146 deletions.
3 changes: 3 additions & 0 deletions config/express.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ var bodyParser = require('body-parser')
var helmet = require('helmet')

module.exports = function (app, db) {
if (process.env.NODE_ENV === 'development' && process.argv.indexOf('--wdm') !== -1) {
require('./middlewares/webpack-dev')(app)
}
app.use(bodyParser.json(config.bodyParser.json))
app.use(bodyParser.urlencoded(config.bodyParser.urlencoded))

Expand Down
21 changes: 21 additions & 0 deletions config/middlewares/webpack-dev.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
'use strict';

var webpack = require('webpack');
var webpackMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var webpackConfig = require('../../webpack.dev.config');
var compiler = webpack(webpackConfig);

module.exports = function (app) {
app.use(webpackMiddleware(compiler, {
publicPath: webpackConfig.output.publicPath,
watchOptions: {
aggregateTimeout: 300
},
stats: {
colors: true
}
}));
app.use(webpackHotMiddleware(compiler))
};

173 changes: 82 additions & 91 deletions gulp/development.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,56 +8,63 @@ var through = require('through');
var gutil = require('gulp-util');
var plugins = gulpLoadPlugins();
var path = require('path');
var webpack = require('webpack-stream');
var webpackConfig = require('../webpack.config');
var plumber = require('gulp-plumber');

var paths = {
js: ['./*.js', 'config/**/*.js', 'gulp/**/*.js', 'tools/**/*.js', 'packages/**/*.js', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**', '!packages/**/assets/**/js/**'],
html: ['packages/**/*.html', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**'],
css: ['packages/**/*.css', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**'],
less: ['packages/**/*.less', '!packages/**/_*.less', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**'],
sass: ['packages/**/*.scss', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**']
css: ['packages/**/*.css', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**']
};
var webpack = require('webpack');
var webpackConfig = require('../webpack.config.js');

/** General watch/restart flow **/
// .less / .scss files are watched by less/sass and produce .css files
// .js / .css files are watched by nodemon, invoke webpack,csslint, and jshint as needed before restarting and invoking livereload after
// .html files are watched by livereload explicitly
/**
*
* General watch/restart flow
*
* .js / .css files are watched by nodemon, invoke csslint, and jshint as needed before restarting and invoking livereload after
* .html files are watched by livereload explicitly
* app.js and dependencies watched by webpack
*
*/

var startupTasks = ['devServe'];
var devServeTasks = ['env:development', 'jshint', 'csslint', 'watch'];

if (process.argv.indexOf('--wdm') === -1) {
devServeTasks.push('webpack')
}

gulp.task('development', startupTasks);
gulp.task('devServe', ['env:development', 'webpack:build-dev', 'jshint', 'csslint', 'watch'], devServeTask);
gulp.task('devServe', devServeTasks, devServeTask);
gulp.task('env:development', envDevelopmentTask);
gulp.task('webpack:build-dev', ['sass', 'less'], webpackBuild);
gulp.task('sass', sassTask);
gulp.task('less', lessTask);
gulp.task('webpack', webpackTask);
gulp.task('jshint', jshintTask);
gulp.task('csslint', csslintTask);

gulp.task('webpack:rebuild-dev', webpackBuild);
gulp.task('watch', watchTask);
gulp.task('livereload', livereloadTask);

////////////////////////////////////////////////////////////////////

// modify some webpack config options
var devConfig = Object.create(webpackConfig);
devConfig.devtool = 'sourcemap';
devConfig.debug = true;
// create a single instance of the compiler to allow caching
var devCompiler = webpack(devConfig);

function webpackBuild (callback) {
// run webpack
devCompiler.run(function (err, stats) {
if (err) {
throw new gutil.PluginError('webpackBuild', err);
}
gutil.log('webpackBuild', stats.toString({
colors: true
}));
callback()
})
function webpackTask(callback) {
var callbackDone = false;

webpackConfig.watch = true;
webpackConfig.devtool = 'eval';

return gulp.src('app.js')
.pipe(plumber(function(){ gutil.log('[webpack]', gutil.colors.red('compiler error'))}))
.pipe(webpack(webpackConfig))
.pipe(gulp.dest('bundle/'))
.on('data', function(){
if (!callbackDone) {
callbackDone = true;
callback();
} else {
plugins.livereload.reload();
}
});
}

function jshintTask (callback) {
Expand All @@ -80,71 +87,57 @@ function csslintTask () {
.pipe(count('csslint', 'files lint free'));
}

function lessTask () {
return gulp.src(paths.less)
.pipe(plugins.less())
.pipe(gulp.dest('./packages'));
}

function sassTask () {
return gulp.src(paths.sass)
.pipe(plugins.sass().on('error', plugins.sass.logError))
.pipe(gulp.dest('./packages'));
}

function devServeTask () {
plugins.nodemon({
script: 'server.js',
ext: 'js css',
env: {
'NODE_ENV': 'development'
},
ignore: [
'node_modules/',
'bower_components/',
'bundle/', // Causes infinite loop since webpack is tasked to run
'logs/',
'packages/*/*/public/assets/lib/',
'packages/*/*/public/**/*.scss', // Trigger off resulting css files not before scss finishes
'packages/*/*/public/**/*.less', // Trigger off resulting css files not before less finishes
'packages/*/*/node_modules/',
'.DS_Store', '**/.DS_Store',
'.bower-*',
'**/.bower-*',
'**/tests'
],
tasks: function (changedFiles) {
var tasks = [];
changedFiles.forEach(function (file) {
if (path.extname(file) === '.css' && tasks.indexOf('csslint') === -1) {
tasks.push('csslint');
}
if (path.extname(file) === '.js' && tasks.indexOf('jshint') === -1) {
tasks.push('jshint');
}
if (path.extname(file) === '.js' || path.extname(file) === '.css' && tasks.indexOf('webpack:rebuild-dev') === -1) {
tasks.push('webpack:rebuild-dev');
}
});
return tasks;
},
nodeArgs: ['--debug'],
stdout: false
})
var nodemonConfig = {
script: 'server.js',
ext: 'js css',
env: {
'NODE_ENV': 'development',
'DEBUG': 'cluster'
},
ignore: [
'bundle/',
path.join(process.cwd(), 'app.js'), // handled by webpack
'logs/',
'packages/**/public/',
'.DS_Store', '**/.DS_Store',
'.bower-*',
'**/.bower-*',
'**/tests'
],
tasks: function (changedFiles) {
var tasks = [];
changedFiles.forEach(function (file) {
if (path.extname(file) === '.css' && tasks.indexOf('csslint') === -1) {
tasks.push('csslint');
}
if (path.extname(file) === '.js' && tasks.indexOf('jshint') === -1) {
tasks.push('jshint');
}
});
return tasks;
},
nodeArgs: ['--debug'],
args: [],
stdout: false,
delay: 500
};
if (process.argv.indexOf('--wdm') !== -1) {
nodemonConfig.args.push('--wdm')
}
plugins.nodemon(nodemonConfig)
.on('readable', function () {
this.stdout.on('data', function (chunk) {
if (/Mean app started/.test(chunk)) {
this.stderr.on('data', function (chunk) {
if (/MEAN app started/.test(chunk)) {
setTimeout(function () {
plugins.livereload.reload();
}, 500)
}
process.stdout.write(chunk)
process.stderr.write(chunk)
});
this.stderr.pipe(process.stderr)
this.stdout.pipe(process.stdout)
})
.on('restart', function () {
plugins.livereload.reload();
});
.on('restart', function(changed) { console.log(changed)});
}

function watchTask (callback) {
Expand All @@ -153,8 +146,6 @@ function watchTask (callback) {
});

gulp.watch(paths.html, ['livereload']);
gulp.watch(paths.less, ['less']);
gulp.watch(paths.sass, ['sass']);
callback();
}

Expand Down
89 changes: 48 additions & 41 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@
"cross-env": "^3.0.0",
"debug": "^2.2.0",
"express": "^4.14.0",
"file-loader": "^0.9.0",
"helmet": "^2.2.0",
"jasmine": "^2.5.2",
"lodash": "^4.16.4",
Expand All @@ -68,53 +67,61 @@
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-1": "^6.16.0",
"css-loader": "^0.25.0",
"del": "^2.2.2",
"expect.js": "^0.3.1",
"del": "latest",
"expect.js": "latest",
"file-loader": "^0.9.0",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-csslint": "^1.0.0",
"gulp-cssmin": "^0.1.7",
"gulp-jshint": "^2.0.2",
"gulp-less": "^3.1.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.3.0",
"gulp-mocha": "^3.0.1",
"gulp-nodemon": "^2.2.1",
"gulp-sass": "^2.3.2",
"gulp-uglify": "^2.0.0",
"gulp-util": "^3.0.7",
"jasmine": "^2.5.2",
"jasmine-reporters": "^2.2.0",
"jquery": "^3.1.1",
"jshint": "^2.9.4",
"jshint-stylish": "^2.2.1",
"jsonwebtoken": "^7.1.9",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coffee-preprocessor": "^1.0.1",
"karma-coverage": "^1.1.1",
"karma-firefox-launcher": "^1.0.0",
"karma-html2js-preprocessor": "^1.1.0",
"karma-jasmine": "^1.0.2",
"karma-junit-reporter": "^1.1.0",
"karma-ng-html2js-preprocessor": "^1.0.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-requirejs": "^1.1.0",
"karma-script-launcher": "^1.0.0",
"gulp": "latest",
"gulp-concat": "latest",
"gulp-csslint": "latest",
"gulp-cssmin": "latest",
"gulp-jshint": "latest",
"gulp-livereload": "latest",
"gulp-load-plugins": "latest",
"gulp-mocha": "latest",
"gulp-nodemon": "latest",
"gulp-plumber": "^1.1.0",
"gulp-uglify": "latest",
"gulp-util": "latest",
"jasmine": "latest",
"jasmine-reporters": "latest",
"jquery": "latest",
"jshint": "latest",
"jshint-stylish": "latest",
"jsonwebtoken": "latest",
"karma": "latest",
"karma-chrome-launcher": "latest",
"karma-coffee-preprocessor": "latest",
"karma-coverage": "latest",
"karma-firefox-launcher": "latest",
"karma-html2js-preprocessor": "latest",
"karma-jasmine": "latest",
"karma-junit-reporter": "latest",
"karma-ng-html2js-preprocessor": "latest",
"karma-phantomjs-launcher": "latest",
"karma-phantomjs-shim": "latest",
"karma-requirejs": "latest",
"karma-script-launcher": "latest",
"karma-webpack": "^1.7.0",
"mocha": "^3.1.2",
"phantomjs-prebuilt": "^2.1.13",
"protractor": "^4.0.10",
"require-dir": "^0.3.1",
"requirejs": "^2.3.2",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"mocha": "latest",
"node-sass": "^3.10.1",
"phantomjs-prebuilt": "latest",
"protractor": "latest",
"require-dir": "latest",
"requirejs": "latest",
"sass-loader": "^4.0.2",

"style-loader": "^0.13.1",
"supertest": "^2.0.1",
"through": "^2.3.8",
"url-loader": "^0.5.7",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.13.1",
"webpack-stream": "^3.2.0"

},
"snyk": true
}
8 changes: 7 additions & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,13 @@ module.exports = {
module: {
loaders: [{
test: /\.css$/,
loader: 'style-loader!css-loader'
loaders: ['style', 'css?sourceMap']
}, {
test: /\.scss$/,
loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
}, {
test: /\.less$/,
loaders: ['style', 'css?sourceMap', 'less?sourceMap']
}, {
test: /\.js$/,
exclude: /(node_modules|bower_components|lib)/,
Expand Down
17 changes: 17 additions & 0 deletions webpack.dev.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
'use strict'

var webpack = require('webpack')
var config = require('./webpack.config')
var merge = require('lodash').merge

module.exports = merge(config, {
entry: ['./app.js', 'webpack-hot-middleware/client?reload=true'],
output: {
publicPath: '/bundle/'
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
});
Loading

0 comments on commit f08fc2c

Please sign in to comment.