用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 相关文章推荐
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
js下拉框二级关联菜单效果代码具体实现
Aug 03 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
node thread.sleep实现示例
Jun 20 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
layui在form表单页面通过Validform加入简单验证的方法
Sep 06 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
详解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
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
PHP中的use关键字及文件的加载详解
2016/11/28 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
传智播客学习之java 反射
2009/11/22 Javascript
基于jquery的回到页面顶部按钮
2011/06/27 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
jquery实现表格隔行换色效果
2015/11/19 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
2016/01/04 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
2016/03/25 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
JavaScript表单验证的两种实现方法
2017/02/11 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
python根据经纬度计算距离示例
2014/02/16 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
Python文件操作之合并文本文件内容示例代码
2017/09/19 Python
详解Python的hasattr() getattr() setattr() 函数使用方法
2018/07/09 Python
python生成器与迭代器详解
2019/01/01 Python
Python实现钉钉发送报警消息的方法
2019/02/20 Python
详解python:time模块用法
2019/03/25 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
关于django 1.10 CSRF验证失败的解决方法
2019/08/31 Python
python如何实现复制目录到指定目录
2020/02/13 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
会议主持词
2014/03/17 职场文书
五四青年节演讲稿
2014/05/26 职场文书
村党支部公开承诺书
2014/05/29 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android