gulp學習-metamask前端使用

本文轉載自查看原文 2018-09-30 16:45 1028 metamask/ gulp

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

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

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

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

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/51320002

gulp 命令行（CLI）文檔

參數標記

gulp 只有你需要熟知的參數標記，其他所有的參數標記只在一些任務需要的時候使用。

-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 中記錄它是從哪里被運行的。

入門指南

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

或

全局安裝 gulp：

npm install --global gulp

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

var gulp = require('gulp');

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

4. 運行 gulp：

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
學習一下插件的使用，這部分內容之后再補充

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 metamask的使用初探nodejs，學習使用gulp管理前端文件使用gulp構建你的前端項目【gulp】前端自動化工具---gulp的使用（一）------【巷子】使用metamask錢包前端scss的使用及gulp發布方式前端構建工具gulp使用使用gulp來構建一個前端項目 MetaMask安裝使用指南前端模塊化開發學習之gulp&browserify篇

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