用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 相关文章推荐
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
在javascript中创建对象的各种模式解析
May 16 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
VueRouter导航守卫用法详解
Dec 25 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
JavaScript实现网页动态生成表格
Nov 25 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 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP中运用jQuery的Ajax跨域调用实现代码
2012/02/21 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
CodeIgniter实现从网站抓取图片并自动下载到文件夹里的方法
2015/06/17 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
Thinkphp 框架配置操作之动态配置、扩展配置及批量配置实例分析
2020/05/15 PHP
URL编码转换,escape() encodeURI() encodeURIComponent()
2006/12/27 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
ScrollDown的基本操作示例
2013/06/09 Javascript
js实现两个值相加alert出来精确到指定位
2013/09/25 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
JS获取表格内指定单元格html内容的方法
2015/03/31 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
详解jQuery lazyload 懒加载
2016/12/19 Javascript
js中开关变量使用实例
2017/02/24 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
Python中无限元素列表的实现方法
2014/08/18 Python
Django自定义用户认证示例详解
2018/03/14 Python
python 构造三维全零数组的方法
2018/11/12 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
建筑投标担保书
2014/05/20 职场文书
户外宣传策划方案
2014/05/25 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书