如何用npm-run实现自动化任务的例子

自动构建javascript有很多好工具。但是，实际上很少有人知道npm run命令可以很好地完成这个任务，而且它的配置也很简单。

詹姆斯哈利迪在他的博客上分享了一些使用npm run实现任务自动化的经验：

脚本

在项目的package.json文件中，npm查找脚本区域，该区域包含诸如npm test和npm start之类的命令。

实际上，npm测试和npm启动是npm运行测试和npm运行启动的简称。事实上，您可以使用npm run来运行脚本中的任何条目。

使用npm run的便利之处在于npm会自动添加node_modules/。绑定到$PATH，这样就可以直接运行和开发依赖程序，而无需全局安装。只要npm上的包提供命令行界面，就可以直接使用。方便吗？当然，你总是可以自己写一个简单的小程序。

构建javascript

为了在npm上组织代码和使用包，编写代码时经常使用module.exports和require()。Browserify可以将这些打包成一个脚本。Browserify非常简单，只需在package.json中添加一个['build-js']条目，如下所示：

build-js ' : ' browser If browser/main . jsstatic/bundle . js '如果在生产环境中使用，需要压缩。我们只需要将uglify-js添加到devDependency中，并通过管道直接传递：

build-js ' : ' browser if browser/main . js | uglifyjs-MC static/bundle . js '监控javascript

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

在' watch-js ' : ' watch if browser/main . js-o static/bundle . js-dv '中，这里增加了两个参数-d和-v，可以看到详细的调试信息。

构建CSS

你可以用猫来做：

build-CSS ' : ' catstatic/page/*。csstab/*/*。' cssstatic/bundle.css '监控css

类似于上面用watchify观看javascript，我们使用catw来监控CSS文件的变化：

序列化“watch-CSS”:“CATV static/page/*”的子任务。csstab/*/*。' CSS-o静态/bundle.css-v '

很简单，npm运行每个子任务，然后用。

“构建”:“NPM运行构建-js NPM运行构建-CSS”的并行子任务

同样，我们使用并行子任务：

“watch”:“NPM runwatch-js NPM runwatch-CSS”的完整包. json示例

结合上述内容，package.json如下所示：

{ ' name ' : ' my-傻-app '，' version': '1.2.3 '，' private': true，' dependencies ' : { ' browserify ' : ' ~ 2 . 35 . 2 '，' uglifyjs': '~2.3.6' }，' devDependencies ' : { ' watch ify ' : ' ~ 0 . 1 . 0 '，' catw ' 3: ' ~ 3: 'css选项卡/*/*。css '，' build ' : ' NPM run build-js NPM run build-CSS '，' watch-js ' : ' watch ify browser/main . js-o static/bundle . js-dv '，' watch-CSS ' : ' catu static/pages/*。css选项卡/*/*。' css -o static/bundle.css -v '，在' watch ' : ' NPM runwatch-js NPM runwatch-CSS '，' start' :' nodeserver.js '，' test' :' taptest/* '的生产环境下。js'}}，您只需要运行npm运行构建。在本地开发的情况下，使用npm运行观察。

你也可以坐下来展开。例如，如果您想在运行start之前运行build，您只需要写下这一行：

启动“:”NPM运行构建节点服务器。js“也许你想同时启动观察器？

开始-发展' :' NPM跑步观察NPM开始'当事情变得非常复杂时，

如果您发现许多命令被填充在一个脚本条目中，您可以考虑重构并将一些命令放在其他地方，例如/bin。

您可以用任何语言编写这个脚本，比如bash、node或perl。只需添加适当的#！好吧。别忘了chmod x.

#!/bin/bash(cd站点/main；browser ify 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运行方式不感兴趣。也许你可以考虑Makefiles，一个稳定简单但有些怪异的替代方案。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。