Skip to content

Commit f08fc2c

Browse files
liorkesosliorkesos
authored
Merge pull request #1696 from pashist/gulp_update
Gulp update
2 parents 3849aca + e25c4ba commit f08fc2c

File tree

7 files changed

+193
-146
lines changed

7 files changed

+193
-146
lines changed

‎config/express.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@ var bodyParser = require('body-parser')
1717
var helmet = require('helmet')
1818

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

‎config/middlewares/webpack-dev.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
'use strict';
2+
3+
var webpack = require('webpack');
4+
var webpackMiddleware = require('webpack-dev-middleware');
5+
var webpackHotMiddleware = require('webpack-hot-middleware');
6+
var webpackConfig = require('../../webpack.dev.config');
7+
var compiler = webpack(webpackConfig);
8+
9+
module.exports = function (app) {
10+
app.use(webpackMiddleware(compiler, {
11+
publicPath: webpackConfig.output.publicPath,
12+
watchOptions: {
13+
aggregateTimeout: 300
14+
},
15+
stats: {
16+
colors: true
17+
}
18+
}));
19+
app.use(webpackHotMiddleware(compiler))
20+
};
21+

‎gulp/development.js‎

Lines changed: 82 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -8,56 +8,63 @@ var through = require('through');
88
var gutil = require('gulp-util');
99
var plugins = gulpLoadPlugins();
1010
var path = require('path');
11+
var webpack = require('webpack-stream');
12+
var webpackConfig = require('../webpack.config');
13+
var plumber = require('gulp-plumber');
14+
1115
var paths = {
1216
js: ['./*.js', 'config/**/*.js', 'gulp/**/*.js', 'tools/**/*.js', 'packages/**/*.js', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**', '!packages/**/assets/**/js/**'],
1317
html: ['packages/**/*.html', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**'],
14-
css: ['packages/**/*.css', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**'],
15-
less: ['packages/**/*.less', '!packages/**/_*.less', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**'],
16-
sass: ['packages/**/*.scss', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**']
18+
css: ['packages/**/*.css', '!packages/**/node_modules/**', '!packages/**/assets/**/lib/**']
1719
};
18-
var webpack = require('webpack');
19-
var webpackConfig = require('../webpack.config.js');
2020

21-
/** General watch/restart flow **/
22-
// .less / .scss files are watched by less/sass and produce .css files
23-
// .js / .css files are watched by nodemon, invoke webpack,csslint, and jshint as needed before restarting and invoking livereload after
24-
// .html files are watched by livereload explicitly
21+
/**
22+
*
23+
* General watch/restart flow
24+
*
25+
* .js / .css files are watched by nodemon, invoke csslint, and jshint as needed before restarting and invoking livereload after
26+
* .html files are watched by livereload explicitly
27+
* app.js and dependencies watched by webpack
28+
*
29+
*/
2530

2631
var startupTasks = ['devServe'];
32+
var devServeTasks = ['env:development', 'jshint', 'csslint', 'watch'];
33+
34+
if (process.argv.indexOf('--wdm') === -1) {
35+
devServeTasks.push('webpack')
36+
}
2737

2838
gulp.task('development', startupTasks);
29-
gulp.task('devServe', ['env:development', 'webpack:build-dev', 'jshint', 'csslint', 'watch'], devServeTask);
39+
gulp.task('devServe', devServeTasks, devServeTask);
3040
gulp.task('env:development', envDevelopmentTask);
31-
gulp.task('webpack:build-dev', ['sass', 'less'], webpackBuild);
32-
gulp.task('sass', sassTask);
33-
gulp.task('less', lessTask);
41+
gulp.task('webpack', webpackTask);
3442
gulp.task('jshint', jshintTask);
3543
gulp.task('csslint', csslintTask);
3644

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

4148
////////////////////////////////////////////////////////////////////
4249

43-
// modify some webpack config options
44-
var devConfig = Object.create(webpackConfig);
45-
devConfig.devtool = 'sourcemap';
46-
devConfig.debug = true;
47-
// create a single instance of the compiler to allow caching
48-
var devCompiler = webpack(devConfig);
49-
50-
function webpackBuild (callback) {
51-
// run webpack
52-
devCompiler.run(function (err, stats) {
53-
if (err) {
54-
throw new gutil.PluginError('webpackBuild', err);
55-
}
56-
gutil.log('webpackBuild', stats.toString({
57-
colors: true
58-
}));
59-
callback()
60-
})
50+
function webpackTask(callback) {
51+
var callbackDone = false;
52+
53+
webpackConfig.watch = true;
54+
webpackConfig.devtool = 'eval';
55+
56+
return gulp.src('app.js')
57+
.pipe(plumber(function(){ gutil.log('[webpack]', gutil.colors.red('compiler error'))}))
58+
.pipe(webpack(webpackConfig))
59+
.pipe(gulp.dest('bundle/'))
60+
.on('data', function(){
61+
if (!callbackDone) {
62+
callbackDone = true;
63+
callback();
64+
} else {
65+
plugins.livereload.reload();
66+
}
67+
});
6168
}
6269

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

83-
function lessTask () {
84-
return gulp.src(paths.less)
85-
.pipe(plugins.less())
86-
.pipe(gulp.dest('./packages'));
87-
}
88-
89-
function sassTask () {
90-
return gulp.src(paths.sass)
91-
.pipe(plugins.sass().on('error', plugins.sass.logError))
92-
.pipe(gulp.dest('./packages'));
93-
}
94-
9590
function devServeTask () {
96-
plugins.nodemon({
97-
script: 'server.js',
98-
ext: 'js css',
99-
env: {
100-
'NODE_ENV': 'development'
101-
},
102-
ignore: [
103-
'node_modules/',
104-
'bower_components/',
105-
'bundle/', // Causes infinite loop since webpack is tasked to run
106-
'logs/',
107-
'packages/*/*/public/assets/lib/',
108-
'packages/*/*/public/**/*.scss', // Trigger off resulting css files not before scss finishes
109-
'packages/*/*/public/**/*.less', // Trigger off resulting css files not before less finishes
110-
'packages/*/*/node_modules/',
111-
'.DS_Store', '**/.DS_Store',
112-
'.bower-*',
113-
'**/.bower-*',
114-
'**/tests'
115-
],
116-
tasks: function (changedFiles) {
117-
var tasks = [];
118-
changedFiles.forEach(function (file) {
119-
if (path.extname(file) === '.css' && tasks.indexOf('csslint') === -1) {
120-
tasks.push('csslint');
121-
}
122-
if (path.extname(file) === '.js' && tasks.indexOf('jshint') === -1) {
123-
tasks.push('jshint');
124-
}
125-
if (path.extname(file) === '.js' || path.extname(file) === '.css' && tasks.indexOf('webpack:rebuild-dev') === -1) {
126-
tasks.push('webpack:rebuild-dev');
127-
}
128-
});
129-
return tasks;
130-
},
131-
nodeArgs: ['--debug'],
132-
stdout: false
133-
})
91+
var nodemonConfig = {
92+
script: 'server.js',
93+
ext: 'js css',
94+
env: {
95+
'NODE_ENV': 'development',
96+
'DEBUG': 'cluster'
97+
},
98+
ignore: [
99+
'bundle/',
100+
path.join(process.cwd(), 'app.js'), // handled by webpack
101+
'logs/',
102+
'packages/**/public/',
103+
'.DS_Store', '**/.DS_Store',
104+
'.bower-*',
105+
'**/.bower-*',
106+
'**/tests'
107+
],
108+
tasks: function (changedFiles) {
109+
var tasks = [];
110+
changedFiles.forEach(function (file) {
111+
if (path.extname(file) === '.css' && tasks.indexOf('csslint') === -1) {
112+
tasks.push('csslint');
113+
}
114+
if (path.extname(file) === '.js' && tasks.indexOf('jshint') === -1) {
115+
tasks.push('jshint');
116+
}
117+
});
118+
return tasks;
119+
},
120+
nodeArgs: ['--debug'],
121+
args: [],
122+
stdout: false,
123+
delay: 500
124+
};
125+
if (process.argv.indexOf('--wdm') !== -1) {
126+
nodemonConfig.args.push('--wdm')
127+
}
128+
plugins.nodemon(nodemonConfig)
134129
.on('readable', function () {
135-
this.stdout.on('data', function (chunk) {
136-
if (/Mean app started/.test(chunk)) {
130+
this.stderr.on('data', function (chunk) {
131+
if (/MEAN app started/.test(chunk)) {
137132
setTimeout(function () {
138133
plugins.livereload.reload();
139134
}, 500)
140135
}
141-
process.stdout.write(chunk)
136+
process.stderr.write(chunk)
142137
});
143-
this.stderr.pipe(process.stderr)
138+
this.stdout.pipe(process.stdout)
144139
})
145-
.on('restart', function () {
146-
plugins.livereload.reload();
147-
});
140+
.on('restart', function(changed) { console.log(changed)});
148141
}
149142

150143
function watchTask (callback) {
@@ -153,8 +146,6 @@ function watchTask (callback) {
153146
});
154147

155148
gulp.watch(paths.html, ['livereload']);
156-
gulp.watch(paths.less, ['less']);
157-
gulp.watch(paths.sass, ['sass']);
158149
callback();
159150
}
160151

‎package.json‎

Lines changed: 48 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@
4444
"cross-env": "^3.0.0",
4545
"debug": "^2.2.0",
4646
"express": "^4.14.0",
47-
"file-loader": "^0.9.0",
4847
"helmet": "^2.2.0",
4948
"jasmine": "^2.5.2",
5049
"lodash": "^4.16.4",
@@ -68,53 +67,61 @@
6867
"babel-preset-es2015": "^6.18.0",
6968
"babel-preset-stage-1": "^6.16.0",
7069
"css-loader": "^0.25.0",
71-
"del": "^2.2.2",
72-
"expect.js": "^0.3.1",
70+
"del": "latest",
71+
"expect.js": "latest",
7372
"file-loader": "^0.9.0",
74-
"gulp": "^3.9.1",
75-
"gulp-concat": "^2.6.0",
76-
"gulp-csslint": "^1.0.0",
77-
"gulp-cssmin": "^0.1.7",
78-
"gulp-jshint": "^2.0.2",
79-
"gulp-less": "^3.1.0",
80-
"gulp-livereload": "^3.8.1",
81-
"gulp-load-plugins": "^1.3.0",
82-
"gulp-mocha": "^3.0.1",
83-
"gulp-nodemon": "^2.2.1",
84-
"gulp-sass": "^2.3.2",
85-
"gulp-uglify": "^2.0.0",
86-
"gulp-util": "^3.0.7",
87-
"jasmine": "^2.5.2",
88-
"jasmine-reporters": "^2.2.0",
89-
"jquery": "^3.1.1",
90-
"jshint": "^2.9.4",
91-
"jshint-stylish": "^2.2.1",
92-
"jsonwebtoken": "^7.1.9",
93-
"karma": "^1.3.0",
94-
"karma-chrome-launcher": "^2.0.0",
95-
"karma-coffee-preprocessor": "^1.0.1",
96-
"karma-coverage": "^1.1.1",
97-
"karma-firefox-launcher": "^1.0.0",
98-
"karma-html2js-preprocessor": "^1.1.0",
99-
"karma-jasmine": "^1.0.2",
100-
"karma-junit-reporter": "^1.1.0",
101-
"karma-ng-html2js-preprocessor": "^1.0.0",
102-
"karma-phantomjs-launcher": "^1.0.2",
103-
"karma-phantomjs-shim": "^1.4.0",
104-
"karma-requirejs": "^1.1.0",
105-
"karma-script-launcher": "^1.0.0",
73+
"gulp": "latest",
74+
"gulp-concat": "latest",
75+
"gulp-csslint": "latest",
76+
"gulp-cssmin": "latest",
77+
"gulp-jshint": "latest",
78+
"gulp-livereload": "latest",
79+
"gulp-load-plugins": "latest",
80+
"gulp-mocha": "latest",
81+
"gulp-nodemon": "latest",
82+
"gulp-plumber": "^1.1.0",
83+
"gulp-uglify": "latest",
84+
"gulp-util": "latest",
85+
"jasmine": "latest",
86+
"jasmine-reporters": "latest",
87+
"jquery": "latest",
88+
"jshint": "latest",
89+
"jshint-stylish": "latest",
90+
"jsonwebtoken": "latest",
91+
"karma": "latest",
92+
"karma-chrome-launcher": "latest",
93+
"karma-coffee-preprocessor": "latest",
94+
"karma-coverage": "latest",
95+
"karma-firefox-launcher": "latest",
96+
"karma-html2js-preprocessor": "latest",
97+
"karma-jasmine": "latest",
98+
"karma-junit-reporter": "latest",
99+
"karma-ng-html2js-preprocessor": "latest",
100+
"karma-phantomjs-launcher": "latest",
101+
"karma-phantomjs-shim": "latest",
102+
"karma-requirejs": "latest",
103+
"karma-script-launcher": "latest",
106104
"karma-webpack": "^1.7.0",
107-
"mocha": "^3.1.2",
108-
"phantomjs-prebuilt": "^2.1.13",
109-
"protractor": "^4.0.10",
110-
"require-dir": "^0.3.1",
111-
"requirejs": "^2.3.2",
105+
"less": "^2.7.1",
106+
"less-loader": "^2.2.3",
107+
"mocha": "latest",
108+
"node-sass": "^3.10.1",
109+
"phantomjs-prebuilt": "latest",
110+
"protractor": "latest",
111+
"require-dir": "latest",
112+
"requirejs": "latest",
113+
"sass-loader": "^4.0.2",
114+
112115
"style-loader": "^0.13.1",
113116
"supertest": "^2.0.1",
114117
"through": "^2.3.8",
115118
"url-loader": "^0.5.7",
116119
"webpack": "^1.13.3",
117-
"webpack-dev-server": "^1.16.2"
120+
"webpack-dev-middleware": "^1.8.4",
121+
"webpack-dev-server": "^1.14.1",
122+
"webpack-hot-middleware": "^2.13.1",
123+
"webpack-stream": "^3.2.0"
124+
118125
},
119126
"snyk": true
120127
}

‎webpack.config.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,13 @@ module.exports = {
1515
module: {
1616
loaders: [{
1717
test: /\.css$/,
18-
loader: 'style-loader!css-loader'
18+
loaders: ['style', 'css?sourceMap']
19+
}, {
20+
test: /\.scss$/,
21+
loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
22+
}, {
23+
test: /\.less$/,
24+
loaders: ['style', 'css?sourceMap', 'less?sourceMap']
1925
}, {
2026
test: /\.js$/,
2127
exclude: /(node_modules|bower_components|lib)/,

‎webpack.dev.config.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use strict'
2+
3+
var webpack = require('webpack')
4+
var config = require('./webpack.config')
5+
var merge = require('lodash').merge
6+
7+
module.exports = merge(config, {
8+
entry: ['./app.js', 'webpack-hot-middleware/client?reload=true'],
9+
output: {
10+
publicPath: '/bundle/'
11+
},
12+
plugins: [
13+
new webpack.optimize.OccurenceOrderPlugin(),
14+
new webpack.HotModuleReplacementPlugin(),
15+
new webpack.NoErrorsPlugin()
16+
]
17+
});

0 commit comments

Comments
 (0)