我的package.json样子是这样的:
package.json
{ "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" } }
因此,首先,我必须分别运行每个脚本,例如npm run node-sassor npm run html- minifier等。我理想的情况是运行npm serve将执行以下操作的脚本:
npm run node-sass
npm run html- minifier
npm serve
src
node-sass
我怎样才能最好地解决这个问题?
您可以使用查看目录nodemon。
nodemon
一个适合您的解决方案是创建三个监视脚本,每个任务一个:
watch:node-sass
watch:html-minifier
watch:imagemin
然后,以中央脚本watch开始这三个脚本:
watch
{ "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" } }
另请阅读:如何将npm用作构建工具。