[heldrida]

Why don't they provide a good working example, using Browser Sync or LiveReload, Sass, etc ?

I haven't found a good build process using npm as a task manager or build tool; I haven't seen any good example on any article I've read so far; gulp was built for, and it's much clear in my opinion!

[EvanPlaice]

If you're doing front-end development

Use JSPM for module management, transpiling (Babel, Traceur, Typescript), and bundling

live-server for LiveReload. With zero config it injects the LR stub and sets up a file watcher on the directory it's run in.

BrowserSync can be loaded via a npm command: https://gist.github.com/addyosmani/9f10c555e32a8d06ddb0

SASS can be setup with: https://medium.com/@brianhan/watch-compile-your-sass-with-np...

Here's what I use to build my Angular2+ES6 app: https://github.com/evanplaice/evanplaice.com/blob/master/pac...

Using npm as the default task runner is becoming more common so it's not to difficult to find good examples thru Google.

[jessaustin]

Here's something I've been using recently:

  $ jq .scripts package.json 
  {
    "start": "npm-run-all --parallel client server live",
    "client": "beefy client/index.coffee:index.js $npm_package_config_beefy_port --cwd client -- --transform coffeeify --extension '.coffee'",
    "server": "BEEFY_PORT=$npm_package_config_beefy_port LIVE_PORT=$npm_package_config_live_port PORT=$npm_package_config_port nodemon --watch server --watch template --ext coffee,jade server/app.coffee",
    "live": "live-reload --port=$npm_package_config_live_port --delay=3000 client server template"
  }

No sass in there, but one can see it could easily be added.

[mercer]

A small tip for those who use sass and use node-sass (and npm scripts):

I ran into a strange problem where if you use node-sass to watch a directory for some reason adding a new partial and the @import statements doesn't quite work as it should. If you change something in the imported file, node-sass won't recompile so you don't see your changes. The only way around it is to re-save the file that does the @import, or restart the process.

The solution I found is to use the more generic 'watch' package to watch the directory, and make it simply re-run node-sass without the watch flag. Aside from solving the problem, it also ended up feeling cleaner to use 'watch' everywhere I needed it instead of relying on all the different watch approaches of the different tools.

The one downside is that certain tools' own watch capabilities are faster or do partial updates. In the few cases where that is true I would just use the built-in watch functionality of course. But it's rarely been an issue for me.

[TheAceOfHearts]

It isn't 100% up to date anymore, but I made a web app repo [0] that gives you everything you need for a frontend app. This repo is very close to what we're using in my job for our app.

Furthermore, I wrote a related blog post [1] about this a few months back. You don't need gulp.

[0] http://github.com/cesarandreu/web-app

[1] https://github.com/cesarandreu/blog/blob/master/a_reasonable...

[housecor]

The article mentions two good working examples that do everything you mentioned and more:

https://github.com/coryhouse/react-slingshot https://github.com/kriasoft/react-starter-kit

[Klathmon]

Personally I ended up with a mix.

Leave Gulp to be gulp and do the heavy lifting while using npm scripts to run the gulp tasks and anything that doesn't live inside gulp.

It gives the simplicity of allowing people unfamiliar able to look at the package.json file and no further if they just want to use it, and allows all the "plug and play" style plugins from gulp.