BS CLI npm scripts recipe

davidhund commented 9 years ago

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 commented 9 years ago

@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 commented 9 years ago

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

shakyShane commented 9 years ago

GarthDB commented 8 years ago

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

BrowserSync / recipes

BS CLI npm scripts recipe #2