简单谈谈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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
AngularJS 与百度地图的结合实例
Oct 20 Javascript
Bootstrap列表组学习使用
Feb 09 Javascript
jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】
Mar 09 Javascript
Javascript封装id、class与元素选择器方法示例
Mar 13 Javascript
JavaScript 过滤关键字
Mar 20 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
JS实现多选框的操作
Jun 24 Javascript
vue 验证两次输入的密码是否一致的方法示例
Sep 29 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
从零学习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
PHP实现Socket服务器的代码
2008/04/03 PHP
非常精妙的PHP递归调用与静态变量使用
2012/12/16 PHP
PHP简单实现断点续传下载的方法
2015/09/25 PHP
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
Angular2 之 路由与导航详细介绍
2017/05/26 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
原生js实现获取form表单数据代码实例
2019/03/27 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
python中模块查找的原理与方法详解
2017/08/11 Python
python:print格式化输出到文件的实例
2018/05/14 Python
Python OpenCV去除字母后面的杂线操作
2020/07/05 Python
opencv 图像礼帽和图像黑帽的实现
2020/07/07 Python
python调用私有属性的方法总结
2020/07/24 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
MIS软件工程师的面试题
2016/04/22 面试题
创业者迈进成功第一步:如何写创业计划书?
2014/03/22 职场文书
化学教育专业自荐信
2014/07/04 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
公司管理制度范本
2015/08/03 职场文书
2019学生会干事辞职信
2019/06/27 职场文书
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL