2015-12-02 40 views
3

我使用npm脚本(请参阅下面的npm文件)通过watchify观察文件的更改,然后在编译后进行编译和通知。然而,发生的情况是watchify任务运行(第一次运行需要40秒),然后立即调用notify:js任务。我希望在watchify完成编译后调用notify:js节点脚本:使用watchify链接命令

{ 
    "dependencies": { 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3" 
    }, 
    "devDependencies": { 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-react": "^6.1.18", 
    "babelify": "^7.2.0", 
    "browserify": "^12.0.1", 
    "exorcist": "^0.4.0", 
    "osx-notifier": "^0.2.2", 
    "watchify": "^3.6.1" 
    }, 
    "scripts": { 
    "watch": "watchify src/app.js -o build/bundle.js -t [ babelify --presets [ es2015 react ] ] -dv | npm run notify:js", 
    "compile:js": "browserify -e src/app.js -d -o build/bundle.js -t [ babelify --presets [ es2015 react ] ] -v", 
    "notify:js": "osx-notifier --title 'JavaScript Compiled' --message 'JavaScript compiled to build/bundle.js' --type pass" 
    } 
} 

我试过下面的命令变体。

watchify src/app.js -o build/bundle.js -t [ babelify --presets [ es2015 react ] ] \ 
-dv & npm run notify:js 

上述命令与|运算符相同。

watchify src/app.js -o build/bundle.js -t [ babelify --presets [ es2015 react ] ] \ 
-dv && npm run notify:js 

上述命令与&运算符相同。

我无法在watchify documentation中看到我想要实现的任何选项。我在这里错过了什么,或者这是不可能的,我试图做到这一点?

+0

watchify在后台运行,所以我认为你不能用它来以一种简单的方式做你想做的事情。如果你通过browserify替换watchify,那么你尝试过的最后一个变体命令(用'&&')应该可以工作;但是您会忽略watchify重新编译变更文件的好处。否则,请尝试观察更改son bundle.js,并且(只有)发生时才启动通知程序... –

+0

您是否考虑过使用类似['gulp'](http://gulpjs.com/)的内容? – robertklep

+0

@robertklep我已经使用了'gulp'和'grunt',但我正在从这些工具中转而采用这种方法。 – Enijar

回答

3

我使用nodemonbrowserify-incremental解决了这个问题。

这将JavaScript编译成bundle.js文件。

browserifyinc -e resources/assets/js/app.js -o public/assets/js/bundle.js --cachefile .browserify-cache.json && npm run notify:js 

这是我的package.json文件。

{ 
    "dependencies": { 
    "react": "^0.14.3", 
    "react-dom": "^0.14.3" 
    }, 
    "devDependencies": { 
    "babelify": "^6.1.3", 
    "browserify": "^12.0.1", 
    "browserify-incremental": "^3.0.1", 
    "nodemon": "^1.3.8" 
    }, 
    "browserify": { 
    "transform": [ 
     "babelify" 
    ] 
    }, 
    "scripts": { 
    "build": "npm run compile:js && npm run compile:sass", 
    "watch": "npm run watch:js & npm run watch:sass", 
    "notify:js": "osascript -e 'display notification \"JavaScript compiled to public/assets/js/bundle.js\" with title \"JavaScript Compiled\"'", 
    "notify:sass": "osascript -e 'display notification \"CSS compiled to public/assets/js/app.js\" with title \"CSS Compiled\"'", 
    "compile:js": "browserifyinc -e resources/assets/js/app.js -o public/assets/js/bundle.js --cachefile .browserify-cache.json && npm run notify:js", 
    "compile:sass": "sass resources/assets/sass/app.scss:public/assets/css/app.css && npm run notify:sass", 
    "watch:js": "nodemon --watch 'resources/assets/js' --exec 'npm run compile:js'", 
    "watch:sass": "nodemon --watch 'resources/assets/sass' -e scss --exec 'npm run compile:sass'" 
    } 
}