Question

我想知道如何操作Gulp插件的输出，例如，无论将多少文件传递给插件，它都会用字符串包装输出。目前我不知道最后一个文件何时完成。

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

我希望插件本身包装内容，以便输出是：+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 option提供自定义基本文件夹。

处理完所有文件后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

您应该使用gulp管道技术（标准）。这意味着您可以按顺序使用gulp-insert包添加字符串xxx。

$(document).ready(function() {

    $(".img").click(function() {
        $(this).addClass("visited");
    });
});

function validate() {
    $(".img").each(function() {
        $(this).after($(this).hasClass("visited") ? $(this).next().addClass("fa-check icon") : $(this).next().addClass("fa-times cross"));
        $(".fa").show();

    });
    return true;
}

您也可以使用此软件包进行前置，附加和包装，当然也支持gulp标准。

所以完整的例子将是：

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

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

gulp - 包装插件（使用through2）输出字符串

Gulpfile

最基本的gulp插件（index.js）：

2 个答案: