簡(jiǎn)單談?wù)刧ulp-changed插件
前言
gulp-changed插件的作用,是用來(lái)過(guò)濾未被修改過(guò)的文件,只有修改后的文件才能通過(guò)管道。這樣做的好處時(shí),只處理修改后的文件,減少后續(xù)程序的執(zhí)行時(shí)間。
根據(jù)官方給出的例子:
const SRC = 'src/*.js'; const DEST = 'dist'; gulp.task('default', () => { return gulp.src(SRC) .pipe(changed(DEST)) .pipe(gulp.dest(DEST)) .pipe( /* 其他操作 */ ); });
檢測(cè)SRC中的文件,然后把從changed()
通過(guò)的文件輸出到DEST文件夾中,然后繼續(xù)進(jìn)行后續(xù)的操作。在這之前,我寫的代碼是這樣子的,沒(méi)有傳入?yún)?shù),也沒(méi)有輸出到某文件夾中(gulp.dest(DEST)
):
gulp.task('default', () => { return gulp.src('src/*.js') .pipe(changed()) .pipe( /* 其他操作 */ ); });
然后發(fā)現(xiàn),每次執(zhí)行時(shí),所有的文件都會(huì)通過(guò)管道,根本沒(méi)有過(guò)濾的作用??戳嗽创a之后才知道,傳遞參數(shù)和文件輸出是必須的,因?yàn)槌绦蚶锸悄脙蓚€(gè)文件夾SRC和DEST里的文件進(jìn)行對(duì)比的。
每當(dāng)檢測(cè)一個(gè)程序時(shí),都會(huì)去DEST里的文件夾里尋找這個(gè)對(duì)應(yīng)的文件,若DEST最后修改時(shí)間發(fā)生變化或內(nèi)容已更新,則表明這是一個(gè)新文件,通過(guò)管道,否則保留。程序里目前使用的是兩個(gè)文件最后修改時(shí)間的對(duì)比,若SRC里的文件的最后修改時(shí)間比DEST里文件的最后修改時(shí)間要大,說(shuō)明該文件被修改過(guò)。
當(dāng)然,gulp-changed還提供了一種比較函數(shù):內(nèi)容的對(duì)比。將源文件和目標(biāo)文件的內(nèi)容進(jìn)行sha1加密后,比較兩者的加密串,若不相同,則通過(guò)管道。
可通過(guò)傳遞參數(shù)修改比對(duì)函數(shù):
gulp.task('default', () => { return gulp.src(SRC) .pipe(changed(DEST, {hasChanged: changed.compareSha1Digest})) .pipe(gulp.dest(DEST)) .pipe( /* 其他操作 */ ); });
當(dāng)然,你可以傳遞自己定義的函數(shù),但是需支持以下4個(gè)參數(shù):
- stream 文件通過(guò)對(duì)比后將sourceFile添加到隊(duì)列中
- callback 函數(shù)里的代碼執(zhí)行完畢后的回調(diào)函數(shù)
- sourceFile vinyl 文件對(duì)象
- destPath 與sourceFile文件對(duì)比的目標(biāo)文件路徑
源碼講解
這個(gè)方法里,是對(duì)兩個(gè)文件最后修改時(shí)間的對(duì)比
function compareLastModifiedTime(stream, cb, sourceFile, targetPath) { // 獲取目標(biāo)文件的狀態(tài) fs.stat(targetPath, function (err, targetStat) { // 若源文件存在 if (!fsOperationFailed(stream, sourceFile, err)) { // 對(duì)比兩者的最后修改時(shí)間 if (sourceFile.stat.mtime > targetStat.mtime) { stream.push(sourceFile); } } cb(); }); }
這里有個(gè)疑問(wèn)的地方:
- 若目標(biāo)文件不存在,則當(dāng)前情況是無(wú)法進(jìn)行比較的,只能在運(yùn)行一次之后,產(chǎn)生了目標(biāo)文件;再修改源文件才能進(jìn)行對(duì)比;新添加的文件同理
mtime, atime, ctime
上面中的mtime表示修改時(shí)間,此外,文件還幾個(gè)跟時(shí)間有關(guān)的屬性,這里也稍微的講解一下。
ATIME-ACCESS TIME
該字段表示文件中的數(shù)據(jù)最后一次被訪問(wèn)的時(shí)間–通過(guò)unix進(jìn)行直接讀取或通過(guò)命令行和腳本讀取。
CTIME-CHANGE TIME
當(dāng)您更改文件的所有權(quán)或訪問(wèn)權(quán)限時(shí),ctime也隨之變化。當(dāng)然,內(nèi)容更新時(shí),ctime也會(huì)發(fā)生改變。
MTIME-MODIFY TIME
最后修改時(shí)間顯示上次更改文件內(nèi)容的時(shí)間。它不與文件權(quán)限的變化而變化,并因此用于跟蹤文件內(nèi)容的實(shí)際變化。
通過(guò)LS顯示這三種時(shí)間
最簡(jiǎn)單的確認(rèn)這些時(shí)間的方式是使用ls命令,我現(xiàn)在用的是windows系統(tǒng),安裝了一個(gè)ConEmu。
使用ls -l顯示的時(shí)間就是當(dāng)前文件最后一次修改的時(shí)間,即mtime:
-rw-r--r-- 1 root 1049089 2676 一月 20 03:06 gulpfile.js
使用ls -lu顯示的是文件最后一次被訪問(wèn)的時(shí)間,即atime:
-rw-r--r-- 1 root 1049089 2676 十一 24 09:18 gulpfile.js
使用ls -lc顯示的是文件最后一次權(quán)限被修改的時(shí)間,即ctime:
-rw-r--r-- 1 root 1049089 2676 一月 20 03:06 gulpfile.js
通過(guò)STAT顯示這三種時(shí)間
使用stat命令可以顯示這個(gè)文件更加詳細(xì)的信息:
$ 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
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,如果有疑問(wèn)大家可以留言交流。
相關(guān)文章
Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字與其顏色
這篇文章主要介紹了Javascript點(diǎn)擊按鈕隨機(jī)改變數(shù)字和其字體的顏色,實(shí)現(xiàn)后的效果很不錯(cuò),具有一定的參考價(jià)值,有需要的可以參考借鑒,下面來(lái)一起看看。2016-09-09JavaScript實(shí)現(xiàn)頁(yè)面電子時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)頁(yè)面電子時(shí)鐘,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06javascript中checkbox使用方法實(shí)例演示
這篇文章通過(guò)簡(jiǎn)單的實(shí)例演示了javascript中checkbox使用方法,感興趣的小伙伴們可以參考一下2015-11-11跟我學(xué)習(xí)javascript創(chuàng)建對(duì)象(類)的8種方法
跟我學(xué)習(xí)javascript創(chuàng)建對(duì)象(類)的8種方法,每一種方法都有詳細(xì)的介紹,不知道javascript如何創(chuàng)建對(duì)象的朋友,不要錯(cuò)過(guò)這篇文章。2015-11-11Layui數(shù)據(jù)表格跳轉(zhuǎn)到指定頁(yè)的實(shí)現(xiàn)方法
今天小編就為大家分享一篇Layui數(shù)據(jù)表格跳轉(zhuǎn)到指定頁(yè)的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09通過(guò)js獲取上傳的圖片信息(臨時(shí)保存路徑,名稱,大?。┤缓笸ㄟ^(guò)ajax傳遞給后端的方法
最近有朋友向我請(qǐng)教,使用js獲取上傳圖片的信息然后通過(guò)ajax傳遞給后端,怎么實(shí)現(xiàn)呢?通過(guò)上網(wǎng)搜索大量資料,下面小編把我的解決辦法整理,分享給大家,需要的朋友可以參考下2015-10-10JS仿Windows開機(jī)啟動(dòng)Loading進(jìn)度條的方法
這篇文章主要介紹了JS仿Windows開機(jī)啟動(dòng)Loading進(jìn)度條的方法,實(shí)例分析了javascript操作html元素及對(duì)應(yīng)樣式實(shí)現(xiàn)特效的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域
正常使用AJAX會(huì)需要正常考慮跨域問(wèn)題,所以偉大的程序員們又折騰出了一系列跨域問(wèn)題的解決方案,如JSONP、flash、ifame、xhr2等等。本文給大家介紹JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域,感興趣的朋友參考下吧2016-04-04