Question

我正在使用gulp，并且尝试创建将javascript文件中的文件组合在一起的gulp任务。

例如，图片我有这个：

文件template\template1.html：

<h2>some html content</h2>
<p>blah blah blah</p>

文件template\template2.html：

<h2>some other html content</h2>
<img src='cat.png'>

我想读取这些文件并将其合并为一个单独的javascript文件：

const templates = {
    "template1" : "<h2>some html content</h2>\n<p>blah blah blah</p>",
    "template2" : "<h2>some other html content</h2>\n<img src='cat.png'>"
}

export default templates

但是，我在处理gulp管道时失败了（我承认gulp还是很陌生的。）

如何实现我的目标？

现在我尝试玩gulp-trough，但是执行失败：

const gulp = require('gulp');
const through = require('gulp-through');

gulp.task('templates', function () {
    var result = {}
    gulp.src('src/templates/**/*.html')
        .pipe(through('readFile', function(){
            console.log(arguments); // not reached!

        }, defaults));
})

gulp.task('default', ['templates'])

Answer 1

使用through2模块编写自己的插件并不难（如official docs所述。）

// gulpfile.js

const gulp = require('gulp');
const path = require('path');

const through = require('through2'); // npm install --save-dev through2

const toTemplateModule = obj => {
  return [
    `const template = ${JSON.stringify(obj, null, 2)};`,
    '',
    'export default template;'
  ].join('\n');
};

const mergeTemplate = file => {
  const results = {};
  let latestFile;

  return through.obj(
    function(file, encoding, callback) {
      latestFile = file;
      results[path.basename(file.path)] = file.contents.toString(encoding);
      callback(null, file);
    },
    function(callback) {
      const joinedFile = latestFile.clone({
        contents: false
      });
      joinedFile.path = path.join(latestFile.base, file);
      joinedFile.contents = Buffer.from(toTemplateModule(results), 'utf-8');
      this.push(joinedFile);
      callback();
    });
};

gulp.task('templates', () => {
  return gulp
    .src('./src/templates/**/*.html')
    .pipe(mergeTemplate('templates.js'))
    .pipe(gulp.dest('./build'))
});

gulp.task('default', ['templates'])

从本地文件创建JavaScript资源文件

1 个答案: