自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

快速學(xué)習(xí)Gulp并接入到項(xiàng)目中

作者：songEagle
開發(fā) 開發(fā)工具
gulp是一個(gè)自動(dòng)化構(gòu)建工具，主要用來設(shè)定程序自動(dòng)處理靜態(tài)資源的工作。簡單的說，gulp就是用來打包項(xiàng)目的。

[[416090]]

一、gulp定位

gulp是基于流(stream)的自動(dòng)化構(gòu)建工具。

二、初始化

如果之前已經(jīng)全局安裝了 gulp ，請通過運(yùn)行以下命令來刪除舊安裝:

  1. npm rm --global gulp 

然后通過以下命令安裝獨(dú)立的gulp-cli

  1. npm i --global gulp-cli 

為什么廢棄gulp，而改用gulp-cli?

想將cli和gulp進(jìn)行解耦，處理只位于gulp-cli中。目的：

  • 主要是想在減少安全安裝包的大小。
  • 與主包gulp分開，在不影響gulp-cli流程的情況下進(jìn)行g(shù)ulp的功能和bug修復(fù)
  • 為后續(xù)的sips主題，以及向任務(wù)中添加自定義元數(shù)據(jù)和配置文件。

看一下安裝的版本2.x

  1. gulp -v 
  2. CLI version: 2.3.0 
  3. Local version: Unknown 

三、項(xiàng)目中使用gulp

進(jìn)入到項(xiàng)目中，安裝gulp

  1. npm i --save-dev gulp 

執(zhí)行g(shù)ulp -v

  1. chengxinsong$ gulp -v 
  2. CLI version: 2.3.0 
  3. Local version: 4.0.2 

在項(xiàng)目的根目錄下創(chuàng)建gulpfile.js文件，在文件中輸入以下內(nèi)容：

  1. function defaultTask(cb) { 
  2.   cb(); 
  3. } 
  4. exports.default = defaultTask; 

四、gulp基本轉(zhuǎn)化流程

  1. 找到src目錄下的所有js文件
  2. 壓縮這些js文件
  3. 將壓縮js代碼輸出到dist/js目錄下
  1. const gulp = require('gulp'); 
  2. const uglify = require('gulp-uglify'); 
  3. gulp.task('gulpSaucxs', function(done) { 
  4.   gulp.src('src/*.js')   // dist與src在共同目錄下 
  5.   .pipe(uglify()) 
  6.   .pipe(gulp.dest('dist/js'));   // 相對路徑 
  7.   done(); 
  8. }) 

上面代碼中，task方法接收的是任務(wù)代碼，接收的必須有回調(diào)函數(shù)，gulp.src()方法去找src目錄下的js文件，.pipe是接收一個(gè)流的結(jié)果，并返回一個(gè)處理后流的結(jié)構(gòu)，pipe方法中執(zhí)行uglifg()方法用來壓縮js代碼。gulp.dest()方法輸出到指定相對目錄下。done()方法就是回調(diào)函數(shù)執(zhí)行。

  • gulp.task('任務(wù)名'， 回調(diào)函數(shù))，任務(wù)名也是后續(xù)gulp 任務(wù)名，執(zhí)行這個(gè)任務(wù)，回調(diào)函數(shù)中處理這個(gè)任務(wù)需要處理的代碼。
  • src() 方法讀取文件生成一個(gè)Node流(stream)，它將所有匹配的文件讀取到內(nèi)存中并通過流(stream)進(jìn)行處理。
  • Node流(stream)所提供的主要API方法pipe()方法。
  • dest()方法接收一個(gè)輸出目錄作為參數(shù)，將文件內(nèi)容以及文件屬性寫入到指定的目錄中。

我們在src下新建一個(gè)index.js文件，我們來寫最長遞增子序列的方法。

  1. // 最長遞增子序列 
  2. function lis(n) { 
  3.   if (n.length === 0) return 0 
  4.   // 創(chuàng)建一個(gè)和參數(shù)相同大小的數(shù)組，并填充值為 1 
  5.   let array = new Array(n.length).fill(1) 
  6.   // 從索引 1 開始遍歷，因?yàn)閿?shù)組已經(jīng)所有都填充為 1 了 
  7.   for (let i = 1; i < n.length; i++) { 
  8.     for (let j = 0; j < i; j++) { 
  9.       if (n[i] > n[j]) { 
  10.         array[i] = Math.max(array[i], 1 + array[j]) 
  11.       } 
  12.     } 
  13.   } 
  14.   let res = 1 
  15.   for (let i = 0; i < array.length; i++) { 
  16.     res = Math.max(res, array[i]) 
  17.   } 
  18.   return res 
  19. } 

輸出的已經(jīng)通過gulp處理的index.js的方法

我們在與gulpfile.js的同級(jí)目錄下執(zhí)行g(shù)ulp task的名稱

  1. gulp gulpSaucxs 

gulp后面跟著的是任務(wù)的名稱，不輸入任務(wù)名稱的話會(huì)默認(rèn)找default任務(wù)，找不到會(huì)報(bào)錯(cuò)

然后在與src同級(jí)新增dist/js，然后生成壓縮之后index.js文件。

五、逐漸廢棄gulp.task()

官網(wǎng)說是這個(gè)task的API不再是推薦的模式。

那還是簡單提2句，這個(gè)api伴隨著開發(fā)而消失。

  1. gulp.task(name[, deps], fn)  
  • name 為任務(wù)名
  • deps 是當(dāng)前定義的任務(wù)需要依賴的其他任務(wù)，為一個(gè)數(shù)組。當(dāng)前定義的任務(wù)會(huì)在所有依賴的任務(wù)執(zhí)行完畢后才開始執(zhí)行。如果沒有依賴，則可省略這個(gè)參數(shù)
  • fn 為任務(wù)函數(shù)，我們把任務(wù)要執(zhí)行的代碼都寫在里面。該參數(shù)也是可選的。

六、task任務(wù)

每個(gè)gulp任務(wù)task都是一個(gè)異步的js函數(shù)。接收一個(gè)回調(diào)函數(shù)作為參數(shù)，或者是一個(gè)返回 stream，promise，event emitter、child process 或 observable 類型值的函數(shù)。

我們繼續(xù)改寫上面 gulpSaucxs 的任務(wù)。

  1. const gulp = require('gulp'); 
  2. const uglify = require('gulp-uglify'); 
  3. function gulpSaucxs(done) { 
  4.   gulp.src('src/*.js')   // dist與src在共同目錄下 
  5.   .pipe(uglify()) 
  6.   .pipe(gulp.dest('dist/js'));   // 相對路徑 
  7.   done(); 
  8. } 
  9. exports.gulpSaucxs = gulpSaucxs;   // gulpSaucxs函數(shù)被exports導(dǎo)出是公開任務(wù)，可以直接被gulp命令直接調(diào)用。 

導(dǎo)出的 gulpSaucxs 我們可以直接使用gulp命令來執(zhí)行。

  1. gulp gulpSaucxs 

輸出跟最初是一致的。

導(dǎo)出任務(wù)

被gulpfile導(dǎo)出export的任務(wù)為公開任務(wù)，未被導(dǎo)出的任務(wù)會(huì)被認(rèn)為是私有任務(wù)。

還是在剛才的代碼中，我們新增privateTask方法和導(dǎo)出組合任務(wù)。

  1. const gulp = require('gulp'); 
  2. const uglify = require('gulp-uglify'); 
  3. function gulpSaucxs(done) { 
  4.   gulp.src('src/*.js')   // dist與src在共同目錄下 
  5.   .pipe(uglify()) 
  6.   .pipe(gulp.dest('dist/js'));   // 相對路徑 
  7.   done(); 
  8. } 
  9. // 新增的私有任務(wù) 
  10. function privateTask(done) { 
  11.   console.log('hello 「松寶寫代碼」') 
  12. } 
  13. exports.gulpSaucxs = gulpSaucxs;   // gulpSaucxs函數(shù)被exports導(dǎo)出是公開任務(wù)，可以直接被gulp命令直接調(diào)用。 
  14. exports.composeTask = gulp.series(gulpSaucxs, privateTask);  // 導(dǎo)出組合任務(wù) 

上面的代碼中，privateTask 方法就是沒有被直接導(dǎo)出的方法，稱為私有任務(wù);gulpSaucxs 方法是被導(dǎo)出的方法，稱為公共任務(wù)。

私有任務(wù)的設(shè)計(jì)主要是為了內(nèi)部的使用，通常作為gulp.series()和gulp.paralle()組合的組成部分。

