首页 ›  文章

gulp插件解读 - gulp-util(gulp4.0建议弃用)

2019-12-03

知识准备

先了解chalk,什么是chalk

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

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

原文链接:segmentfault.com

上一篇:[JS数据结构]数组链表篇
下一篇:重温Javascript:基本语法
相关文章

首次访问,人机识别验证

扫描下方二维码回复 1024 获取验证码,验证完毕后 永久 无须验证

操作步骤:[打开微信]->[扫描上侧二维码]->[关注 FedJavaScript 的微信] 输入 1024 获取验证码

验证码有误,请重新输入