监听文件变化并自动运行 npm script
监听文件变化并自动运行 npm script
软件工程师做的事情基本都是在实现自动化,比如各种业务系统是为了业务运转的自动化,部署系统是为了运维的自动化,对于开发者本身,自动化也是提升效率的关键环节,在实际开发过程中也有不少事情是可以自动化的。
拥抱现代前端工作流的同学都会有代码风格检查、单元测试等环节,这样就很需要在代码变更之后立即得到反馈,如代码改动导致了那个 Case 失败,哪块不符合团队的编码规范等。
使用 gulp、grunt 的同学,可能对这种功能非常熟悉,不就是 watch 么?确实是,使用 npm script 我们也可以实现类似的功能。下面详细介绍如何改造我们的项目实现单测、代码检查的自动化。
单元测试自动化
幸运的是,mocha 本身支持 --watch
参数,即在代码变化时自动重跑所有的测试,我们只需要在 scripts 对象中新增一条命令即可:
"test": "cross-env NODE_ENV=test mocha tests/",
+ "watch:test": "npm t -- --watch","cover": "node scripts/cover.js",
尝试运行 npm run watch:test,我们会发现进程并没有退出,接下来尝试去修改测试代码,测试是不是自动重跑了呢?自己试试看。
代码检查自动化
我们使用的代码检查工具 stylelint、eslint、jsonlint 不全支持 watch 模式,这里我们需要借助 onchange 工具包来实现,onchange 可以方便的让我们在文件被修改、添加、删除时运行需要的命令。
1. 安装项目依赖
使用如下命令安装 onchange 到项目依赖中:
npm i onchange -D
# npm install onchange --save-dev
# yarn add onchange -D
2. 添加 npm script
按照如下提示添加 watch:lint 和 watch 两个子命令:
+ "watch": "npm-run-all --parallel watch:*",
+ "watch:lint": "onchange -i \"**/*.js\" \"**/*.less\" -- npm run lint","watch:test": "npm t -- --watch",
关于改动的几点说明:
watch:lint
里面的文件匹配模式可以使用通配符,但是模式两边使用了转义的双引号,这样是跨平台兼容的;watch:lint
里面的-i
参数是让 onchange 在启动时就运行一次--
之后的命令,即代码没变化的时候,变化前后的对比大多数时候还是有价值的;- watch 命令实际上是使用了 npm-run-all 来运行所有的 watch 子命令;
TIP#15:有没有好奇过 onchange 是怎么实现文件系统监听的?所有的魔法都藏在它的源代码里面,实际上它使用了跨平台的文件系统监听包 chokidar,基于它,你能做点什么有意思的事情呢?
onchange 有个不太醒目的特性是,文件系统发生变化之后,他在运行指定命令之前输出哪个文件发生了哪些变化,如下图红框中的内容:
读到这里,有没有觉得 onchange 可以和 gulp、grunt 的 watch 一样强大。
除了上面的单测重跑和代码检查之外,你还有什么需求需要放在 onchange 里面?欢迎留言讨论。
本节用到的代码见 GitHub,想边看边动手练习的同学可以拉下来自己改,注意切换到正确的分支
09-run-npm-script-with-onchange
。
上一篇:高阶篇 03:用 node.js 脚本替代复杂的 npm script下一篇:实战篇 02:结合 live-reload 实现自动刷新
监听文件变化并自动运行 npm script相关推荐
- webpack学习笔记(三):监听文件变化并编译
在上一篇webpack学习笔记中主要认识了webpack配置文件中相关的基础配置和命令的执行.这次学习如何在文件发生变化时自动打包编译. 首先,我们来看一下配置文件 const path = requ ...
- Java实现监听文件变化的三种方法,推荐第三种
背景 在研究规则引擎时,如果规则以文件的形式存储,那么就需要监听指定的目录或文件来感知规则是否变化,进而进行加载.当然,在其他业务场景下,比如想实现配置文件的动态加载.日志文件的监听.FTP文件变动监 ...
- python监听文件最后修改人_Python持续监听文件变化代码实例
在日常的工作中,有时候会有这样的需求,需要一个常驻任务,持续的监听一个目录下文件的变化,对此作出回应. pyinotify就是这样的一个python包,使用方式如下: 一旦src.txt有新的内容,程 ...
- node --- 监听文件变化(静态、动态、子进程)
静态版本:监听的文件名写死了 // watcher.js 'use strict' const fs = require('fs'); fs.watch('target.txt', () => ...
- 监听文件修改,自动加载xml文件。
转载文章,转载自,公司项目,董亚杰写的. 下面是完整的代码,复制的. package cn.digitalpublishing.util.debug;import java.io.File; impo ...
- gulp构建项目(三):gulp-watch监听文件改变、新增、删除
一.gulp.watch()功能介绍 举例说明:当'./src/*.html'发生变化时,执行'html'任务,同时刷新浏览器.如下: gulp.task('watch', function(){gu ...
- java 接口文件夹_Java NIO.2 使用Path接口来监听文件、文件夹变化
Java7对NIO进行了大的改进,新增了许多功能: •对文件系统的访问提供了全面的支持 •提供了基于异步Channel的IO 这些新增的IO功能简称为 NIO.2,依然在java.nio包下. 早期的 ...
- 使用Node.JS监听文件夹变化
使用Node.JS监听文件夹改变有许多应用场合,比如: 构建自动编绎工具 当源文件改变时,自动运行build过程,比如当你写CoffeeScript文件或SASS CSS文件时,保存之后可即时生成对应 ...
- .net core 监听文件夹变化, FileSystemWatcher 封装
功能: .net core 监听文件夹变化, FileSystemWatcher 封装 问题1:复制一个新文件能正常运行,但是复制第二个文件的时候就报一个文件正被其他线程占用无法打开的异常?The p ...
最新文章
- axios的简单封装和http请求实践
- 文档型数据库mongodb介绍2-副本集
- python读取大文件的坑_python读取大文件踩过的坑——读取txt文件词向量
- SAP UI5 初学者教程之二十七 - SAP UI5 应用的单元测试工具 QUnit 介绍试读版
- paxos 练手 推进中
- java的scanner使用步骤
- 【MEMORY ALIGN】内存对齐
- Hyperledger Fabric教程(15)--基于Kafka的Order服务实战
- 中国人口增长的数学模型(for数学建模)
- android 微信支付:统一下单接口获取
- 原型模式(深克隆、浅克隆)
- 基于Python和OpenCV的图像目标检测及分割
- 一文曝光字节跳动薪资职级,资深开发的收入你意想不到~
- 配置错误 访问被拒绝 解决方案
- 分类流控qdisc之htb
- infopath 2007 升级到2013 栏目字段重复生成问题
- passenger中的设置ssl
- 非Build Rebuild--Compilation of Maven projects is supported only if external build is started from an
- 基于动态手势识别的酷狗音乐播放器控制
- ERROR: Cannot install keras==2.2.0 and tensorflow==1.14.0 because these package versions have confli
热门文章
- 教你怎么获得ICM会员ID解析.xxx域名(membership id icm)
- 一、Team Explorer的安装
- lnmp 0.4 安装指南
- Net设计模式实例系列文章总结[转]
- ASP.NET从字符串中查找字符出现次数的方法
- SVG 教程 (六)SVG 阴影,SVG 渐变 - 线性,SVG 渐变- 放射性
- Swift中文教程(一)基础数据类型
- Python3.0 新特性
- 聊一聊SpringCloudNetflix的五大组件(神兽)
- 机器学习速成课程 | 练习 | Google Development——编程练习:TensorFlow 编程概念