Menu
npm run watch does the same, but then it stays active and "watches" for updates to your . vue and . js files. If it detects a change, it'll re-build the browser-friendly file so you can just refresh the page.
An npm script is a convenient way to bundle common shell commands for your project. They are typically commands, or a string of commands, which would normally be entered at the command line in order to do something with your application. Scripts are stored in a project's package.
You can watch your directories using nodemon.
One solution for you is to create three watch scripts, one for each task:
watch:node-sass,watch:html-minifier, andwatch:imagemin.Then have a central script watch starting the three:
{
"name": "personal_site",
"version": "1.0.0",
"description": "My personal website.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"node-sass": "node-sass --output-style compressed --include-path node_modules/bourbon/app/assets/stylesheets/ --include-path node_modules/bourbon-neat/app/assets/stylesheets/ 'src/scss/styles.scss' 'dist/css/bundle.min.css'",
"html-minifier": "html-minifier --collapse-whitespace --remove-comments --remove-attribute-quotes -o 'dist/index.html' 'src/index.html'",
"imagemin": "imagemin src/images dist/images",
"serve": "http-server ./dist",
"watch:node-sass": "nodemon -e scss -x \"npm run node-sass\"",
"watch:html-minifier": "nodemon -e html -x \"npm run html-minifier\"",
"watch:imagemin": "nodemon --watch src/images -x \"npm run imagemin\"",
"watch": "npm run watch:node-sass & npm run watch:html-minifier & npm run watch:imagemin"
},
"author": "Dean Gibson",
"license": "ISC",
"dependencies": {
"bourbon": "^4.2.6",
"bourbon-neat": "^1.7.4",
"normalize-scss": "^4.0.3"
},
"devDependencies": {
"html-minifier": "^1.3.0",
"http-server": "^0.9.0",
"node-sass": "^3.4.2"
}
}
Read also: How to Use npm as a Build Tool.
I advise onchange, see this boilerplate.
For example,
"watch:css": "onchange 'src/scss/*.scss' -- npm run build:css",
or
"watch:js": "onchange 'src/js/*.js' -- npm run build:js",
No Grunt or Gulp needed!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With