gulp學習-metamask前端使用

時間 2019-11-20

標籤 gulp 學習 metamask 前端使用欄目 JavaScript 简体版

原文原文鏈接

https://www.gulpjs.com.cn/docs/getting-started/ ，這個是3.9.0版本javascript

後面發現安裝的版本是4.0.0，看下面這個：html

https://github.com/gulpjs/gulp/blob/master/docs/API.mdjava

參考：https://blog.csdn.net/jianjianjianjiande/article/details/79048778?utm_source=copynode

4.0.0更新之處：

新的任務系統（基於 bach，替換掉了原先基於 orchestrator 的任務系統）
移除 gulp.reset
gulp.task 再也不支持三個參數的用法
gulp.task 用字符串註冊的任務必須是直接在命令行中調用的任務
gulp.task 能夠接受單參數語法，這個參數必須是一個命名函數，函數名會被做爲任務名
添加了 gulp.series 和 gulp.parallel 方法用於組合任務
添加了 gulp.tree 方法用於獲取任務樹，傳入 { deep: true } 參數能夠獲得一個 archy 兼容的節點列表
添加了 gulp.registry 方法以定製註冊表。
添加了 gulp.symlink 方法，功能和 gulp.dest 一致，不過是以軟連接的方式
gulp.dest 和 gulp.symlink 方法添加了 dirMode 參數容許對目標目錄更好地控制
gulp.src 接收的文件匹配字符串會順序解釋，因此你能夠寫成這樣 gulp.src([‘.js’, ‘!b.js’, ‘bad.js’])（排除全部以 b 開頭的 JS 文件可是除了 bad.js）
gulp.src 方法添加了 since 選項，篩選在特定時間點以後修改過的文件（用於增量編譯）
將命令行分離出來成爲一個獨立模塊，以便節約帶寬/空間。用 npm install gulp -g 或 npm install gulp-cli -g 均可以安裝命令行，只是 gulp-cli 不包含模塊代碼因此比較小
命令行添加了 –tasks-json 參數，能夠導出整個任務樹以供他用
命令行添加了 –verify 參數用以檢查 package.json 中是否包含黑名單插件

使用gulp的緣由：https://blog.csdn.net/xllily_11/article/details/51320002jquery

gulp 命令行（CLI）文檔

參數標記

gulp 只有你須要熟知的參數標記，其餘全部的參數標記只在一些任務須要的時候使用。git

-v 或 --version 會顯示全局和項目本地所安裝的 gulp 版本號
--require <module path> 將會在執行以前 reqiure 一個模塊。這對於一些語言編譯器或者須要其餘應用的狀況來講來講頗有用。你可使用多個--require
--gulpfile <gulpfile path> 手動指定一個 gulpfile 的路徑，這在你有不少個 gulpfile 的時候頗有用。這也會將 CWD 設置到該 gulpfile 所在目錄
--cwd <dir path> 手動指定 CWD。定義 gulpfile 查找的位置，此外，全部的相應的依賴（require）會從這裏開始計算相對路徑
-T 或 --tasks 會顯示所指定 gulpfile 的 task 依賴樹
--tasks-simple 會以純文本的方式顯示所載入的 gulpfile 中的 task 列表
--color 強制 gulp 和 gulp 插件顯示顏色，即使沒有顏色支持
--no-color 強制不顯示顏色，即使檢測到有顏色支持
--silent 禁止全部的 gulp 日誌

命令行會在 process.env.INIT_CW 中記錄它是從哪裏被運行的。github

入門指南

1.首先生成package.json文件：

npm init

獲得：正則表達式

About to write to /Users/user/gulp-metamask/package.json:

{
  "name": "gulp-metamask",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2. 做爲項目的開發依賴（devDependencies）安裝：

npm install --save-dev gulp

或express

全局安裝 gulp：

npm install --global gulp

3. 在項目根目錄下建立一個名爲 `gulpfile.js` 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
  console.log('hello default');
});

4. 運行 gulp：

返回：npm

userMacBook-Pro:gulp-metamask user$ gulp
[09:56:36] Using gulpfile ~/gulp-metamask/gulpfile.js
[09:56:36] Starting 'default'...
hello default
[09:56:36] The following tasks did not complete: default
[09:56:36] Did you forget to signal async completion?

gulp API

gulp.src(globs[, options])

輸出（Emits）符合所提供的文件匹配模式（glob）或者文件匹配模式的數組（array of globs，[]）的文件。將返回一個 Vinyl files 的 stream 它能夠被 piped 到別的插件中。

參數：

glob 請參考 node-glob 語法或者，你也能夠直接寫文件的路徑。

名稱                                 說明
 *                                　　匹配文件路徑中的0個或多個字符，但不會匹配路徑分隔符，除非路徑分隔符出如今末尾 ** 　　　　　　　　　　　　　　　　　匹配路徑中的0個或多個目錄及其子目錄,須要單獨出現，即它左右不能有其餘東西了。若是出如今末尾，也能匹配文件。 ? 　　　　　　　　　　　　　　　　　匹配文件路徑中的一個字符(不會匹配路徑分隔符) […] 　　　　　　　　　　　　　　　　　匹配方括號中出現的字符中的任意一個，當方括號中第一個字符爲^或!時，則表示不匹配方括號中出現的其餘字符中的任意一個，相似js正則表達式中的用法 !(pattern|pattern|pattern)　　　　　　匹配任何與括號中給定的任一模式都不匹配的 ?(pattern|pattern|pattern) 匹配括號中給定的任一模式0次或1次 +(pattern|pattern|pattern) 匹配括號中給定的任一模式至少1次 *(pattern|pattern|pattern) 匹配括號中給定的任一模式0次或屢次 @(pattern|pattern|pattern) 匹配括號中給定的任一模式1次

　　globs

　　　　類型： String 或 Array

　　　　所要讀取的 glob 或者包含 globs 的數組（當有多種匹配模式時）。

　　options

　　　　類型： Object

　　　　經過 glob-stream 所傳遞給 node-glob 的參數。

　　　　除了 node-glob 和 glob-stream 所支持的參數外，gulp 增長了一些額外的選項參數：

　　　　options.buffer

　　　　　　類型： Boolean 默認值： true

　　　　　　若是該項被設置爲 false，那麼將會以 stream 方式返回 file.contents 而不是文件 buffer 的形式。這在處理一些大文件的時候將會頗有用。**注意：**插件可能並不會實現對 stream 的支持。

　　　　options.read

　　　　　　類型： Boolean 默認值： true

　　　　　　若是該項被設置爲 false，那麼 file.contents 會返回空值（null），也就是並不會去讀取文件。

　　　　options.base：指示根目錄base

　　　　　　類型： String 默認值：將會加在 glob 以前 (請看 glob2base)

　　　　options.since

　　　　　　類型: Date or Number

　　　　　Setting this to a Date or a time stamp will discard any file that have not been modified since the time specified.過濾掉從since指定的時間其沒有被修改的文件

　　　　options.passthrough

　　　　　　Type: Boolean

　　　　　　Default: false

　　　　　　　　If true, it will create a duplex stream which passes items through and emits globbed files.若是爲真，它將建立一個雙工流，經過發出globbed文件來傳遞items

　　　　options.allowEmpty

　　　　　　Type: Boolean

　　　　　　Default: false

　　　　　　　　When true, will allow singular globs to fail to match. Otherwise, globs which are only supposed to match one file (such as ./foo/bar.js) will cause an error to be thrown if they don't match.容許沒有globs被匹配，不然若是沒有被匹配到的時候可能會報錯

舉例說明

如, 請想像一下在本地 client/js/somedir 的目錄中，有一個文件叫 somefile.js ：

var gulp = require('gulp');
var minify = require('gulp-minify');

gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
  console.log('hello default');
});

gulp.src('./client/js/**/*.js') // 匹配 './client/js/somedir/somefile.js' 而且將 `base` 默認解析爲 `./client/js/`
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 寫入 './build/somedir/somefile.js'，將buildbase的部分更改成'./build'，./build將會更換通配符開始以前的那個部分

gulp.src('./client/js/**/*.js', { base: './client' }) //這裏是將base設置爲`./client/`
  .pipe(minify())
  .pipe(gulp.dest('./build'));  // 寫入 './build/js/somedir/somefile.js'

運行前要安裝插件gulp-minify，用於壓縮文件

.min.js爲壓縮事後的版本，文件會小點，傳輸效率快。.js未壓縮版本的，便於debugger調試問題。

npm install --save-dev gulp-minify

運行結果：

userdeMacBook-Pro:gulp-metamask user$ gulp
[10:27:29] Using gulpfile ~/gulp-metamask/gulpfile.js
[10:27:29] Starting 'default'...
hello default
[10:27:29] The following tasks did not complete: default
[10:27:29] Did you forget to signal async completion?

而後查看文件夾能夠看見在相應的位置都生成的文件：

會在dest文件夾出生成一個src文件somefile.js和一個min文件somefile-min.js

下面是minify中可以進行的一些配置，更詳細的信息看https://www.npmjs.com/package/gulp-minify

Options（這裏只舉了三個）

ext An object that specifies output src and minified file extensions.
- src
  
  The suffix string of the filenames that output source files ends with.對輸出的src文件所添加的後綴標識，通常是不添加，就是原來的文件名
- min
  - When string: The suffix string of the filenames that output minified files ends with. 對輸出的min文件所添加的後綴標識，通常默認爲'-min.js'
  - When Array: The regex expressions to be replaced with input filenames. For example: [/\.(.*)-source\.js$/, '$1.js']
exclude

Will not minify files in the dirs. 在這個文件夾下的文件也不進行壓縮

ignoreFiles ：Will not minify files which matches the pattern.知足這個模式的文件不進行壓縮

gulp.src('./client/js/**/*.js', { base: './client' }) //這裏是將base設置爲`./client/`，/**/中間可能有多層目錄
  .pipe(minify({
        ext:{
            src:'-mydebug.js',
            min:'-mymin.js'
        },
        exclude: ['tasks'], //由於/**/中間可能有多層目錄，因此排除對tasks目錄下文件的壓縮
        ignoreFiles: ['.combo.js', '-min.js']
    }))
  .pipe(gulp.dest('./build'));  // 寫入 'build/js/somedir/'

返回可見ignoreFiles: ['.combo.js', '-min.js']沒有成功

這是由於寫的方式沒有寫對，寫成ignoreFiles: ['*.combo.js', '*-min.js']便可，而後就成了：

exclude: ['tasks']是成功的，tasks文件夾下的文件果真沒有壓縮

若是沒有exclude: ['tasks']，得出來的結果是：

gulp.dest(path[, options])

能被 pipe 進來，而且將會寫文件到指定的path上，將從新輸出（emits）全部數據，所以你能夠將它 pipe 到多個文件夾。若是某文件夾不存在，將會自動建立它。上面的例子也可以說明。若是給的路徑是相對路徑，那麼其將根據base來得出相應的path，path將會更換通配符開始以前的那個部分。

注意：gulp.dest()傳入的路徑參數，只能用來指定要生成的文件的目錄，而不能指定生成文件的文件名，它生成文件的文件名使用的是導入到它的文件流自身的文件名，因此生成的文件名是由導入到它的文件流決定的，即便咱們給它傳入一個帶有文件名的路徑參數，而後它也會把這個文件名當作是目錄名，好比：

gulp.src('script/jquery.js')
    .pipe(gulp.dest('dist/foo.js'));
//最終生成的文件路徑爲 dist/foo.js/jquery.js,而不是dist/foo.js

參數：

　　path

　　　　類型： String or Function

　　　　文件將被寫入的路徑（輸出目錄）。也能夠傳入一個函數，在函數中返回相應路徑，這個函數也能夠由 vinyl 文件實例來提供。

　　options

　　　　類型： Object

　　　　options.cwd

　　　　　　類型： String 默認值： process.cwd()

　　　　　　輸出目錄的 cwd 參數，只在所給的輸出目錄是相對路徑時候有效。

　　　　options.mode

　　　　　　類型： String 默認值： 0777

　　　　　　八進制權限字符，用以定義全部在輸出目錄中所建立的目錄的權限。

gulp.task(name[, deps], fn)