這時(shí)候我們執(zhí)行

  1. gulp composeTask 

執(zhí)行結(jié)果

  1. gulp-test chengxinsong$ gulp composeTask 
  2. [16:14:52] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  3. [16:14:52] Starting 'composeTask'... 
  4. [16:14:52] Starting 'gulpSaucxs'... 
  5. [16:14:52] Finished 'gulpSaucxs' after 8.32 ms 
  6. [16:14:52] Starting 'privateTask'... 
  7. hello 「松寶寫代碼」 
  8. [16:14:52] Finished 'privateTask' after 1.21 ms 
  9. [16:14:52] Finished 'composeTask' after 12 ms 

我們看日志，series方法是按照順序執(zhí)行，同步執(zhí)行。

  • 先啟動(dòng)公共任務(wù) composeTask，
  • 開啟 gulpSaucxs 任務(wù)方法
  • 完成 gulpSaucxs 任務(wù)方法
  • 然后8.32毫秒之后
  • 開啟 privateTask 任務(wù)方法
  • 輸出 hello 「松寶寫代碼」
  • 完成 privateTask 任務(wù)方法
  • 然后1.21毫秒之后
  • 完成 公共任務(wù) composeTask，

組合任務(wù)

gulp提供了2個(gè)強(qiáng)大的組合方法：series() 和 parallel()，允許將多個(gè)獨(dú)立的任務(wù)組合為一個(gè)更強(qiáng)大的操作。

特點(diǎn)：

  • 都可以接受任意數(shù)目的任務(wù)Task函數(shù)或者已經(jīng)組合的操作
  • series()方法和parallel()方法 可以相互嵌套任意深度

我們把上面的例子的series方法換成parallel。

  1. const gulp = require('gulp'); 
  2. const uglify = require('gulp-uglify'); 
  3. function gulpSaucxs(done) { 
  4.   gulp.src('src/*.js')   // dist與src在共同目錄下 
  5.   .pipe(uglify()) 
  6.   .pipe(gulp.dest('dist/js'));   // 相對路徑 
  7.   done(); 
  8. } 
  9. // 新增的私有任務(wù) 
  10. function privateTask(done) { 
  11.   console.log('hello 「松寶寫代碼」'); 
  12.   done(); 
  13. } 
  14. exports.gulpSaucxs = gulpSaucxs;   // gulpSaucxs函數(shù)被exports導(dǎo)出是公開任務(wù)，可以直接被gulp命令直接調(diào)用。 
  15. exports.composeTask = gulp.parallel(gulpSaucxs, privateTask);  // 導(dǎo)出組合任務(wù)，以最大的并發(fā)來運(yùn)行 

執(zhí)行

  1. gulp cpmposeTask 

執(zhí)行結(jié)果

  1. chengxinsong$ gulp composeTask 
  2. [18:24:35] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  3. [18:24:35] Starting 'composeTask'... 
  4. [18:24:35] Starting 'gulpSaucxs'... 
  5. [18:24:35] Starting 'privateTask'... 
  6. [18:24:35] Finished 'gulpSaucxs' after 8.24 ms 
  7. hello 「松寶寫代碼」 
  8. [18:24:35] Finished 'privateTask' after 9.71 ms 
  9. [18:24:35] Finished 'composeTask' after 12 ms 

我們可以輸出日志，可以知道parallel方法是并行的執(zhí)行任務(wù)

  • 先啟動(dòng)公共任務(wù) composeTask，
  • 開啟 gulpSaucxs 任務(wù)方法
  • 開啟 privateTask 任務(wù)方法
  • 完成 gulpSaucxs 任務(wù)方法
  • 然后8.24毫秒之后
  • 輸出 hello 「松寶寫代碼」
  • 完成 privateTask 任務(wù)方法
  • 然后9.71毫秒之后
  • 完成 公共任務(wù) composeTask

七、異步執(zhí)行

當(dāng)從任務(wù)(task)中返回 stream、promise、event emitter、child process 或 observable 時(shí)，成功或錯(cuò)誤值將通知 gulp 是否繼續(xù)執(zhí)行或結(jié)束。如果任務(wù)(task)出錯(cuò)，gulp 將立即結(jié)束執(zhí)行并顯示該錯(cuò)誤。

