包插件(它使用through2)输出的字符串

Question

我想知道如何准确地操作我的Gulp插件的输出，因此，例如，不管有多少文件被传递给插件，它都会用一个字符串包装输出。目前，我无法知道最后一个文件是什么时候完成的。

下面这个超级简化的示例将迭代3个文件，并创建一个名为output.js的新文件，其中字符串xxx (xxxxxxxxx)将是字符串的三倍。

我希望插件本身包装内容，以便输出为：+xxxxxxxxx+。

我该怎么做？谢谢!

格尔普文件

var gulp        = require('gulp');
var concat      = require('gulp-concat');
var foo         = require('./index');

gulp.task('default', function() {
    gulp.src([a.html, b.html, c.html])
        .pipe(foo())
        .pipe(concat('output.js'))
        .pipe(gulp.dest('./test/output'))
});

最基本的gulp插件(index.js)：

var through2 = require('through2'),
    gutil    = require('gulp-util');

var PLUGIN_NAME = 'foo';

module.exports = function( options ){
    // through2.obj(fn) is a convenience wrapper around
    // through2({ objectMode: true }, fn)
    return through2.obj(function( file, enc, callback ){
        file.contents = new Buffer( 'xxx' );

        this.push(file);
        callback();
    });
}

我知道当前文件只是简单地被修改了，但是我不理解的是如何附加文本并返回我想要的连接结果，同时让它与Gulp工作标准保持一致。

“真正的”插件实际上应该用以下方式包装文件结果：

var foo = { FILES_CONTENT }

其中，FILES_CONTENT实际上是所有文件的级联字符串：

"file_name" : "file_content",
"file_name" : "file_content",
...

Answer 1

我将对您的gulpfile.js做以下更改

var gulp        = require('gulp');
var foo         = require('./index.js');

gulp.task('default', function() {
   return gulp.src(['a.html', 'b.html', 'c.html'])
     .pipe(foo({fileName:'output.js', varName:'bar'}))
     .pipe(gulp.dest('./test/output'))
});

由于您的foo()插件本身将连接所有文件，因此根本不需要使用gulp-concat。相反，您的插件应该接受一个选项fileName，它提供生成文件的名称。我还添加了另一个选项varName，它将在输出文件中提供var的名称。

我假设a.html、b.html和c.html是简单的HTML文件，如下所示：

<h1 class="header">a</h1>

正如您已经意识到的，您需要连接插件本身中的所有文件。但是，这并不困难，也不需要大量代码。下面是一个index.js，它正是这样做的：

var through2 = require('through2'),
    gutil    = require('gulp-util'),
    path     = require('path'),
    File     = require('vinyl');

var PLUGIN_NAME = 'foo';

module.exports = function(options) {
  var files = { };
  var outputFile = null;
  return through2.obj(function(file, enc, callback){
    outputFile = outputFile || file;
    var filePath = path.relative(file.base, file.path);
    files[filePath] = file.contents.toString();
    callback();
  }, function(callback) {
    outputFile = outputFile ? outputFile.clone() : new File();
    outputFile.path = path.resolve(outputFile.base, options.fileName);
    outputFile.contents = new Buffer(
      'var ' + options.varName + ' = ' +
      JSON.stringify(files, null, 2) + ';'
    );
    this.push(outputFile);
    callback();
  });
}

由于您希望输出从文件名到文件内容的键/值映射，所以我们的transformFunction只将这两个东西存储在一个常规的JavaScript对象files中。没有发出任何输入文件。他们的名字和内容只是储存，直到我们所有的。

唯一棘手的部分是确保我们尊重每个文件的.base属性，这是吞咽插件的习惯。这允许用户使用选项中的gulp.src()提供自定义基本文件夹。

处理完所有文件后，through2调用flushFunction。在这里，我们使用提供的fileName创建输出文件(再次确保尊重.base属性)。

然后，创建输出文件内容只需使用files序列化我们的JSON.stringify()对象(这将自动处理必须执行的任何转义操作)。

生成的./test/output/output.js将如下所示：

var bar = {
  "a.html": "<h1 class=\"header\">a</h1>\n",
  "b.html": "<h1 class=\"header\">b</h1>\n",
  "c.html": "<h1 class=\"header\">c</h1>\n"
};

Answer 2

你应该使用吞咽管道技术(标准)。这意味着您可以使用吞口插入包来添加字符串xxx。

var insert = require('gulp-insert');

.pipe(insert.append('xxx')); // Appends 'xxx' to the contents of every file

您还可以使用此包进行预置、附加和包装，当然，它支持gulp标准。

因此，完整的例子将是：

var gulp        = require('gulp');
var concat      = require('gulp-concat');
var foo         = require('./index');
var insert      = require('gulp-insert');
gulp.task('default', function() {
    gulp.src([a.html, b.html, c.html])
        .pipe(foo()
        .pipe(insert.append('xxx'))
        .pipe(concat('output.js'))
        .pipe(gulp.dest('./test/output'))
});