gulp插件解读 - gulp-util（gulp4.0建议弃用）

知识准备

先了解chalk，什么是chalk

chalk [https://github.com/chalk/chalk] 是一个终端字符串颜色显示

chalk用法

安装

$ npm install chalk

常见的用法

基本用法

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

正常字符串组合

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

链式调用

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

鸟巢风格

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

多参数传入

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

ES6模板字符串

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

ES6标签模版字符串

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

在支持rgb颜色的终端处理器中使用

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的区别是：

1. gutil.log基于chalk的实例，也就是能在终端显示颜色
2. gutil.log支持传入多个参数，打印结果会将多个参数用空格连接起来
3. 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});

gulp-util的迁移方案

原文地址： https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5https://www.npmjs.com/package/fancy-log

使用这些步骤，您可以帮助插件作者从gulp-util迁移。
运行npm ls gulp-util以获取依赖于它的插件列表。
对于每个依赖插件，运行npm issues {PLUGIN NAME}将打开他们的带有解决方案的issues。

为了删除并替换gulp-util，使用以下API替换打开问题或拉取请求：

gutil.File => https://www.npmjs.com/package...
gutil.replaceExtension => The .extname property on Vinyl objects or https://www.npmjs.com/package...
gutil.colors => https://www.npmjs.com/package...
gutil.date => https://www.npmjs.com/package...
gutil.log => https://www.npmjs.com/package...
gutil.template => https://www.npmjs.com/package...
gutil.env => https://www.npmjs.com/package...
gutil.beep => https://www.npmjs.com/package...
gutil.noop => https://www.npmjs.com/package...
gutil.isStream => Use the .isStream() method on Vinyl objects
gutil.isBuffer => Use the .isBuffer() method on Vinyl objects
gutil.isNull => Use the .isNull() method on Vinyl objects
gutil.linefeed => Use the string 'n' in your code
gutil.combine => https://www.npmjs.com/package...
gutil.buffer => https://www.npmjs.com/package...
gutil.PluginError => https://www.npmjs.com/package...