1、返回stream流

  1. const gulp = require('gulp'); 
  2. const uglify = require('gulp-uglify'); 
  3. function streamTask(done) { 
  4.   return gulp.src('src/*.js') 
  5.   .pipe(uglify()) 
  6.   .pipe(gulp.dest('dist/js')); 
  7.   done(); 
  8. } 
  9. exports.streamTask = streamTask; 

輸出：dist/js/index.js

2、返回promise

看一個(gè)返回promise的例子。

  1. const gulp = require('gulp'); 
  2. function promiseTask(done) { 
  3.   Promise.resolve('返回的值'); 
  4.   done(); 
  5. } 
  6. exports.promiseTask = promiseTask; 

輸出：

  1. chengxinsong$ gulp promiseTask 
  2. [19:20:37] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  3. [19:20:37] Starting 'promiseTask'... 
  4. [19:20:37] Finished 'promiseTask' after 1.55 ms 
  5. 返回的值 「松寶寫代碼」公眾號(hào) 

3、返回 eventEmitter 事件發(fā)射器

看一個(gè)返回 eventEmitter 的例子。

  1. // 返回event emitter 
  2. const { EventEmitter } = require('events'); 
  3. function eventEmitterTask(done) { 
  4.   const emitter = new EventEmitter(); 
  5.   setTimeout(() => { 
  6.     emitter.emit('data') 
  7.     console.log(emitter, '松寶寫代碼') 
  8.   }, 500); 
  9.   done(); 
  10. } 
  11. exports.eventEmitterTask = eventEmitterTask; 

執(zhí)行 gulp eventEmitterTask，結(jié)果如下：

  1. chengxinsong$ gulp eventEmitterTask 
  2. [21:42:26] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  3. [21:42:26] Starting 'eventEmitterTask'... 
  4. [21:42:26] Finished 'eventEmitterTask' after 1.77 ms 
  5. EventEmitter { 
  6.   _events: [Object: null prototype] {}, 
  7.   _eventsCount: 0, 
  8.   _maxListeners: undefined, 
  9.   [Symbol(kCapture)]: false 
  10. } 松寶寫代碼 

4、返回 child process 子進(jìn)程

看一個(gè)返回 childProcess 的例子。

  1. // 返回child_process 子進(jìn)程 
  2. const { exec } = require('child_process'); 
  3. function childProcessTask(done) { 
  4.   exec('data'); 
  5.   console.log('松寶寫代碼') 
  6.   done(); 
  7. } 
  8. exports.childProcessTask = childProcessTask; 

執(zhí)行 gulp childProcessTask ，結(jié)果如下：

  1. chengxinsong$ gulp childProcessTask 
  2. [21:48:32] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  3. [21:48:32] Starting 'childProcessTask'... 
  4. 松寶寫代碼 
  5. [21:48:32] Finished 'childProcessTask' after 7.02 ms 

5、返回 RxJS observable 觀察對象

看一個(gè)返回 observable 的例子。

  1. // 返回 observable 觀察對象 
  2. const Observable = require('rx').Observable; 
  3. function observableTask(done) { 
  4.   Observable.return('松寶寫代碼'); 
  5.   console.log('松寶寫代碼') 
  6.   done(); 
  7. } 
  8. exports.observableTask = observableTask; 

執(zhí)行 gulp observableTask ，結(jié)果如下：

  1. chengxinsong$ gulp observableTask 
  2. [21:53:14] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  3. [21:53:14] Starting 'observableTask'... 
  4. 松寶寫代碼 
  5. [21:53:14] Finished 'observableTask' after 2.28 ms 

6、使用 callback 回調(diào)函數(shù)

看一個(gè)使用 callback 回調(diào)函數(shù) 的例子。

如果任務(wù)(task)不返回任何內(nèi)容，則必須使用 callback 來指示任務(wù)已完成。

如需通過 callback 把任務(wù)(task)中的錯(cuò)誤告知 gulp，將 Error 作為 callback 的參數(shù)。

  1. // 返回 callback 回調(diào)函數(shù) 
  2. function callbackTask(done) { 
  3.   console.log('松寶寫代碼') 
  4.   done(new Error('拋出錯(cuò)誤了')); 
  5. } 
  6. exports.callbackTask = callbackTask; 

執(zhí)行 gulp callbackTask 結(jié)果

  1. chengxinsong$ gulp callbackTask 
  2. [21:58:22] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  3. [21:58:22] Starting 'callbackTask'... 
  4. 松寶寫代碼 
  5. [21:58:22] 'callbackTask' errored after 2.09 ms 
  6. [21:58:22] Error: 拋出錯(cuò)誤了 
  7.     at callbackTask 

