BS CLI npm scripts recipe

[davidhund]

I am currently moving away from build tools such as Grunt and Gulp and moving more towards using npm run directly. See http://substack.net/task_automation_with_npm_run & http://blog.keithcirkel.co.uk/how-to-use-npm-as-a-build-tool/

My projects' development process often include the following:

• run BS server and reload on changed ./dist/*.html, ./dist/assets/css/*.css, ./dist/assets/js/*.js files
• run lib-/node- Sass and watch ./src/assets/*.scss
• run autoprefixer over my compiled css
• run browserify (with e.g. watchify) to bundle my app js
• uglify JS
• optionally watch and optimize changed image resources (imagemin)
• .. copying files between ./src/ and ./dist/

I have gotten it 'somewhat' working but I am pretty sure there are better ways to tie all this together with BS at the core..

Any ideas? If I figure this out I'd like to add it as a 'npm run recipe'.

Example package.json scripts section:

  "scripts": {
    "server": "browser-sync start --files \"./dist/*.html,./dist/assets/js/*.js,./dist/assets/css/*.css\" --server dist",
    "start": "npm run server",
    "watch:css": "node-sass -w -r ./src/assets/css -o ./dist/assets/css --output-style compressed",
    "watch:js": "sync-files -w ./src/assets/js ./dist/assets/js",
    "watch:img": "sync-files -w ./src/assets/img ./dist/assets/img",
    "watch:html": "sync-files -w -d 1 ./src ./dist",
    "watch": "parallelshell \"npm run watch:css\" \"npm run watch:js\" \"npm run watch:html\" \"npm run watch:img\"",
    "dev": "parallelshell \"npm run server\" \"npm run watch\""
  },

Note The above simply copies HTML, JS and IMG files from ./src/ to ./dist/ and does not yet deal with browserify, autoprefixr etc...

[shakyShane]

@davidhund - great idea & there's quite a bit of demand for this.

@shinnn - any experience with sending/receiving signals between processes? mostly just something that can trigger a reload will do for now.

[shinnn]

@shakyShane 😓 No, I haven't. Nice idea though.

[shakyShane]

Related: BrowserSync/browser-sync#533

[GarthDB]

Hey @davidhund what about injecting the browsersync script into the HTML files on serve - any luck with that?