定義一個使用 Orchestrator 實現的任務（task）。

參數：

　　name

　　　　任務的名字，若是你須要在命令行中運行你的某些任務，那麼，請不要在名字中使用空格。

　　deps

　　　　類型： Array

　　　　一個包含任務列表的數組，這些任務會在你當前任務運行以前完成。

　　注意： 你的任務是否在這些前置依賴的任務完成以前運行了？請必定要確保你所依賴的任務列表中的任務都使用了正確的異步執行方式：使用一個 callback，或者返回一個 promise 或 stream。

　　fn

　　　　該函數定義任務所要執行的一些操做。一般來講，它會是這種形式：gulp.src().pipe(someplugin())。

　　　　異步任務支持

　　　　任務能夠異步執行，若是 fn 能作到如下其中一點：

　　　　　　接受一個 callback

注意： 默認的，task 將以最大的併發數執行，也就是說，gulp 會一次性運行全部的 task 而且不作任何等待。若是你想要建立一個序列化的 task 隊列，並以特定的順序執行，你須要作兩件事：

給出一個提示，來告知 task 何時執行完畢，
而且再給出一個提示，來告知一個 task 依賴另外一個 task 的完成。

如何實現序列化舉例說明：

var gulp = require('gulp');
var minify = require('gulp-minify');

gulp.task('default',['two','one'], function() {
  // 將你的默認的任務代碼放在這
  console.log('hello default');
});

gulp.task('one',function(){
  //one是一個異步執行的任務
  setTimeout(function(){
    console.log('hello one')
  },5000);
});

//two任務雖然依賴於one任務,但並不會等到one任務中的異步操做完成後再執行
gulp.task('two',['one'],function(){
  console.log('hello two');
});

注意：

運行報錯：AssertionError [ERR_ASSERTION]: Task function must be specified

緣由：Gulp 4.0再也不使用[]的方式來定義deps了，而是改成使用gulp.series() and gulp.parallel()，以下實現序列化的函數：

gulp.series: will run the tasks in order
gulp.parallel: will run the tasks in parallel

舉例：

gulp.task(
  'build',
  gulp.series(
    'clean', //先clean
    gulp.parallel('sass', 'copy-assets', 'ts-compile', 'templates', 'copy-vendor'), //而後這5個task同時
    'index' //再index
  )
);

1.`gulp.series`的例子

var gulp = require('gulp');
var minify = require('gulp-minify');
gulp.task('one',function(){
  //one是一個異步執行的任務
  setTimeout(function(){
    console.log('hello one');
  },5000);
});

//two任務雖然依賴於one任務,但並不會等到one任務中的異步操做完成後再執行
gulp.task('two',gulp.series('one',function(done){
  console.log('hello two');
  done();
}));

gulp.task('default',gulp.series('two','one', function(done) {
  // 將你的默認的任務代碼放在這
  console.log('hello default');
  done()
}));

⚠️出錯，結果只輸出了'one'

userdeMacBook-Pro:gulp-metamask user$ gulp
[14:30:24] Using gulpfile ~/gulp-metamask/gulpfile.js
[14:30:24] Starting 'default'...
[14:30:24] Starting 'two'...
[14:30:24] Starting 'one'...
hello one
[14:30:29] The following tasks did not complete: default, two, one
[14:30:29] Did you forget to signal async completion?

解決：執行回調

var gulp = require('gulp');
var minify = require('gulp-minify');
gulp.task('one',function(done){
  //one是一個異步執行的任務
  setTimeout(function(){
    console.log('hello one');
  },5000);
  done(); //寫在這裏，就表示同步運行到這裏one就結束了，異步函數setTimeout異步運行就行，不用等待，能夠去運行two了
});

//two任務雖然依賴於one任務,但並不會等到one任務中的異步操做完成後再執行
gulp.task('two',gulp.series('one',function(done){
  console.log('hello two');
  done();
}));

gulp.task('default',gulp.series('two','one', function(done) {
  // 將你的默認的任務代碼放在這
  console.log('hello default');
  done()
}));

