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

原文链接:segmentfault.com

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

相关推荐

  • 🔥插件开发如此简单!

    本文使用的WebpackQuicklyStarter快速搭建 Webpack4 本地学习环境。 建议多阅读 Webpack 文档《Writing a Plugin》章节,学习开发简单插件。

    4 个月前
  • 魔力的一页大屏flash插件直播

    项目搭建 原有的项目是用的layuijq搭建。现在将大屏部分独立出来; 开心到飞起,哈哈哈 现在大屏单独出来做,我采用了react reactmobx; 选用react的原因是,对react比...

    2 天前
  • 页面CPU和内存占用监控可视化Chrome插件-Graph Process

    写这个插件的原因是最近要对比一下页面的 cpu 和内存占用的性能,本来是想找看看有没有什么软件能够去可视化一下当前标签页的cpu和内存占用,但是发现却找不到这种软件,mac 上有个活动监视器,但是当...

    9 个月前
  • 限制上传文件大小和格式的jQuery插件实例

    本文实例讲述了限制上传文件大小和格式的jQuery插件。分享给大家供大家参考。具体分析如下: 在客户端上传文件,通常需要限制文件的尺寸和格式,最常用的做法是使用某款插件,一些成熟的插件的确界面好...

    5 年前
  • 针对angular分页插件tm.pagination二次触发问题三种解决方案

    今天在开发个人博客的时候,需要对列表进行分页操作,因为整体使用的是AngularJs,所以分页插件也就选择了AngularJs pagination.js。可是在调试的时候发现的非常恶心的事情,在加载...

    9 个月前
  • 还在用字体图标吗,试试svg图标吧(内附vuecli-svg-sprite-loader插件)

    前言,关于字体图标 ​相信每位前端童鞋都对字体图标不陌生,毕竟网页必然少不了用大量的图标来装饰页面效果。在很早的时候,我们一般都是用img来当作图标来使用,由于大量地使用img会造成http请求过多的...

    2 个月前
  • 还在手写 css? css自动生成插件了解一下

    效果图 插件效果图(/public/upload/71cf2128f89f97851449469d32a06f90) 如何使用 github 地址 安装依赖 代码提示 如需提示 可...

    22 天前
  • 轻量级网页遮罩层jQuery插件用法实例

    本文实例讲述了轻量级网页遮罩层jQuery插件用法。分享给大家供大家参考。具体如下: 使用jQuery的好处是很多人为它写一些组件,而在项目所需用到功能也都可以找到一些组件去完成。

    3 年前
  • 轻量的纯 JavaScript 动态提示工具插件库

    Tippy.js Tippy.js是一款轻量级的纯js tooltip工具提示插件。该tooltip插件功能强大,提供多种动画效果和主题效果,并允许用户自定义tooltip主题和使用html代码作为t...

    5 个月前
  • 贴近用户体验的Jquery日期、时间选择插件

    分享一款贴近Jquery日期、时间选择插件。这是一款双日历jQuery日期选择时间插件pickerDateRange。效果图如下: (https://img.javascriptcn.com/5...

    3 年前

官方社区

扫码加入 JavaScript 社区