Gulp update #1696

pashist · 2016-10-28T15:45:12Z

Removed webpack task. Instead used webpack-dev-middleware. It enabled nice hot module replacement feature of webpack. Also hope it reduced rebuilding time.
Removed less and sass tasks. Instead used less-loader and sass-loader for webpack with sourcemaps. Now .less and .scss files can be imported in packages.
Fixed page reloading in nodemon.

…date Conflicts: gulp/development.js package.json packages/custom/meanStarter/public/index.js webpack.config.js

liorkesos · 2016-10-28T16:21:12Z

Nice!
+1

On Oct 28, 2016 18:45, "pashist" notifications@github.com wrote:

Removed webpack task. Instead used webpack-dev-middleware. It
enabled nice hot module replacement
http://webpack.github.io/docs/hot-module-replacement feature of
webpack. Also hope it reduced rebuilding time.

Removed less and sass tasks. Instead used less-loader and sass-loader
for webpack with sourcemaps. Now .less and .scss files can be imported
in packages.

Fixed page reloading in nodemon.

You can view, comment on, or merge this pull request online at:

#1696
Commit Summary

gulp update

Merge branch 'master' of git://github.com/linnovate/mean into
gulp_update

updated dependencies

updated development.js

updated development.js

updated development.js

moved webpack to middleware

File Changes

M config/express.js
https://github.com/linnovate/mean/pull/1696/files#diff-0 (3)

A config/middlewares/webpack-dev.js
https://github.com/linnovate/mean/pull/1696/files#diff-1 (21)

M gulp/development.js
https://github.com/linnovate/mean/pull/1696/files#diff-2 (86)

M package.json
https://github.com/linnovate/mean/pull/1696/files#diff-3 (15)

M webpack.config.js
https://github.com/linnovate/mean/pull/1696/files#diff-4 (8)

A webpack.dev.config.js
https://github.com/linnovate/mean/pull/1696/files#diff-5 (17)

Patch Links:

https://github.com/linnovate/mean/pull/1696.patch

https://github.com/linnovate/mean/pull/1696.diff

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#1696, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAO9Iwkk3Izukq4Z59nEZTtNhXCLdRNbks5q4hiKgaJpZM4KjlC8
.

timelf123 · 2016-10-28T16:22:15Z

This is awesome, nice work. Testing now

jwebbdev · 2016-10-28T16:32:27Z

@pashist With these changes, what are the paths of execution when js/css change? My concern is that there's a webpack-dev path going off triggered by changes and a nodemon task executing from the same changes, racing towards a livereload which may happen before or after webpack is built (and if I'm reading the webpack-dev stuff the nodemon restart isn't actually necessary in this case).

pashist · 2016-10-28T16:56:36Z

@rjVapes basically files handled by webpack should not intersect with nodemon watched files, in nodemon config they are added to ignore section:

ignore: [
        'node_modules/',
        'bower_components/',
        'bundle/',
        '../app.js',                           // handled by webpack
        'logs/',
        'packages/**/public/',   // <--- here handled by webpack too
        '.DS_Store', '**/.DS_Store',
        '.bower-*',
        '**/.bower-*',
        '**/tests'
      ],

Even if same file will watched by webpack and nodemon, after changes triggered, nodemon will restart server.js with webpack-dev-middleware inside, so any webpack building process will interrupt and executed again after server.js start

timelf123

Great work. Saving a frontend file in the past would sometimes require a manual call to webpack or restarting gulp or resaving the file due to the tomfoolery that rjvapes described with nodemon/livereload/webpack/gulp.

No race conditions, smart middleware, 75% faster bundle times and HMR support for those that dare go down that path -- wins all around

liorkesos · 2016-10-28T18:45:41Z

Great job Pavel.
Lior

On Oct 28, 2016 21:42, "Tim Elfelt" notifications@github.com wrote:

@timelf123 approved this pull request.

Great work. Saving a frontend file in the past would sometimes require a
manual call to webpack or restarting gulp due to the tomfoolery that
rjvapes described with nodemon/livereload/webpack/gulp.

No race conditions, smart middleware, 75% faster bundle times and HMR
support for those that dare go down that path

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
#1696 (review),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAO9I3ZdB8lCXCQIx8xCQcv3WtmsWKplks5q4kIggaJpZM4KjlC8
.

timelf123 · 2016-10-28T21:05:22Z

One minor fix webpack.test.js to make SASS and svg etc work:

'use strict'

module.exports = {
  module: {
    loaders: [{
      test: /\.css$/,
      loader: 'style-loader!css-loader'
    },{
      test: /\.scss$/,
      loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
    }, {
      test: /\.js$/,
      exclude: /(node_modules|bower_components|lib)/,
      loader: 'babel?presets[]=es2015&presets[]=stage-1'
    }, {
      test: /\.(png|woff|woff2|eot|ttf|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
      loader: 'url'
    }]
  },
  resolve: {
    modulesDirectories: ['bower_components', 'node_modules']
  }
}

Other than that this looks good and I merged to my fork already, thanks again

jwebbdev · 2016-10-29T04:13:27Z

@pashist Ah, okay I didn't notice the ignore of packages/**/public. Does webpack-dev trigger a page reload on its own? I know I saw it was capable of it, but didn't notice any config changes to set it up explicitly.

Also, since you're editing the gulp, @dalenguyen in the gitter chat recently mentioned that server side html files need a nodemon restart (I guess express caches them and I didn't realize) so we probably need to feed the /packages/**/server/ htmls to nodemon, and the /packages/**/public/ htmls to livereload.