userdeMacBook-Pro:gulp-metamask user$ gulp
[14:28:56] Using gulpfile ~/gulp-metamask/gulpfile.js
[14:28:56] Starting 'default'... 
[14:28:56] Starting 'two'... 
[14:28:56] Starting 'one'...
[14:28:56] Finished 'one' after 871 μs
[14:28:56] Starting '<anonymous>'...   //不等待異步函數執行完成
hello two
[14:28:56] Finished '<anonymous>' after 355 μs
[14:28:56] Finished 'two' after 2.31 ms
[14:28:56] Starting 'one'...
[14:28:56] Finished 'one' after 295 μs
[14:28:56] Starting '<anonymous>'...
hello default
[14:28:56] Finished '<anonymous>' after 297 μs
[14:28:56] Finished 'default' after 5.03 ms
hello one  //執行了兩遍
hello one

這裏執行兩遍的緣由是上面有個地方寫錯了，'default'和'two'中的'one'重複了，運行時變成one-two-one-default

應該改成：

gulp.task('two',gulp.series('one',function(done){
  console.log('hello two');
  done();
}));

gulp.task('default',gulp.series('two', function(done) {
  console.log('hello default');
  done()
}));

或：

gulp.task('two',function(done){
  console.log('hello two');
  done();
});

gulp.task('default',gulp.series('two','one',function(done) {
  console.log('hello default');
  done()
}));

若是咱們想要讓two等待one的異步執行結束後再開始的話，應該怎麼作：

1）

var gulp = require('gulp');
var minify = require('gulp-minify');
gulp.task('one',function(done){
  setTimeout(function(){
    console.log('hello one');
    done(); //而不是寫在最後，等待執行異步函數後才表示one執行完成，能夠去執行two
  },5000);
});

gulp.task('two',gulp.series('one',function(done){
  console.log('hello two');
  done();
}));

gulp.task('default',gulp.series('two', function(done) {
  console.log('hello default');
  done()
}));

userdeMacBook-Pro:gulp-metamask user$ gulp
[14:50:50] Using gulpfile ~/gulp-metamask/gulpfile.js
[14:50:50] Starting 'default'...
[14:50:50] Starting 'two'...
[14:50:50] Starting 'one'...
hello one
[14:50:55] Finished 'one' after 5.01 s
[14:50:55] Starting '<anonymous>'...
hello two
[14:50:55] Finished '<anonymous>' after 509 μs
[14:50:55] Finished 'two' after 5.01 s
[14:50:55] Starting '<anonymous>'...
hello default
[14:50:55] Finished '<anonymous>' after 307 μs
[14:50:55] Finished 'default' after 5.01 s

2）定義任務時返回一個流對象。適用於任務就是操做gulp.src獲取到的流的狀況：

var gulp = require('gulp');
var minify = require('gulp-minify');


gulp.task('one',function(){
  var stream = gulp.src('./client/**/*.js')
      .pipe(minify()) //dosomething()中有某些異步操做
      .pipe(gulp.dest('./build1'));
    return stream;
});

gulp.task('two',gulp.series('one',function(done){
  console.log('hello two');
  done();
}));

gulp.task('default',gulp.series('two', function(done) {
  console.log('hello default');
  done()
}));

3)返回一個promise對象

var gulp = require('gulp');
var Q = require('q'); //一個著名的異步處理的庫 https://github.com/kriskowal/q
gulp.task('one',function(){
  var deferred = Q.defer();
  // 作一些異步操做
  setTimeout(function() {
     deferred.resolve();
     console.log('hello one');
  }, 5000);
  return deferred.promise;
});

gulp.task('two',gulp.series('one',function(done){
  console.log('hello two');
  done();
}));

gulp.task('default',gulp.series('two', function(done) {
  console.log('hello default');
  done()
}));

userdeMacBook-Pro:gulp-metamask user$ gulp
[15:00:54] Using gulpfile ~/gulp-metamask/gulpfile.js
[15:00:54] Starting 'default'...
[15:00:54] Starting 'two'...
[15:00:54] Starting 'one'...
hello one
[15:00:59] Finished 'one' after 5.01 s
[15:00:59] Starting '<anonymous>'...
hello two
[15:00:59] Finished '<anonymous>' after 428 μs
[15:00:59] Finished 'two' after 5.01 s
[15:00:59] Starting '<anonymous>'...
hello default
[15:00:59] Finished '<anonymous>' after 297 μs
[15:00:59] Finished 'default' after 5.01 s

