Brief talk about gulp changed plug in

Preface

The gulp-changed plug-in is used to filter files that have not been modified, and only modified files can pass through the pipeline. The advantage of this is that only the modified files are processed, and the execution time of subsequent programs is reduced.

According to the official example:

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

gulp.task('default', () => {
 return gulp.src(SRC)
  .pipe(changed(DEST))
  .pipe(gulp.dest(DEST))
  .pipe( /*  Other operations  */ );
});

Detect the files in SRC, and then change the file from the changed() The passed file is output to the DEST folder, and then the subsequent operation is continued. Before that, the code I wrote was like this, without passing in parameters and not outputting to a folder ( gulp.dest(DEST) ):

gulp.task('default', () => {
 return gulp.src('src/*.js')
  .pipe(changed())
  .pipe( /*  Other operations  */ );
});

Then it is found that every time it is executed, all the files will pass through the pipeline, and there is no filtering effect at all. After reading the source code, I know that it is necessary to pass parameters and file output, because the program is to compare the files in two folders SRC and DEST.

Whenever a program is detected, it will go to the folder in DEST to find the corresponding file. If the last modification time of DEST changes or the content has been updated, it indicates that it is a new file, which is passed through the pipeline, otherwise it will be retained. Program is currently used in the last two file modification time comparison, if the last time of SRC file modification than the last time of DEST file modification to be larger, that the file has been modified.

Of course, gulp-changed also provides a comparison function: content comparison. After sha1 encryption of the contents of the source file and the target file, compare the encrypted strings of the two files, and if they are different, pass through the pipeline.

You can modify the alignment function by passing parameters:

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

Of course, you can pass your own defined function, but you need to support the following four parameters:

The stream file adds sourceFile to the queue after comparison Callback function after the code in callback function is executed sourceFile vinyl File Object Destination file path for destPath versus sourceFile file comparison

Source code explanation

In this method, it is a comparison of the last modification time of two files

function compareLastModifiedTime(stream, cb, sourceFile, targetPath) {
 //  Gets the status of the destination file 
 fs.stat(targetPath, function (err, targetStat) {
 //  If the source file exists 
 if (!fsOperationFailed(stream, sourceFile, err)) {
 //  Compare the last modification time of the two 
 if (sourceFile.stat.mtime > targetStat.mtime) {
 stream.push(sourceFile);
 }
 }
 cb();
 });
}

Here's a question:

If the object file does not exist, the current situation can not be compared, and the object file can only be produced after running once; Then modify the source file to compare; The same applies to newly added files

mtime, atime, ctime

The mtime above indicates the modification time. In addition, the file also has several attributes related to time, which are also explained a little here.

ATIME-ACCESS TIME

This field indicates when the data in the file was last accessed either directly through unix or through command line and script reading.

CTIME-CHANGE TIME

When you change the ownership or access rights of a file, ctime also changes. Of course, ctime will also change when the content is updated.

MTIME-MODIFY TIME

Last Modified Time displays the time when the contents of the file were last changed. It does not change with changes in file permissions and is therefore used to track actual changes in file contents.

Display these three times through LS

The easiest way to confirm these times is to use the ls command. I am using the windows system and have an ConEmu installed.

The time shown using ls-l is the last time the current file was modified, that is, mtime:

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

Using ls-lu shows the last time the file was accessed, that is, atime:

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

Using ls-lc shows the last time the file permissions were modified, that is, ctime:

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

These three times are displayed by STAT

Use the stat command to display more detailed information about this file:

$ 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

Summarize

The above is the whole content of this article. I hope the content of this article can bring 1 certain help to everyone's study or work. If you have any questions, you can leave a message for communication.