简单谈谈gulp-changed插件

前言

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 组合按键事件监听实现代码
下一篇:从零学习node.js之搭建http服务器(二)

相关推荐

  • 🔥插件开发如此简单!

    本文使用的WebpackQuicklyStarter快速搭建 Webpack4 本地学习环境。 建议多阅读 Webpack 文档《Writing a Plugin》章节,学习开发简单插件。

    4 个月前
  • 魔力的一页大屏flash插件直播

    项目搭建 原有的项目是用的layuijq搭建。现在将大屏部分独立出来; 开心到飞起,哈哈哈 现在大屏单独出来做,我采用了react reactmobx; 选用react的原因是,对react比...

    3 天前
  • 页面CPU和内存占用监控可视化Chrome插件-Graph Process

    写这个插件的原因是最近要对比一下页面的 cpu 和内存占用的性能,本来是想找看看有没有什么软件能够去可视化一下当前标签页的cpu和内存占用,但是发现却找不到这种软件,mac 上有个活动监视器,但是当...

    9 个月前
  • 限制上传文件大小和格式的jQuery插件实例

    本文实例讲述了限制上传文件大小和格式的jQuery插件。分享给大家供大家参考。具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好...

    5 年前
  • 针对angular分页插件tm.pagination二次触发问题三种解决方案

    今天在开发个人博客的时候,需要对列表进行分页操作,因为整体使用的是AngularJs,所以分页插件也就选择了AngularJs pagination.js。可是在调试的时候发现的非常恶心的事情,在加载...

    9 个月前
  • 还在用字体图标吗,试试svg图标吧(内附vuecli-svg-sprite-loader插件)

    前言,关于字体图标 ​相信每位前端童鞋都对字体图标不陌生,毕竟网页必然少不了用大量的图标来装饰页面效果。在很早的时候,我们一般都是用img来当作图标来使用,由于大量地使用img会造成http请求过多的...

    2 个月前
  • 还在手写 css? css自动生成插件了解一下

    效果图 插件效果图(/public/upload/71cf2128f89f97851449469d32a06f90) 如何使用 github 地址 安装依赖 代码提示 如需提示 可...

    23 天前
  • 轻量级网页遮罩层jQuery插件用法实例

    本文实例讲述了轻量级网页遮罩层jQuery插件用法。分享给大家供大家参考。具体如下: 使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成。

    3 年前
  • 轻量的纯 JavaScript 动态提示工具插件库

    Tippy.js Tippy.js是一款轻量级的纯js tooltip工具提示插件。该tooltip插件功能强大,提供多种动画效果和主题效果,并允许用户自定义tooltip主题和使用html代码作为t...

    5 个月前
  • 贴近用户体验的Jquery日期、时间选择插件

    分享一款贴近Jquery日期、时间选择插件。这是一款双日历jQuery日期选择时间插件pickerDateRange。效果图如下: (https://img.javascriptcn.com/5...

    3 年前

官方社区

扫码加入 JavaScript 社区