2.下面是gulp.parallel的例子：

var gulp = require('gulp');
var minify = require('gulp-minify');

gulp.task('one', function(done) {
  // do stuff
  // setTimeout(function(){
  //   console.log('hello one')
  // },5000);
  console.log('hello one');
  done();
});

gulp.task('two', function(done) {
  // do stuff
  console.log('two');
  done();
});

gulp.task('default', gulp.parallel('two', 'one', function(done) {
  // do more stuff
  console.log('default');
  done();
}));

userdeMacBook-Pro:gulp-metamask user$ gulp
[14:20:12] Using gulpfile ~/gulp-metamask/gulpfile.js
[14:20:12] Starting 'default'...
[14:20:12] Starting 'two'...
[14:20:12] Starting 'one'... //two，one同時開始
[14:20:12] Starting '<anonymous>'...
two
[14:20:12] Finished 'two' after 1.01 ms
hello one
[14:20:12] Finished 'one' after 1.35 ms
default
[14:20:12] Finished '<anonymous>' after 1.46 ms
[14:20:12] Finished 'default' after 3.4 ms

監視文件，而且能夠在文件發生改動時候作一些事情。它總會返回一個 EventEmitter 來發射（emit） change 事件。

gulp.watch(glob[, opts], tasks)

　　glob

　　　　類型： String or Array

　　　　一個 glob 字符串，或者一個包含多個 glob 字符串的數組，用來指定具體監控哪些文件的變更，規則和用法與gulp.src()方法中的glob相同。

　　opts

　　　　類型： Object

　　　　傳給 gaze 的參數，爲一個可選的配置對象，一般不須要用到。

　　tasks

　　　　類型： Array

　　　　須要在文件變更後執行的一個或者多個經過 gulp.task() 建立的 task 的名字

舉例：

var gulp = require('gulp');
var minify = require('gulp-minify');

gulp.task('one', function(done) {
  console.log('hello one');
  done();
});

gulp.task('two', function(done) {
  console.log('two');
  done();
});
gulp.task('default', gulp.parallel('one', 'two',function(done) {
  console.log('default');
  done();
}));

var watcher = gulp.watch('./client/js/**/*.js',gulp.parallel('default'));//這個是須要在監測變化的同時進行某些task任務操做
watcher.on('change', function(path, stats) {
  console.log('File ' + path + ' was changed');
});

gulp.src('./client/js/**/*.js') // 匹配 'client/js/somedir/somefile.js' 而且將 `base` 默認解析爲 `./client/js/`
  .pipe(minify())
  .pipe(gulp.dest('./build2'));  // 寫入 'build/somedir/somefile.js'，由於build更改的base的部分

結果一直只有task在運行，watcher.on沒有反應，不知道爲何？？？？？？：

userdeMacBook-Pro:gulp-metamask user$ gulp
[15:34:17] Using gulpfile ~/gulp-metamask/gulpfile.js
[15:34:17] Starting 'default'...
[15:34:17] Starting 'one'...
[15:34:17] Starting 'two'...
[15:34:17] Starting '<anonymous>'...
hello one
[15:34:17] Finished 'one' after 1.28 ms
two
[15:34:17] Finished 'two' after 1.65 ms
default
[15:34:17] Finished '<anonymous>' after 1.88 ms
[15:34:17] Finished 'default' after 4.01 ms

gulp.lastRun(taskName, [timeResolution])

Returns the timestamp of the last time the task ran successfully. The time will be the time the task started. Returns undefined if the task has not run yet.

返回上一次運行成功task的時間戳，是task開始的時間，若是task沒有被運行過，就返回undefined。

taskName：task的名字

Type: String

The name of the registered task or of a function.

timeResolution：返回的時間戳的精度

Type: Number.

Default: 1000 on node v0.10, 0 on node v0.12 (and iojs v1.5).

