简单谈谈gulp-changed插件


Posted in Javascript onFebruary 21, 2017

前言

gulp-changed插件的作用,是用来过滤未被修改过的文件,只有修改后的文件才能通过管道。这样做的好处时,只处理修改后的文件,减少后续程序的执行时间。

根据官方给出的例子:

const SRC = 'src/*.js';
const DEST = 'dist';

gulp.task('default', () => {
 return gulp.src(SRC)
  .pipe(changed(DEST))
  .pipe(gulp.dest(DEST))
  .pipe( /* 其他操作 */ );
});

检测SRC中的文件,然后把从changed()通过的文件输出到DEST文件夹中,然后继续进行后续的操作。在这之前,我写的代码是这样子的,没有传入参数,也没有输出到某文件夹中(gulp.dest(DEST) ):

gulp.task('default', () => {
 return gulp.src('src/*.js')
  .pipe(changed())
  .pipe( /* 其他操作 */ );
});

然后发现,每次执行时,所有的文件都会通过管道,根本没有过滤的作用。看了源代码之后才知道,传递参数和文件输出是必须的,因为程序里是拿两个文件夹SRC和DEST里的文件进行对比的。

每当检测一个程序时,都会去DEST里的文件夹里寻找这个对应的文件,若DEST最后修改时间发生变化或内容已更新,则表明这是一个新文件,通过管道,否则保留。程序里目前使用的是两个文件最后修改时间的对比,若SRC里的文件的最后修改时间比DEST里文件的最后修改时间要大,说明该文件被修改过。

当然,gulp-changed还提供了一种比较函数:内容的对比。将源文件和目标文件的内容进行sha1加密后,比较两者的加密串,若不相同,则通过管道。

可通过传递参数修改比对函数:

gulp.task('default', () => {
 return gulp.src(SRC)
  .pipe(changed(DEST, {hasChanged: changed.compareSha1Digest}))
  .pipe(gulp.dest(DEST))
  .pipe( /* 其他操作 */ );
});

当然,你可以传递自己定义的函数,但是需支持以下4个参数:

  1. stream 文件通过对比后将sourceFile添加到队列中
  2. callback 函数里的代码执行完毕后的回调函数
  3. sourceFile vinyl 文件对象
  4. destPath 与sourceFile文件对比的目标文件路径

源码讲解

这个方法里,是对两个文件最后修改时间的对比

function compareLastModifiedTime(stream, cb, sourceFile, targetPath) {
 // 获取目标文件的状态
 fs.stat(targetPath, function (err, targetStat) {
 // 若源文件存在
 if (!fsOperationFailed(stream, sourceFile, err)) {
 // 对比两者的最后修改时间
 if (sourceFile.stat.mtime > targetStat.mtime) {
 stream.push(sourceFile);
 }
 }
 cb();
 });
}

这里有个疑问的地方:

  • 若目标文件不存在,则当前情况是无法进行比较的,只能在运行一次之后,产生了目标文件;再修改源文件才能进行对比;新添加的文件同理

mtime, atime, ctime

上面中的mtime表示修改时间,此外,文件还几个跟时间有关的属性,这里也稍微的讲解一下。

ATIME-ACCESS TIME

该字段表示文件中的数据最后一次被访问的时间?通过unix进行直接读取或通过命令行和脚本读取。

CTIME-CHANGE TIME

当您更改文件的所有权或访问权限时,ctime也随之变化。当然,内容更新时,ctime也会发生改变。

MTIME-MODIFY TIME

最后修改时间显示上次更改文件内容的时间。它不与文件权限的变化而变化,并因此用于跟踪文件内容的实际变化。

通过LS显示这三种时间

最简单的确认这些时间的方式是使用ls命令,我现在用的是windows系统,安装了一个ConEmu。

使用ls -l显示的时间就是当前文件最后一次修改的时间,即mtime:

-rw-r--r-- 1 root 1049089   2676 一月 20 03:06 gulpfile.js

使用ls -lu显示的是文件最后一次被访问的时间,即atime:

-rw-r--r-- 1 root 1049089   2676 十一 24 09:18 gulpfile.js

使用ls -lc显示的是文件最后一次权限被修改的时间,即ctime:

-rw-r--r-- 1 root 1049089   2676 一月 20 03:06 gulpfile.js

通过STAT显示这三种时间

使用stat命令可以显示这个文件更加详细的信息:

$ stat gulpfile.js
 File: ‘gulpfile.js'
 Size: 2676   Blocks: 4   IO Block: 65536 regular file
Device: d6be5777h/3602798455d Inode: 844424930178810 Links: 1
Access: (0644/-rw-r--r--) Uid: (1435492/root) Gid: (1049089/ UNKNOWN)
Access: 2015-11-24 09:18:34.008292400 +0000
Modify: 2016-01-20 03:06:34.035859700 +0000
Change: 2016-01-20 07:04:40.432046400 +0000
 Birth: 2015-11-24 09:18:33.965292400 +0000

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
Mar 28 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
探讨跨域请求资源的几种方式(总结)
Dec 02 Javascript
vuex学习之Actions的用法详解
Aug 29 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
Vue.js中Line第三方登录api的实现代码
Jun 29 Javascript
js实现移动端轮播图滑动切换
Dec 21 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 #Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 #Javascript
jquery设置css样式的多种方法(总结)
Feb 21 #Javascript
JavaScript中 this 指向问题深度解析
Feb 21 #Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 #Javascript
从零学习node.js之模块规范(一)
Feb 21 #Javascript
JS获得一个对象的所有属性和方法实例
Feb 21 #Javascript
You might like
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
php如何获取Http请求
2020/04/30 PHP
判断浏览器的javascript版本的代码
2010/09/03 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
vue.js获取数据库数据实例代码
2017/05/26 Javascript
vue.js实例对象+组件树的详细介绍
2017/10/20 Javascript
有趣的JavaScript隐式类型转换操作实例分析
2020/05/02 Javascript
python实现dnspod自动更新dns解析的方法
2014/02/14 Python
Python生成不重复随机值的方法
2015/05/11 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Python实现的自定义多线程多进程类示例
2018/03/23 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
python退出循环的方法
2020/06/18 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
美国健康和保健平台:healtop
2020/07/02 全球购物
教师对学生的评语
2014/04/28 职场文书
快餐公司创业计划书
2014/04/29 职场文书
给校长的建议书100字
2014/05/16 职场文书
保护动物的标语
2014/06/11 职场文书
大学生自荐书范文
2015/03/05 职场文书
消费者理赔投诉书
2015/07/02 职场文书
开学第一周总结
2015/07/16 职场文书
2015年董事长秘书工作总结
2015/07/23 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书
如何用python反转图片,视频
2021/04/24 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android