7、使用 async/await

看一個(gè)使用 async/await 異步函數(shù) 的例子。

可以將任務(wù)(task)定義為一個(gè) async 函數(shù)，它將利用 promise 對你的任務(wù)(task)進(jìn)行包裝。這將允許你使用 await 處理 promise，并使用其他同步代碼。

  1. // 使用 async/await 回調(diào)函數(shù) 
  2. const fs = require('fs'); 
  3. async function asyncTask(done) { 
  4.   const { version } = fs.readFileSync('package.json'); 
  5.   console.log(version, 'version=====') 
  6.   const data = await Promise.resolve('松寶寫代碼'); 
  7.   console.log(data, '松寶寫代碼=========') 
  8.   done(); 
  9. } 
  10. exports.asyncTask = asyncTask; 

執(zhí)行 gulp asyncTask 結(jié)果

  1. chengxinsong$ gulp asyncTask 
  2. [22:26:06] Using gulpfile ~/Desktop/coding/full_stack_knowledge_list/article/gulp/gulp-test/gulpfile.js 
  3. [22:26:06] Starting 'asyncTask'... 
  4. undefined version===== 
  5. 松寶寫代碼 松寶寫代碼========= 
  6. [22:26:06] Finished 'asyncTask' after 2.02 ms 

八、我們來看一個(gè)實(shí)例

比如我們需要

  • 首先清空dist目錄，使用series處理
  • 然后 壓縮css和壓縮js 并行進(jìn)行處理，使用parallel處理
  • 輸出到dist/js和dist/css
  1. // 實(shí)例 
  2. const minifycss = require('gulp-minify-css'); //壓縮css 
  3. const del = require('del'); // 刪除目錄 
  4. // 清空目錄 
  5. function clean(done) { 
  6.   del(['dist/**']); 
  7.   done(); 
  8. } 
  9. // 壓縮css 
  10. function minifyCss(done) { 
  11.   gulp.src('src/*.css') 
  12.   .pipe(minifycss()) 
  13.   .pipe(gulp.dest('dist/css')); 
  14.   done() 
  15. } 
  16. // 壓縮js 
  17. function uglifyJs(done) { 
  18.   gulp.src('src/*.js') 
  19.   .pipe(uglify()) 
  20.   .pipe(gulp.dest('dist/js')); 
  21.   done(); 
  22. } 
  23. exports.exampleGulpTask = gulp.series(clean, gulp.parallel(minifyCss, uglifyJs));   // 執(zhí)行順序 clean => 并行執(zhí)行 css js 壓縮 

 

責(zé)任編輯：姜華 來源： 松寶寫代碼
Gulp項(xiàng)目工具
相關(guān)推薦

2024-05-24 10:01:12

2017-02-13 20:22:42

Android發(fā)布項(xiàng)目jcenter

2022-09-28 07:18:34

服務(wù)限流部署

2022-09-28 09:43:35

服務(wù)限流

2020-03-10 22:01:54

物聯(lián)網(wǎng)安全物聯(lián)網(wǎng)IOT

2024-07-02 08:28:17

開源代碼社區(qū)

2022-07-11 09:36:38

SpringJava開發(fā)

2021-05-10 16:41:19

機(jī)器學(xué)習(xí)人工智能IT

2020-08-17 17:09:01

機(jī)器學(xué)習(xí)技術(shù)人工智能

2019-10-10 14:48:19

深度學(xué)習(xí)人工智能

2019-12-03 09:31:14

編程語言程序員Python

2011-07-22 15:56:18

iPhone Interface Builder

2020-09-23 07:39:59

SpringBoot項(xiàng)目Redis

2017-05-02 08:40:36

機(jī)器學(xué)習(xí)預(yù)處理整理

2017-04-29 10:16:14

機(jī)器學(xué)習(xí)數(shù)據(jù)清洗數(shù)據(jù)整理

2009-10-27 09:35:58

ADSL接入技術(shù)

2009-10-28 10:55:27

2009-10-29 10:48:51

光纖接入技術(shù)

2009-10-30 09:42:39

Internet接入技

2009-10-27 11:34:36

無線接入技術(shù)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)