Set the time resolution of the returned timestamps. Assuming the task named "someTask" ran at 1426000004321:

gulp.lastRun('someTask', 1000) would return 1426000004000.
gulp.lastRun('someTask', 100) would return 1426000004300.

舉例說明：

var gulp = require('gulp');
gulp.task('two', function(done) {
  console.log('two');
  done();
});
gulp.task('default', gulp.parallel('two', function(done) {
  console.log('default');
  done();
}));
console.log(gulp.lastRun('two',1000));
console.log(gulp.lastRun('two',100));
console.log(gulp.tree());

userdeMacBook-Pro:gulp-metamask user$ gulp
undefined //不是預期的值
undefined
{ label: 'Tasks', nodes: [ 'two', 'default' ] } //獲得運行時的任務樹
[16:00:08] Using gulpfile ~/gulp-metamask/gulpfile.js
[16:00:08] Starting 'default'...
[16:00:08] Starting 'two'...
[16:00:08] Starting '<anonymous>'...
two
[16:00:08] Finished 'two' after 976 μs
default
[16:00:08] Finished '<anonymous>' after 1.35 ms
[16:00:08] Finished 'default' after 3.11 ms

有時會出現錯誤：AssertionError [ERR_ASSERTION]: Only functions can check lastRun

那麼將gulp.lastRun('two',1000)寫入函數中就成功了：

var gulp = require('gulp');
gulp.task('two', function(done) {
  console.log('two');
  done();
});
gulp.task('default', gulp.parallel('two', function(done) {
  console.log('default');
  console.log(gulp.lastRun('two',1000));
  console.log(gulp.lastRun('two',100));
  done();
}));

才能獲得：

userdeMacBook-Pro:gulp-metamask user$ gulp
[16:02:11] Using gulpfile ~/gulp-metamask/gulpfile.js
[16:02:11] Starting 'default'...
[16:02:11] Starting 'two'...
[16:02:11] Starting '<anonymous>'...
two
[16:02:11] Finished 'two' after 763 μs
default
1538294531000
1538294531800
[16:02:11] Finished '<anonymous>' after 2.11 ms
[16:02:11] Finished 'default' after 3.98 ms

gulp.tree(options)

var gulp = require('gulp');
var minify = require('gulp-minify');

gulp.task('one', function(done) {
  console.log('hello one');
  done();
});

gulp.task('two', function(done) {
  console.log('two');
  done();
});
gulp.task('default', gulp.parallel('one', 'two',function(done) {
  console.log('default');
  done();
}));

console.log(gulp.tree());//探測運行時的任務樹

userdeMacBook-Pro:gulp-metamask user$ gulp
{ label: 'Tasks', nodes: [ 'one', 'two', 'default' ] } //
[15:50:27] Using gulpfile ~/gulp-metamask/gulpfile.js
[15:50:27] Starting 'default'...
[15:50:27] Starting 'one'...
[15:50:27] Starting 'two'...
[15:50:27] Starting '<anonymous>'...
hello one
[15:50:27] Finished 'one' after 1.2 ms
two
[15:50:27] Finished 'two' after 1.66 ms
default
[15:50:27] Finished '<anonymous>' after 1.87 ms
[15:50:27] Finished 'default' after 3.96 ms

gulp.tree({deep:true})

var gulp = require('gulp');
gulp.task('two', function(done) {
  console.log('two');
  done();
});
gulp.task('default', gulp.parallel('two', function(done) {
  console.log('default');
  done();
}));
console.log(gulp.tree({deep:true}));

userdeMacBook-Pro:gulp-metamask user$ gulp
{ label: 'Tasks',
  nodes:
   [ { label: 'two', type: 'task', nodes: [] },
     { label: 'default', type: 'task', nodes: [Array] } ] }
[16:07:29] Using gulpfile ~/gulp-metamask/gulpfile.js
[16:07:29] Starting 'default'...
[16:07:29] Starting 'two'...
[16:07:29] Starting '<anonymous>'...
two
[16:07:29] Finished 'two' after 758 μs
default
[16:07:29] Finished '<anonymous>' after 1.08 ms
[16:07:29] Finished 'default' after 2.69 ms

