用npm

利用自动化构建工具如npm、pip #生活技巧# #编程开发#

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

James Halliday在博客上分享了使用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']条目，类似这样：

1

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

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

1

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

监视 javascript

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

1

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

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

构建CSS

用cat就可以搞定：

1

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

监视CSS

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

1

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

序列化子任务

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

1

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

并行子任务

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

1

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

完整的package.json例子

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

{

 "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，那么你只需写上这么一行：

1

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

也许你想同时启动watcher？

1

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

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

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

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

1

2

3

#!/bin/bash

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

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

1

"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，一个稳定而简单，不过多少有点怪异的替代品。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解Vue项目在其他电脑npm run dev运行报错的解决方法基于vue-cli npm run build之后vendor.js文件过大的解决方法解决Vue-cli npm run build生产环境打包,本地不能打开的问题vue中Npm run build 根据环境传递参数方法来打包不同域名

网址：用npm https://www.yuejiaxmz.com/news/view/577504

相关内容

为了方便项目打包，我用Node写了个git
使用Node.js和Express创建简单的任务管理应用程序在当今繁忙的世界中，任务管理变得越来越关键。在工作和日常生活
（一）nodejs循序渐进
webpack自动化构建工具详细笔记，入门到实战，解决 webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称，和webpack : 无法加载文件等等
如何快速删除node
如何使用Layui开发一个支持可编辑的个人日程管理系统
轻松搭建，畅快沟通：Python打造高效聊天室私聊体验
最快速删除node
Webpack 快速入门
node.js家庭理财系统程序+论文 可用于毕业设计

随便看看