用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 特性检测并非浏览器检测
Jan 15 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
javascript获取选中的文本的方法代码
Oct 30 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
谷歌地图打不开的解决办法
Aug 07 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
微信小程序 textarea 详解及简单使用方法
Dec 05 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
JavaScript 类的封装操作示例详解
May 16 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 正则学习实例
2008/07/30 PHP
浅析php学习的路线图
2013/07/10 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
举例讲解AngularJS中的模块
2015/06/17 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
2015/07/31 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
javascript实现留言板功能
2020/02/08 Javascript
[01:46]辉夜杯—打造中国DOTA新格局
2015/12/25 DOTA
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
简单谈谈python中的多进程
2016/11/06 Python
python字符串的方法与操作大全
2018/01/30 Python
unittest+coverage单元测试代码覆盖操作实例详解
2018/04/04 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
pandas 强制类型转换 df.astype实例
2020/04/09 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
JAVA和C++的区别
2013/10/06 面试题
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
高二语文教学反思
2016/02/16 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
Python提取PDF指定内容并生成新文件
2021/06/09 Python