Gulp相关常用插件

Gulp相关常用插件

1、gulp-util

gulp常用工具，使用方法如下：

var gutil = require('gulp-util');
 
gutil.log('stuff happened', 'Really it did', gutil.colors.magenta('123'));
 
gutil.replaceExtension('file.coffee', '.js'); // file.js
 
var opt = {
  name: 'todd',
  file: someGulpFile
};
gutil.template('test <%= name %> <%= file.path %>', opt) 

常用方法：

• log(msg...)

记录的内容。 所有以[gulp]等开头。 如果您传递多个参数，它将以空格将它们连接起来。

• colors

chalk的实例

• replaceExtension(path, newExtension)

替换路径中的文件扩展名。 返回新路径。

• isStream(obj)

返回对象是否为Stream

• isBuffer(obj)

返回对象是否为Buffer

• template(string[, data])

这是一个lodash.template函数包装器。 您必须传递有效的gulp文件对象，以便用户可以使用它，否则它将出错。 您不能配置任何定界符。 查看lodash文档以获取更多信息。

• new File(obj)

只是一个Vinyl。

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

Vinyl是描述文件的非常简单的元数据对象。 当您想到文件时，会想到两个属性：路径和内容。 这些是Vinyl对象的主要属性。

文件不一定代表您计算机文件系统中的某些内容。 您在S3，FTP，Dropbox，Box，CloudThingly.io和其他服务上都有文件。 Vinyl可用于描述所有这些来源的文件。

• 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，但不是将文本缓冲到一个字符串中，而是将任何内容缓冲到一个数组中（对于文件对象非常有用）。

返回可以通过管道传输到的流。

流传输到其流结束后，该流将发出一个数据事件。 数据将与传递给回调的数组相同。

回调是可选的，并且接收两个参数：error和data

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

• new PluginError(pluginName, message[, options])

1. pluginName应该是您插件的模块名称
2. 消息可以是字符串或现有错误
3. 默认情况下，不会显示堆栈。 如果您认为堆栈对于错误很重要，则将options.showStack设置为true。
4. 如果您在消息中传递错误消息，则将从中拉出堆栈，否则将创建一个堆栈。
5. 请注意，如果传入自定义堆栈字符串，则需要在消息中包含该消息。
6. 错误属性将包含在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});

待续

2、Yargs

Yargs是一个node.js库，可以尝试解析optstrings

Yargs通过解析参数并生成优雅的用户界面来帮助您构建交互式命令行工具。

它为您提供：

• 命令和（分组的）选项（my-program.js提供--port = 5000）。
• 根据您的参数动态生成的帮助菜单：

mocha [spec..]

Run tests with Mocha

Commands
  mocha inspect [spec..]  Run tests with Mocha                         [default]
  mocha init <path>       create a client-side Mocha setup at <path>

Rules & Behavior
  --allow-uncaught           Allow uncaught errors to propagate        [boolean]
  --async-only, -A           Require all tests to use a callback (async) or
                             return a Promise                          [boolean]

• 命令和选项的bash-completion快捷方式。
• 还有更多

使用：

简单用法：

#!/usr/bin/env node
const yargs = require('yargs/yargs')
const { hideBin } = require('yargs/helpers')
const argv = yargs(hideBin(process.argv)).argv

if (argv.ships > 3 && argv.distance < 53.5) {
  console.log('Plunder more riffiwobbles!')
} else {
  console.log('Retreat from the xupptumblers!')
}
$ ./plunder.js --ships=4 --distance=22
Plunder more riffiwobbles!

$ ./plunder.js --ships 12 --distance 98.7
Retreat from the xupptumblers!

复杂例子：

#!/usr/bin/env node
const yargs = require('yargs/yargs')
const { hideBin } = require('yargs/helpers')

yargs(hideBin(process.argv))
  .command('serve [port]', 'start the server', (yargs) => {
    yargs
      .positional('port', {
        describe: 'port to bind on',
        default: 5000
      })
  }, (argv) => {
    if (argv.verbose) console.info(`start server on :${argv.port}`)
    serve(argv.port)
  })
  .option('verbose', {
    alias: 'v',
    type: 'boolean',
    description: 'Run with verbose logging'
  })
  .argv

使用--help运行以上示例，以查看应用程序的帮助。

对Typescript的支持

TypeScript

使用 @types/yargs.

npm i @types/yargs --save-dev

更多示例，请参照文档

更多示例，请参考yargs的npm文档

3、gulp-webserver

流式gulp插件可通过LiveReload运行本地Web服务器

提示：这个是gulp-connect的重写

安装：

npm install --save-dev gulp-webserver

gulp.src（'root'）参数是Web服务器的根目录。 可能有多个目录。

var gulp = require('gulp');
var webserver = require('gulp-webserver');
 
gulp.task('webserver', function() {
  gulp.src('app')
    .pipe(webserver({
      livereload: true,
      directoryListing: true,
      open: true
    }));
});

具体参数请参照：gulp-webserver

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

EOF