用npm-run实现自动化任务的方法示例


Posted in Javascript onJanuary 14, 2019

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

用npm-run实现自动化任务的方法示例

James Halliday在博客上分享了使用npm run自动化任务的一些经验:

script

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

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

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

构建javascript

为了便于组织代码和利用npm上的包,写代码的时候往往使用module.exportsrequire()。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

你可以用任何语言编写这个脚本,比如bashnodeperl。只需要在脚本上加上合适的#!行。还有,别忘了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,一个稳定而简单,不过多少有点怪异的替代品。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
发布一个基于javascript的动画类 Fx.js
Nov 05 Javascript
Javscript删除数组中指定元素并返回新数组
Mar 06 Javascript
jQuery中innerHeight()方法用法实例
Jan 19 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
原生JS实现不断变化的标签
May 22 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
js中比较两个对象是否相同的方法示例
Sep 02 Javascript
vue实现节点增删改功能
Sep 26 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 #Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
Jan 14 #Javascript
vue-cli系列之vue-cli-service整体架构浅析
Jan 14 #Javascript
JS数组求和的常用方法总结【5种方法】
Jan 14 #Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 #Javascript
vue项目中使用vue-i18n报错的解决方法
Jan 13 #Javascript
vscode下vue项目中eslint的使用方法
Jan 13 #Javascript
You might like
php学习之数据类型之间的转换代码
2011/05/29 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
JavaScript中的集合及效率
2010/01/08 Javascript
如何设置一定时间内只能发送一次请求
2014/02/28 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
webpack 1.x升级过程中的踩坑总结大全
2017/08/09 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
基于JavaScript表单脚本(详解)
2017/10/18 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[00:56]跨越时空加入战场 全新祈求者身心“失落奇艺侍祭”展示
2019/07/20 DOTA
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
django的csrf实现过程详解
2019/07/26 Python
使用python实现kNN分类算法
2019/10/16 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
C++的几个面试题附答案
2016/08/03 面试题
高级工程师英文求职信
2014/03/19 职场文书
促销活动计划书
2014/05/02 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
研究生导师推荐信
2015/03/25 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书