gulp插件解讀 - gulp-util（gulp4.0建議棄用）

時間 2019-12-28

標籤 gulp 插件解讀 util gulp4.0 建議棄用欄目 JavaScript 简体版

原文原文鏈接

知識準備

先了解chalk，什麼是chalk

chalk [https://github.com/chalk/chalk] 是一個終端字符串顏色顯示
html

chalk用法

安裝

$ npm install chalkgit

常見的用法

基本用法github

const chalk = require('chalk')
console.log(chalk.blue('Hello world!'));

正常字符串組合npm

log(chalk.blue('Hello') + ' World' + chalk.red('!'));

鏈式調用gulp

log(chalk.blue.bgRed.bold('Hello world!'));

鳥巢風格api

log(chalk.red('Hello', chalk.underline.bgBlue('world') + '!'));

多參數傳入數組

log(chalk.blue('Hello', 'World!', 'Foo', 'bar', 'biz', 'baz'));

ES6模板字符串ide

log(`
CPU: ${chalk.red('90%')}
RAM: ${chalk.green('40%')}
DISK: ${chalk.yellow('70%')}
`);

ES6標籤模版字符串oop

log(chalk`
CPU: {red ${cpu.totalPercent}%}
RAM: {green ${ram.used / ram.total * 100}%}
DISK: {rgb(255,131,0) ${disk.used / disk.total * 100}%}
`);

在支持rgb顏色的終端處理器中使用ui

log(chalk.keyword('orange')('Yay for orange colored text!'));
log(chalk.rgb(123, 45, 67).underline('Underlined reddish color'));
log(chalk.hex('#DEADED').bold('Bold gray!'));

樣式api

Modifiers
reset
bold
dim
italic (Not widely supported)
underline
inverse
hidden
strikethrough (Not widely supported)
visible (Text is emitted only if enabled)
Colors
black
red
green
yellow
blue (On Windows the bright version is used since normal blue is illegible)
magenta
cyan
white
gray ("bright black")
redBright
greenBright
yellowBright
blueBright
magentaBright
cyanBright
whiteBright
Background colors
bgBlack
bgRed
bgGreen
bgYellow
bgBlue
bgMagenta
bgCyan
bgWhite
bgBlackBright
bgRedBright
bgGreenBright
bgYellowBright
bgBlueBright
bgMagentaBright
bgCyanBright
bgWhiteBright

gulp-util

log

gutil.log方法與console的區別是：

gutil.log基於chalk的實例，也就是能在終端顯示顏色
gutil.log支持傳入多個參數，打印結果會將多個參數用空格鏈接起來
gutil.log會帶上時間戳

color

能夠爲打印的內容着色

replaceExtension（path, newExtension）

替換路徑中的文件拓展名

isStream(obj)

若是對象是個流，返回true

isBuffer(obj)

若是對象是個二進制數據，返回true

template(string[, data])

和lodash的字符串模版同樣 [https://www.html.cn/doc/lodas...]
gutil.template('test <%= name %> <%= file.path %>', opt)

new File(obj)

就是一個vinly對象

var file = new gutil.File({
  base: path.join(__dirname, './fixtures/'),
  cwd: __dirname,
  path: path.join(__dirname, './fixtures/test.coffee')
});

noop()

返回一個除了傳遞數據，什麼都不作的數據流

// gulp should be called like this :
// $ gulp --type production
gulp.task('scripts', function() {
  gulp.src('src/**/*.js')
    .pipe(concat('script.js'))
    .pipe(gutil.env.type === 'production' ? uglify() : gutil.noop())
    .pipe(gulp.dest('dist/'));
});

buffer(cb)

這相似於es.wait，但它不是將文本緩衝到一個字符串中，而是將任何內容緩衝到一個數組中（這對文件對象很是有用）。
返回能夠經過管道傳遞的流。
在流傳輸到它的流結束後，流將發出一個數據事件。數據將是傳遞給回調的相同數組。
回調是可選的，並接收兩個參數：錯誤和數據

gulp.src('stuff/*.js')
  .pipe(gutil.buffer(function(err, files) {
  
  }));

new PluginError(pluginName, message[, options])

pluginName 指插件的模塊名稱

message 能夠是字符串或現有錯誤。
默認狀況下，不會顯示堆棧。若是您認爲堆棧對您的錯誤很重要，請將options.showStack設置爲true。

若是您在消息中傳遞錯誤，則將從中拉出堆棧，不然將建立一個。
請注意，若是傳入自定義堆棧字符串，則須要包含該消息。

錯誤屬性將包含在err.toString（）中。能夠經過在選項中包含{showProperties：false}來省略。
如下都是可接受的實例化形式：

var err = new gutil.PluginError('test', {
  message: 'something broke'
});
 
var err = new gutil.PluginError({
  plugin: 'test',
  message: 'something broke'
});
 
var err = new gutil.PluginError('test', 'something broke');
 
var err = new gutil.PluginError('test', 'something broke', {showStack: true});
 
var existingError = new Error('OMG');
var err = new gutil.PluginError('test', existingError, {showStack: true});