added `--no-wdm` arg for disabling webpack dev middleware and using webpack task instead updated webpack test config linnovate#1696 (comment)

pashist · 2016-10-29T12:48:58Z

Regarding 26962b9. Since webpack-dev-middleware is an express server middleware, it will recompile bundle every time when nodemon restarts server due to server files changes. It's no problem if we currently develop public part. But if it's server part development, recompiling public files is unnecessary and --no-wdm option allow avoid this. With --no-wdm option public files changes will be tracked and bundle will rebuilded, just without HMR support. Webpack task used webpack-stream and watch mode, so recompiling time should be ok.
How you think is this useful ? And perhaps we should use this option as default ?

@rjVapes perhaps we could just disable files .html files caching in dev env ?

timelf123 · 2016-10-29T20:02:33Z

@pashist So the issue is when nodemon restarts the process containing the webpack middleware, it loses the bundle information stored in memory, right?

Two workarounds are either use a separate process for webpack middleware, or find a way to reload your server routes without restarting the whole process (this is maybe for next milestone?, essentially use webpack to generate server bundle and require(package.routes) allowing server side HMR)

I'm good with a --no-wdm option as a fallback/default for now. Also webpack --watch is usually faster for me anyway and the only thing we can currently HMR anyway is stylesheets

adskjohn · 2016-10-31T14:57:04Z

@pashist Sounds like a good solution (disabling .html cache). Any time lost from not having the small volume of server side html cached I'm sure would more than be made up by not having to reload the server.

webpack dev middleware available with `--wdm` option

timelf123 · 2016-11-18T18:32:26Z

@pashist thoughts on rebasing and merging?

timelf123 · 2017-01-19T14:55:13Z

@pashist @liorkesos can we get this merged?

added `--no-wdm` arg for disabling webpack dev middleware and using webpack task instead updated webpack test config linnovate/mean#1696 (comment)

pavel added 7 commits October 26, 2016 13:41

gulp update

809b103

Merge branch 'master' of git://github.com/linnovate/mean into gulp_up…

86b3464

…date Conflicts: gulp/development.js package.json packages/custom/meanStarter/public/index.js webpack.config.js

updated dependencies

864b3a3

updated development.js

4859c20

updated development.js

358c9fb

updated development.js

43b586c

moved webpack to middleware

f15ea03

timelf123 approved these changes Oct 28, 2016

View reviewed changes

added optional webpack task, used webpack-stream + watch mode

26962b9

added `--no-wdm` arg for disabling webpack dev middleware and using webpack task instead updated webpack test config linnovate#1696 (comment)

use webpack task as default

737ee2a

webpack dev middleware available with `--wdm` option

timelf123 mentioned this pull request Nov 9, 2016

[Priority] issues with production env #1687

Closed

timelf123 mentioned this pull request Jan 19, 2017

Annoying local development due to webpack aggregation process #1743

Closed

Merge branch 'master' into gulp_update

e25c4ba

liorkesos merged commit f08fc2c into linnovate:master Jan 19, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gulp update #1696

Gulp update #1696

pashist commented Oct 28, 2016

liorkesos commented Oct 28, 2016

timelf123 commented Oct 28, 2016

jwebbdev commented Oct 28, 2016

pashist commented Oct 28, 2016

timelf123 left a comment •

edited

liorkesos commented Oct 28, 2016

timelf123 commented Oct 28, 2016

jwebbdev commented Oct 29, 2016 •

edited

pashist commented Oct 29, 2016

timelf123 commented Oct 29, 2016 •

edited

adskjohn commented Oct 31, 2016

timelf123 commented Nov 18, 2016

timelf123 commented Jan 19, 2017

Gulp update #1696

Gulp update #1696

Conversation

pashist commented Oct 28, 2016

liorkesos commented Oct 28, 2016

timelf123 commented Oct 28, 2016

jwebbdev commented Oct 28, 2016

pashist commented Oct 28, 2016

timelf123 left a comment • edited

Choose a reason for hiding this comment

liorkesos commented Oct 28, 2016

timelf123 commented Oct 28, 2016

jwebbdev commented Oct 29, 2016 • edited

pashist commented Oct 29, 2016

timelf123 commented Oct 29, 2016 • edited

adskjohn commented Oct 31, 2016

timelf123 commented Nov 18, 2016

timelf123 commented Jan 19, 2017

timelf123 left a comment •

edited

jwebbdev commented Oct 29, 2016 •

edited

timelf123 commented Oct 29, 2016 •

edited