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

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});

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...