简单谈谈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 相关文章推荐
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
Angular JS 生成动态二维码的方法
Feb 23 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
利用js实现简易红绿灯
Oct 15 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
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
JavaScript 学习笔记(十六) js事件
2010/02/01 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
JavaScript 原型继承
2011/12/26 Javascript
jsPDF生成pdf后在网页展示实例
2014/01/16 Javascript
JavaScript中的索引数组、关联数组和静态数组、动态数组讲解
2014/11/08 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
js 去掉字符串前后空格实现代码集合
2017/03/25 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
jQuery实现雪花飘落效果
2020/08/02 jQuery
JS前端基于canvas给图片添加水印
2020/11/11 Javascript
Python的迭代器和生成器
2015/07/29 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
解决python "No module named pip" 的问题
2018/10/13 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python定时检测无响应进程并重启的实例代码
2019/04/22 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
Python基于locals返回作用域字典
2020/10/17 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
英国领先的电动可调床制造商:Laybrook
2019/12/26 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
毕业设计计划书
2014/01/09 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
小学教学随笔感言
2014/02/26 职场文书
创业融资计划书
2014/04/25 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
2016公司新年问候语
2015/11/11 职场文书
Win11怎么修改电源模式?Win11修改电源模式的方法
2022/04/05 数码科技