我使用npm作为构建工具,我的脚本部分看起来像:
"scripts": {
"clean": "rm './build/+(css|js)/*'",
"watch:js": "watch 'npm run build:js' ./app/js",
"prebuild:js" : "rimraf ./build/js && mkdirp ./build/js",
"build:js": "browserify ./app/js/app.js -t [ babelify --presets es2015 ] -d | exorcist ./build/js/bundle.js.map | uglifyjs -c > ./build/js/bundle.js",
"watch:css": "watch 'npm run build:css' ./app/stylesheets",
"prebuild:css" : "rimraf ./build/css && mkdirp ./build/css",
"build:css": "cssimport ./app/stylesheets/app.css | cssmin > ./build/css/bundle.css",
"build": "npm run build:js && npm run build:css",
"build:watch": "parallelshell 'npm run watch:js' 'npm run watch:css'",
"watch:node": "nodemon ./app/server.js",
"start:dev": "npm run build:watch && npm run watch:node",
"start:prod": ""
},
现在,当我更改./app/js
中的js文件时,(pre)build:js
会成功执行一次。
但是当我在./app/stylesheets
中更改css文件时,(pre)build:css
执行了三次,成功了吗?!
输出如下:
myapp@0.0.1 prebuild:css / home / me / dev / myapp rimraf ./build/css& amp ;& amp; mkdirp ./build/css
myapp@0.0.1 build:css / home / me / dev / myapp cssimport ./app/stylesheets/app.css | cssmin> ./build/css/bundle.css
myapp@0.0.1 prebuild:css / home / me / dev / myapp rimraf ./build/css& amp ;& amp; mkdirp ./build/css
myapp@0.0.1 build:css / home / me / dev / myapp cssimport ./app/stylesheets/app.css | cssmin> ./build/css/bundle.css
myapp@0.0.1 prebuild:css / home / me / dev / myapp rimraf ./build/css& amp ;& amp; mkdirp ./build/css
myapp@0.0.1 build:css / home / me / dev / myapp cssimport ./app/stylesheets/app.css | cssmin> ./build/css/bundle.css
我不明白为什么会这样做,我尝试使用cssimport
和cssmin
的替代品,但同样的情况也会发生。
更新
我将parallelshell
替换为concurrently
,现在当我在运行时更改css时,我得到:
[1]
[1]> myapp@0.0.1 prebuild:css / home / me / myapp
[1]> rimraf ./build/css& amp ;& amp; mkdirp ./build/css
[1]
[1]
[1]> myapp@0.0.1 build:css / home / me / myapp
[1]> cssimport ./app/stylesheets/app.css | cssmin> ./build/css/bundle.css
[1]
myapp@0.0.1 prebuild:css / home / me / myapp rimraf ./build/css& amp ;& amp; mkdirp ./build/css
myapp@0.0.1 build:css / home / me / myapp cssimport ./app/stylesheets/app.css | cssmin> ./build/css/bundle.css
myapp@0.0.1 prebuild:css / home / me / myapp rimraf ./build/css& amp ;& amp; mkdirp ./build/css
myapp@0.0.1 build:css / home / me / myapp cssimport ./app/stylesheets/app.css | cssmin> ./build/css/bundle.css
所以似乎在css任务watch:css
之外([1]
)build:css
任务执行两次以上,但我只用concurrently
执行任务,那怎么能在concurrently
??