用 npm-scripts 和 bash 来构建你的项目

npm-scripts

npm 如何处理 scripts 字段

简述(from scripts

npm 支持 package.json 的 scripts 属性中,以下这些脚本:

  • npm 软件包相关
    • prepublish:包被发布之前运行(也在本地 npm install 后运行)
    • publish, postpublish:包被发布之后运行
    • preinstall:包被安装之前运行
    • install, postinstall:包被安装之后运行
    • preuninstall, uninstall:包被卸载之前运行
    • postuninstall:包被卸载之后运行
    • preversion, version:在包查看版本前运行
    • postversion:包查看版本后运行
  • 项目相关
    • pretest, test, posttest:通过 npm test 运行
    • prestop, stop, poststop: 通过 npm stop 运行
    • prestart, start, poststart: 通过 npm start 运行
    • prerestart, restart, postrestart: 通过 npm restart 运行。 注意: 如果你没有提供 restart script 属性,npm restart将会运行 stop 和 start 脚本。

另外,任何脚本都可以通过 npm run-script <pkg> <stage> 来执行,名称可以匹配 prepost 属性名将会以如下方式运行:premyscript , myscript , postmyscript
注:npm run-scriptnpm run

举个例子

在 build 之前运行目录文件删除命令,成功后再执行 build,成功构建后用文件浏览器打开 ./build 目录。

{
  "scripts": {
    "prebuild": "rimraf ./build",
    "build": "NODE_ENV=production webpack --config ./tools/webpack.config.prod.js",
    "postbuild": "open ./build"
  }
}

构建时直接执行 npm run build,npm 就会帮我们按 prebuild - build - postbuild 的顺序执行。
这样的 npm scripts 步骤清晰,但当你添加了很多任务时,会显得比较繁杂,不如用一行命令来解决。这就需要 bash 的命令符号来控制整个命令流程了。

bash 中的 &&&|;>

下面是对前端工程项目涉及的常用 bash 命令进行简介,关于更多 bash 的符号、命令和用法,详见「鳥哥的 Linux 私房菜」

定义

符号 内容
& 工作控制:将命令转为后台运行,即让命令同时执行
&& 逻辑与,如果前一个命令执行正确,则执行下一个指令
; 无逻辑判断的命令顺序执行,即无逻辑判断的 &&
| 管道符号(pipe),将 cmd1 的 standard output (STDOUT) 传给 cmd2 的 standard input (STDIN)
> 以覆盖的方式将 STDOUT 输出到指定的文件
管道命令(pipe)
管道命令(pipe)

简单例子

符号 命令 说明
& npm run watch & npm start watch 同时 start
&& npm run build && node server.js 成功 build 后执行 server.js
| 与 > browserify browser/main.js | uglifyjs -mc > static/bundle.js 将 browserify 打包的代码传给 uglifyjs 压缩,并输出 static/bundle.js

举些例子

npm-scripts + bash 命令

以本博客为例,我会经常修改 casper 这个主题,因此我在 Ghost 博客项目目录下 content/themes 内 clone 了一个修改版的 casper-custom 项目,项目目录结构大致如下:

Ghost/  
├── content/themes/casper-custom/
├── package.json
└── index.js

项目需要这几个操作:

# Ghost 目录下
$ cd content/themes/casper-custom/
# 获取最新的修改版主题
$ git pull
# 回到 Ghost 目录
$ cd ../../../
# 停止当前 forever 管理的 Ghost 博客应用进程
$ forever stop index.js
# 以生产环境启动 Ghost 博客应用
$ NODE_ENV=production forever start index.js

上述操作可以分为两步:

  1. 获取自定义主题最新代码
  2. 生产环境重启博客进程

package.json

{
  "scripts": {
    "update": "cd content/themes/casper-custom/ && git pull && cd ../../../ && npm restart",
    "restart": "forever stop index.js && NODE_ENV=production forever start index.js"
  }
}

执行 npm restart 会直接重启进程,
执行 npm run update 会先更新代码,再重启进程。

这样通过 npm-scriptsbash 命令便可以为我们减少一些繁琐且机械的命令操作,节省了很多时间。

最后

我重点讲了 npm-scripts 和 bash 命令的融合。
npm-scripts 还有很多和前端工程相关工具,如:

  • node-sass
  • postcss
  • eslint
  • imagemin
  • onchange(监听文件变动)等

想了解这些工具的使用以及 package.json 中 scripts 的编写方法,可以看这篇文章「也许你并不需要 Gulp, Grunt ?」

注意:那篇文章中最后提到的 parallelshell 并行工具可以用 & 符号代替。

正在加载 Disqus 评论组件...