摘要:當(dāng)接收一個回調(diào)函數(shù)的時候,一定要注意回調(diào)函數(shù)中的參數(shù)。主要作用就是用來讀取文件或者文件夾中的數(shù)據(jù)。表示文件的名稱指的是發(fā)生的變化使用技巧的進(jìn)一步使用,可以參照中文官網(wǎng)中的技巧集。
Gulp 簡介
Gulp 對現(xiàn)在的前端而言,是一個稍微老舊的工具了,但是,為了復(fù)習(xí)以前學(xué)過的內(nèi)容,還是把它翻出來,放在自己的博客中。說不定哪天又用到了呢。
需要說明的是,這里使用的 Gulp 版本是 3.9.1。認(rèn)識 Gulp
Gulp 是基于 Nodejs 的任務(wù)運行器,主要作用就是對代碼進(jìn)行構(gòu)建打包。說白了,就是將源代碼通過 Gulp 中流的操作,生成目標(biāo)代碼。
Gulp 借鑒了 Unix 操作系統(tǒng)中的管道思想,前一級的輸出作為后一級的輸入,所有的操作都是通過 Nodejs 流的形式來進(jìn)行操作。這種思想使操作變得簡單,為后續(xù)的任務(wù)編寫打下基礎(chǔ)。
Gulp 資源學(xué)習(xí)任何一門技術(shù)之前,首先要知道它的官網(wǎng),Gulp 也不例外。在這里把中文官網(wǎng)和英文官網(wǎng)一并放在下面,當(dāng)然,最好是看英文官網(wǎng),所以把英文官網(wǎng)放在了最上面。
英文官網(wǎng)
中文官網(wǎng)
當(dāng)然,該項目的 GitHub 地址也是需要知道在哪個地方的,這樣方便查看源碼。閑著沒事的時候,也可以看看源碼實現(xiàn),提高一下自己的技術(shù)水平。
GitHub 地址
在網(wǎng)上搜集 Gulp 相關(guān)教程的時候,發(fā)現(xiàn)了一個很好的網(wǎng)站,上面有一系列關(guān)于 Gulp 的文章。這個網(wǎng)站中講解 Gulp 還是比較詳細(xì)的。可以按照該網(wǎng)站中給出的教程,逐個學(xué)習(xí)。
Gulp教程
Gulp 入門 安裝 GulpGulp 的安裝依賴 Nodejs。在安裝 Gulp 之前,一定要確保已經(jīng)安裝了 Nodejs。關(guān)于 Nodejs 的安裝過程,可以參照 安裝 Nodejs。
全局安裝 :
如果需要全局使用 Gulp,可以使用全局安裝。
$ npm install -g gulp-cli
全局安裝,可以在終端中使用下面的命令查看當(dāng)前的 Gulp 版本 :
$ gulp -v [16:10:17] CLI version 1.4.0
通過全局安裝的方式,在存在 gulpfile.js 的地方,都可以使用 gulp 命令來執(zhí)行任務(wù)。
# 如 gulpfile.js 中存在一個 default 的命令,就可以通過下面的方式執(zhí)行 $ gulp
項目依賴安裝 :
這個時候安裝的 Gulp 是在 package.json 中的 devDependencies 節(jié)點下的,因為 Gulp 是項目開發(fā)時使用的模塊,不是生產(chǎn)時使用的模塊。
在安裝的時候,可以選擇使用 npm 的方式安裝,這種安裝方式最常見,但是一般安裝速度比較慢。
# 使用 npm 安裝 $ npm install --save-dev gulp
當(dāng)然,也可以選擇使用 yarn 的方式進(jìn)行安裝,這種方式安裝比較快速,但是需要安裝 yarn。
# 使用 yarn 安裝 $ yarn add gulp -D
通過項目依賴來安裝的 Gulp,必須在項目的根目錄下執(zhí)行,且根目錄中必須存在 gulpfile.js,執(zhí)行 Gulp 任務(wù)的時候,需要使用 Gulp 工具在當(dāng)前項目目錄中的相對路徑來調(diào)用。
# 如 gulpfile.js 中存在一個 default 的命令,就可以通過下面的方式執(zhí)行 $ ./node_modules/.bin/gulp
一般情況下,不推薦使用全局的方式來安裝 Gulp。推薦使用項目依賴來安裝,然后再結(jié)合 package.json 來使用。Gulp 的簡單使用
首先要通過安裝項目依賴的方式來安裝 Gulp :
$ yarn add gulp -D
由于通過 Gulp 來執(zhí)行任務(wù),首先需要有一個 gulpfile.js 文件,因此,在執(zhí)行任務(wù)之前,要創(chuàng)建 gulpfile.js 文件。文件創(chuàng)建完成之后,創(chuàng)建兩個任務(wù)。
// 在文件中一定要引入的模塊 var gulp = require("gulp"); // 將你的默認(rèn)的任務(wù)代碼放在這 gulp.task("default", function() { console.log("default task ..."); }); // 自定義名稱的任務(wù) gulp.task("demo",function(){ console.log("demo task ..."); });
任務(wù)創(chuàng)建完成之后,下面就是通過 Gulp 來執(zhí)行任務(wù)了。執(zhí)行任務(wù)之前,首先明白不同的任務(wù)。對于 Gulp 而言,本身存在一個名字為 default 的任務(wù),這個任務(wù)名在 Gulp 中已經(jīng)內(nèi)置了。除了 default 之外,其余所有的任務(wù)都是自定定義的任務(wù),也就是說,除了 default 之外,任務(wù)名可以自定義。
在上面的代碼中定義了兩個任務(wù),其中 default 是默認(rèn)任務(wù),執(zhí)行的時候比較方便,在 gulp 命令之后,不需要跟任何參數(shù)。
$ ./node_modules/.bin/gulp [14:50:11] Using gulpfile ~/Desktop/es/gulpfile.js [14:50:11] Starting "default"... default task ... [14:50:11] Finished "default" after 187 μs
但是,自定義的任務(wù)執(zhí)行的時候,要在 Gulp 命令后跟上一個參數(shù),這個參數(shù)是任務(wù)的名字。
$ ./node_modules/.bin/gulp demo [14:50:16] Using gulpfile ~/Desktop/es/gulpfile.js [14:50:16] Starting "demo"... demo task ... [14:50:16] Finished "demo" after 1.35 ms
輸出的日志中,會把任務(wù)開始的時間以及結(jié)束的時間打印出來,開始時間和結(jié)束時間之間就是任務(wù)執(zhí)行的過程。從某方面來講,這種輸出的日志類似 HTML 中的標(biāo)簽,存在開始標(biāo)簽和結(jié)束標(biāo)簽。當(dāng)然,這只是一種類比。
需要補充的一點 : 如果需要使用 babel 來轉(zhuǎn)換 js 文件,為了能使 babel 的配置文件能夠正常讀取,一般會把 gulpfile.js 重新命名為 gulpfile.babel.js,這樣就可以在 gulpfile.babel.js 中使用 ES6 的最新語法了。Gulp API
Gulp 的 API 設(shè)計也比較簡單,總共只有四個 gulp.src gulp.dest gulp.task gulp.watch。很少的 API,極大程度上縮減了記憶的成本,但是需要自己配置的內(nèi)容相對而言就多了。
gulp.taskgulp.task 主要是用來定義任務(wù)的。
/** * 作用 : 定義一個任務(wù) * @param {String} name 任務(wù)的名字,不要在任務(wù)名字中出現(xiàn)空格 * @param {Array} deps 可選參數(shù),任務(wù)列表的數(shù)組,是當(dāng)前任務(wù)執(zhí)行前的依賴任務(wù),數(shù)組的元素是任務(wù)名 * @param {Function} fn 定義任務(wù)所要執(zhí)行的一些操作 */ gulp.task(name[, deps], fn)
對于第三個參數(shù),需要說明一下。第三個參數(shù)可以接收一個回調(diào)函數(shù),也可以返回一個 stream。
當(dāng)接收一個回調(diào)函數(shù)的時候,一定要注意回調(diào)函數(shù)中的參數(shù)。
gulp.task("mytask", function (cb) { if (true) { cb(null); // 當(dāng)回調(diào)函數(shù)的參數(shù)是 null 的時候,說明不會存在錯誤 } else { cb("存在錯誤"); // 當(dāng)回調(diào)函數(shù)的參數(shù)不是 null 的時候,這個時候就是產(chǎn)生了錯誤 } });
返回一個 stream 流的時候,一般是通過 gulp 的 API 來獲取的。
gulp.task("mytask", function() { var stream = gulp.src("client/**/*.js") .pipe(gulp.dest("build")); return stream; });gulp.src
gulp.src 主要作用就是用來讀取文件或者文件夾中的數(shù)據(jù)。
/** * 作用 : 讀取數(shù)據(jù)并返回一個流 * @param {String | Array} globs 參數(shù)是文件或者文件夾,支持相對路徑 * @param {Object} options 可選參數(shù),任務(wù)列表的數(shù)組,是當(dāng)前任務(wù)執(zhí)行前的依賴任務(wù),數(shù)組的元素是任務(wù)名 */ gulp.src(globs[, options])
其中 globs 的參數(shù)是 node-glob 模塊 的參數(shù)。詳細(xì)參數(shù)可以到官網(wǎng)查看這個模塊,這里只說明幾個特殊的匹配。
** 用于匹配文件夾,表示 0 個或者多個層級的目錄
* 用于匹配文件名,表示 0 個或者多個字符
! 排除符合規(guī)則的文件,! 一定要放在匹配規(guī)則之前
如果要匹配 src 目錄下的所有 .js 文件,且排除 src 目錄下的所有以下劃線開頭的 .js 文件,就可以寫成下面的形式 :
gulp.src(["./src/**/*.js", "!./src/**/_*.js"])
使用 options.base 可以修改文件的目標(biāo)路徑。在沒有指定該參數(shù)的時候,目標(biāo)路徑是第一個匹配符之前的路徑。
gulp.task("default", function () { // 這個時候會把 ./src/one 替換成 ./build,也可以理解成此時的 options.base 為 ./src/one // 最終 .js 文件所在的路徑就是 ./build/*.js return gulp.src(["./src/one/*.js"]) .pipe(gulp.dest("./build")); });
如果指定了 options.base 參數(shù),那么最終文件所在的路徑就會發(fā)生變化。
gulp.task("default", function () { // 最終 .js 會被拷貝到 ./build/one/*.js 中 return gulp.src(["./src/one/*.js"], { base: "src" }) .pipe(gulp.dest("./build")); });gulp.dest
gulp.dest 用來指定文件最終被寫入的路徑。
/** * 作用 : 讀取數(shù)據(jù)并返回一個流 * @param {String} path 文件的目標(biāo)路徑,這個只能指定文件夾,不能指定文件 * @param {Object} options 可選參數(shù),一般很少使用,這里不再說明 */ gulp.dest(path[, options])
gulp.dest 的簡單使用實例。
gulp.task("default", function () { return gulp.src("./src*.js").pipe(gulp.dest("./build")); });gulp.watch
gulp.watch 用于監(jiān)視文件變化,發(fā)現(xiàn)文件變化,則觸發(fā)某個操作。
/** * 作用 : 監(jiān)視文件變化,發(fā)現(xiàn)文件變化,則觸發(fā)某個操作 * @param {String | Array} glob 一般是匹配文件 * @param {Object} opts 可選參數(shù),一般很少使用,這里不再說明 * @param {Array} tasks 數(shù)組的參數(shù)是任務(wù)的名稱,表示文件變化觸發(fā)一個或多個任務(wù) */ gulp.watch(glob [, opts], tasks)
咱們現(xiàn)在看一個簡單的例子,.js 文件發(fā)生變化的時候,執(zhí)行任務(wù) one。
gulp.task("one", function () { console.log("one..."); }); gulp.task("default", function () { console.log("default ..."); }); gulp.watch("src/**/*.js", ["one"]);
現(xiàn)在有一個需求,當(dāng)某個 .js 文件發(fā)生變化的時候,需要獲取是哪個文件發(fā)生了變化,那么就需要增加監(jiān)聽。
gulp.task("one", function () { console.log("one..."); }); gulp.task("default", function () { console.log("default ..."); }); gulp.watch("src/**/*.js", ["one"]).on("change", function(event) { // event.path 表示文件的名稱 // event.type 指的是發(fā)生的變化 console.log("File " + event.path + " was " + event.type + ", running tasks..."); });使用技巧
Gulp 的進(jìn)一步使用,可以參照中文官網(wǎng)中的 gulp 技巧集。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/92185.html
摘要:在很久之前讀過編程藝術(shù),現(xiàn)在重讀又有新的體會,遂記錄下。唯一沒有被其他元素包含的元素是元素,它是的根元素。是節(jié)點內(nèi)的第一個子節(jié)點,所以將是一個值,應(yīng)該寫成才能得到。操作操作無非是增刪改查,我們先看查和改。 在很久之前讀過JavaScript Dom 編程藝術(shù),現(xiàn)在重讀又有新的體會,遂記錄下。 什么是DOM 對于這種英文縮寫,首先看它的英文全拼--Document Object Mode...
摘要:手冊序言,即,是一種被廣泛應(yīng)用的開源通用腳本語言,尤其適用于開發(fā)并可嵌入中去。該語言的主要目標(biāo)是允許開發(fā)人員快速編寫動態(tài)生成的頁面,但的用途遠(yuǎn)不只于此。對于服務(wù)器模塊版本的,僅在服務(wù)器啟動時讀取一次。 PHP手冊 序言 PHP,即PHP: Hypertext Preprocessor,是一種被廣泛應(yīng)用的開源通用腳本語言,尤其適用于 Web 開發(fā)并可嵌入 HTML 中去。它的語法利用了 ...
摘要:詞法作用域的查找規(guī)則是閉包的一部分。因此的確同閉包息息相關(guān),即使本身并不會真的使用閉包。而上面的創(chuàng)建一個閉包,本質(zhì)上這是將一個塊轉(zhuǎn)換成一個可以被關(guān)閉的作用域。結(jié)合塊級作用域與閉包模塊這個模式在中被稱為模塊。 你不知道的JS(上卷)筆記 你不知道的 JavaScript JavaScript 既是一門充滿吸引力、簡單易用的語言,又是一門具有許多復(fù)雜微妙技術(shù)的語言,即使是經(jīng)驗豐富的 Jav...
摘要:如果提升改變了代碼執(zhí)行的順序,會造成非常嚴(yán)重的破壞。聲明本身會被提升,而包括函數(shù)表達(dá)式的賦值在內(nèi)的賦值操作并不會提升。要注意避免重復(fù)聲明,特別是當(dāng)普通的聲明和函數(shù)聲明混合在一起的時候,否則會引起很多危險的問題 你不知道的JS(上卷)筆記 你不知道的 JavaScript JavaScript 既是一門充滿吸引力、簡單易用的語言,又是一門具有許多復(fù)雜微妙技術(shù)的語言,即使是經(jīng)驗豐富的 Ja...
摘要:如果是聲明中的第一個詞,那么就是一個函數(shù)聲明,否則就是一個函數(shù)表達(dá)式。給函數(shù)表達(dá)式指定一個函數(shù)名可以有效的解決以上問題。始終給函數(shù)表達(dá)式命名是一個最佳實踐。也有開發(fā)者干脆關(guān)閉了靜態(tài)檢查工具對重復(fù)變量名的檢查。 你不知道的JS(上卷)筆記 你不知道的 JavaScript JavaScript 既是一門充滿吸引力、簡單易用的語言,又是一門具有許多復(fù)雜微妙技術(shù)的語言,即使是經(jīng)驗豐富的 Ja...
閱讀 2984·2021-10-19 11:46
閱讀 979·2021-08-03 14:03
閱讀 2934·2021-06-11 18:08
閱讀 2905·2019-08-29 13:52
閱讀 2744·2019-08-29 12:49
閱讀 480·2019-08-26 13:56
閱讀 924·2019-08-26 13:41
閱讀 849·2019-08-26 13:35