npm-run自动化任务笔记

InfoQ中文站翻译的文章解释了，为什么放弃Gulp与Grunt，转投npm scripts，文章在此：

gulp-grunt-npm-scripts-part1
gulp-grunt-npm-scripts-part2
gulp-grunt-npm-scripts-part3

所以不在赘述了。

-- 扩展一个自定义参数，或者运行一个命令
&& 链式任务（一个任务接着一个任务运行）
& 运算符同时运行两个命令
< 将文件内容输入到一个命令
> 将命令输出重定向到文件
| 将一个命令的输出重定向到另一个命令

构建 js

browserify js 打包工具

"build-js": "browserify browser/main.js > static/bundle.js"

uglify-js 压缩 js

"build-js": "uglifyjs js/index.js -o > static/bundle.js"

rollup es6 打包工具

"start": "rollup index.js -o bundle.js -f umd -n xxx"

构建 css

合并 CSS

"build-css": "cat static/pages/*.css tabs/*/*.css > static/bundle.css"

stylus 编译

"build:css": "stylus styl/index.styl -o css/index.min.css -c",

将 @import "my-module/my-file" 引入进来的css 通过 rework-npm工具编译到一个文件中

"build-css": "rework-npm index.css > build/build.css"

autoprefixer

"build:css": "autoprefixer -b 'last 2 versions' < assets/styles/main.css | cssmin > dist/main.css"

stylus 中使用 autoprefixer

"watch:css": "stylus -u autoprefixer-stylus -w styl/index.styl -o css/ -c",

添加注释

bannerjs

"build:min": "uglifyjs js/index.js -o | bannerjs -o > dist/store.min.js",

watch 监听文件

监听文件变化有多个工具可以选择

watch js

onchange

"post-js": "onchange static/bundle.js -- npm test"

watchify

"watch-js": "watchify browser/main.js -o static/bundle.js -dv",

watch css

catw

"watch-css": "catw static/pages/*.css tabs/*/*.css -o static/bundle.css -v"

stylus 自带监听styl文件工具

"watch:css": "stylus -w styl/index.styl -o css/ -c"

兼容windows

创建目录

mkdirp

删除文件/目录

rimraf

"clean": "rimraf ./dist && mkdir dist",

命令行颜色

colors --green,bold "\nhello world"

序列化子任务

很简单，npm run每个子任务，然后用&&连接起来就成。

"build": "npm run build-js && npm run build-css"

并行子任务

类似地，我们用&并行子任务：

"watch": "npm run watch-js & npm run watch-css"

关注公众号