gulp.registry([registry])定製註冊表

Get or set the underlying task registry. Inherited from undertaker; see the undertaker documention on registries. Using this, you can change registries that enhance gulp in different ways. Utilizing a custom registry has at least three use cases:

Sharing tasks
Sharing functionality (e.g. you could override the task prototype to add some additional logging, bind task metadata or include some config settings.)
Handling other behavior that hooks into the registry lifecycle (see gulp-hub for an example)

To build your own custom registry see the undertaker documentation on custom registries.

參數：

registry

一個註冊表實例。當傳入時，當前註冊中心的任務將轉移到新的註冊中心，而後將用新的註冊中心替換當前註冊中心

Example（沒有本身進行測試）

This example shows how to create and use a simple custom registry to add tasks.

 
  //gulpfile.js
var gulp = require('gulp');

var companyTasks = require('./myCompanyTasksRegistry.js');

gulp.registry(companyTasks);

gulp.task('one', gulp.parallel('someCompanyTask', function(done) {
  console.log('in task one');
  done();
})); 
 

//myCompanyTasksRegistry.js
var util = require('util');

var DefaultRegistry = require('undertaker-registry');

function MyCompanyTasksRegistry() {
  DefaultRegistry.call(this);
}
util.inherits(MyCompanyTasksRegistry, DefaultRegistry);

MyCompanyTasksRegistry.prototype.init = function(gulp) {
  gulp.task('clean', function(done) {
    done();
  });
  gulp.task('someCompanyTask', function(done) {
    console.log('performing some company task.');
    done();
  });
};

module.exports = new MyCompanyTasksRegistry();

gulp.symlink(folder[, options])與gulp.dest類似，但其爲軟鏈接，沒有測試

Functions exactly like gulp.dest, but will create symlinks instead of copying a directory.

folder

Type: String or Function

A folder path or a function that receives in a file and returns a folder path.

options

Type: Object

options.cwd

Type: String

Default: process.cwd()

cwd for the output folder, only has an effect if provided output folder is relative.

options.dirMode

Type: String or Number

Default: Default is the process mode.

Octal permission specifying the mode the directory should be created with: e.g. "0755", 0755 or 493 (0755 in base 10).

上面簡單地瞭解了gulp的API，若是要更深刻的學習能夠看看https://blog.csdn.net/c_kite/article/details/73165427學習一下插件的使用，這部份內容以後再補充

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

gulp學習-metamask前端使用

4.0.0更新之處：

gulp 命令行（CLI）文檔

參數標記

入門指南

1.首先生成package.json文件：

2. 做爲項目的開發依賴（devDependencies）安裝：

全局安裝 gulp：

3. 在項目根目錄下建立一個名爲 gulpfile.js 的文件：

4. 運行 gulp：

gulp API

gulp.src(globs[, options])

globs

options

options.buffer

options.read

options.base：指示根目錄base

options.since

options.passthrough

options.allowEmpty

Options（這裏只舉了三個）

gulp.dest(path[, options])

path

options

options.cwd

options.mode

gulp.task(name[, deps], fn)

name

deps

fn

異步任務支持

接受一個 callback

1.gulp.series的例子

2.下面是gulp.parallel的例子：

gulp.watch(glob[, opts], tasks)

glob

opts

tasks

gulp.lastRun(taskName, [timeResolution])

taskName：task的名字

timeResolution：返回的時間戳的精度

gulp.tree(options)

gulp.registry([registry])定製註冊表

registry

Example（沒有本身進行測試）

gulp.symlink(folder[, options])與gulp.dest類似，但其爲軟鏈接，沒有測試

folder

options

options.cwd

options.dirMode

3. 在項目根目錄下建立一個名爲 `gulpfile.js` 的文件：

　　globs

　　options

　　　　options.buffer

　　　　options.read

　　　　options.base：指示根目錄base

　　　　options.since

　　　　options.passthrough

　　　　options.allowEmpty

　　path

　　options

　　　　options.cwd

　　　　options.mode

　　name

　　deps

　　fn

　　　　異步任務支持

　　　　　　接受一個 callback

1.`gulp.series`的例子

　　glob

　　opts

　　tasks