I have the following directory structure:
And my package.json
looks like this:
{
"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"
},
"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"
}
}
So firstly, I have to run each of these scripts individually eg npm run node-sass
or npm run html-minifier
etc. What I'd ideally want is to run npm serve
which will do the following:
src
folder and run the respective scripts as files change eg node-sass
etc..How can I best tackle this problem?
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
, and watch: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!
The most widely adopted tools for this scripted case is to go with gulp or grunt. They are tools that you will encounter very often. You can also find their grunt/gulp libs for your minify/concat/copy/imagemin, as well as watcher libs so they change as you make changes to code. Nodemon/forever/pm2 have watch capabilites to restart your http server as well
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.