自动构建JavaScript

自动构建JavaScript有不少好工具。不过其实很少有人知道,npm run命令就能很好地完成这一任务,配置起来也很简单。


script


npm 会在项目的 package.json 文件中寻找 scripts 区域,其中包括npm test和npm start等命令。


其实npm test和npm start是npm run test和npm run start的简写。事实上,你可以使用npm run来运行scripts里的任何条目。


使用npm run的方便之处在于,npm会自动把node_modules/.bin加入$PATH,这样你可以直接运行依赖程序和开发依赖程序,不用全局安装了。只要npm上的包提供命令行接口,你就可以直接使用它们,方便吧?当然,你总是可以自己写一个简单的小程序。


构建javascript


为了便于组织代码和利用npm上的包,写代码的时候往往使用module.exports和require()。browserify可以将这些一起打包成单一的脚本。使用browserify很简单,只需在package.json中加入一个['build-js']条目,类似这样:


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

如果是用于生产环境,还需要压缩一下。我们只需要将uglify-js加入devDependency,然后直接通过管道传递一下即可:


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

监视 javascript

为了能在修改文件之后自动重新生成javascript文件,只需将上面的browserify命令换成watchify并加上一些参数。


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

这里加了-d和-v两个参数,这样就可以看到详细的调试信息。


构建CSS

用cat就可以搞定:

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

监视CSS

和上面用 watchify 监视 javascript 类似,我们用catw监视CSS文件的改动:

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

序列化子任务

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

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

并行子任务

类似地,我们用&并行子任务:

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

完整的package.json例子

将上面提到的内容组合起来,package.json大致就是这个样子:

{

  "name": "my-silly-app",

  "version": "1.2.3",

  "private": true,

  "dependencies": {

    "browserify": "~2.35.2",

    "uglifyjs": "~2.3.6"

  },

  "devDependencies": {

    "watchify": "~0.1.0",

    "catw": "~0.0.1",

    "tap": "~0.4.4"

  },

  "scripts": {

    "build-js": "browserify browser/main.js | uglifyjs -mc > static/bundle.js",

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

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

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

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

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

    "start": "node server.js",

    "test": "tap test/*.js"

  }}

生产环境下,只需运行npm run build。如果是本地开发,就用npm run watch。


你也可以坐下扩展。比方说,如果你希望在运行start前先运行build,那么你只需写上这么一行:


"start": "npm run build && node server.js"

也许你想同时启动watcher?


"start-dev": "npm run watch & npm start"

当事情变得非常复杂的时候


如果你发现在单个scripts条目中塞了一大堆命令,那你可以考虑重构一下,把一些命令放到别的地方,比如/bin。


你可以用任何语言编写这个脚本,比如bash、node或perl。只需要在脚本上加上合适的#!行。还有,别忘了chmod +x。


#!/bin/bash(cd site/main; browserify browser/main.js | uglifyjs -mc > static/bundle.js)

(cd site/xyz; browserify browser.js > static/bundle.js)

"build-js": "bin/build.sh"

Windows


你可能会吃惊的是,相当多的类bash语法可以在Windows上工作。不过我们至少还需要让;和&可以正常工作。


James Halliday分享过一些在Windows兼容的经验,这些经验也适用于本文的主题,可以参考。此外要推荐下win-bash,这是一个很方便的Windows平台上的bash实现。


总结


James Halliday希望这个使用npm run的方式能吸引一部人对现有的前端自动化任务工具不满意的人。James Halliday比较偏好unix体系下的那些学习曲线陡峭的工具,比如Git,或者类似 npm 这种在 bash 的基础上提供极简界面的工具。也就是说,不需要很多仪式化操作和配合的工具。非常简单的工具,已经足够胜任通常的任务。


如果你对npm run风格不感冒。你也许可以考虑下Makefiles,一个稳定而简单,不过多少有点怪异的替代品。


原文 task automation with npm run


修改时间 2016-10-03

真诚赞赏,手留余香
赞赏
随机推荐
Git 创建分支最佳实践
PHP下载文件,隐藏真实文件地址
WordPress 不使用插件开发 RESTful API JWT 授权和验证
MySQL 管理用户
PHP判断file框是否已选择文件
Node.js 异步异常处理
MySQL中SELECT COUNT()速度很慢的情况
filezilla server FTP 安装报错 "could not load TLS network. Aborting start of administration interface"
Video.js 播放m3u8
索引的选择性