Wrap插件(使用2通过2)输出带有字符串

Question

我想知道如何确切地操纵我的墨西哥湾插件的输出细绳。目前，我不知道最后一个文件是什么时候完成的。

下面的超级简化示例将在3个文件上迭代，并将创建一个名为output.js的新文件，其中将有三倍的字符串xxx（xxxxxxxxxx）。

我想要插件本身包装内容，以便输出将BE：+xxxxxxxxx+。

我该怎么做？谢谢！

Gulpfile

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插件的习惯是。这允许用户使用gulp.src()中的base选项提供自定义基本文件夹。

一旦处理了所有文件through2调用flushFunction。在那里，我们使用提供的fileName创建输出文件（再次确保我们尊重.base属性）。

创建输出文件内容只是使用JSON.stringify()序列化files对象的问题（它们会自动照顾必须完成的任何逃脱）。

由此产生的 ./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

您应该使用Gulp管道技术（标准）。这意味着您可以按顺序使用Gulp-insert软件包添加字符串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'))
});