生成模板与grunt -寻找一个任务

generating templates with grunt - looking for a task

本文关键字：任务 一个 寻找 grunt      更新时间：2023-09-26

我有一个HTML文件，内容如下:

<html>
  <body>
    <span>{{ secret }}</span>
  </body>
</html>

我正在寻找一个grunt任务，可以采取这个源文件，采取值的映射:

grunt.initConfig({
  myTask: {
    myTarget: {
      src: ...
      dest: ...
      values: {
        secret: 'ABC'
      }
    }
  }
})

并生成输出文件:

<html>
  <body>
    <span>ABC</span>
  </body>
</html>

有这样的任务吗?我看到了grunt- moustache -html，但是它强迫很多东西存在，我真的不需要，我不想用它。我想简单地取一个小胡子(或hbs或其他)，用grunt级对象的数据填充它，并将结果转储到另一个HTML文件中，这就是全部。

你可以试试grunt-template，它可以处理low -dash模板。下面是解决问题的基本设置:

//Gruntfile.js
config.template = {
    myTask: {
        options: {
            data: function () {
                return {
                    secret: 'ABC' 
                };
            }
        },
        files: {
            'output.html: ['template.html.tpl']
        }
    }
};
//template.html.tpl
<html>
   <body>
      <span><%= secret %></span>
   </body>
</html>

#1。一种选择是使用grunt.template实用程序(参见lagerone的答案)。使用自定义分隔符，您可以获得非常接近您想要的结果:

grunt.template.addDelimiters('myDelimiters', '{{', '}}');

在这种情况下，你的模板将不得不使用{{= secret }}标签。

# 2 。另一个选择是，你可以总是写你自己的简单任务。在你的例子中，它看起来像这样:

grunt.initConfig({
    myTask: {
        options: {
            data: {
                secret: 'ABC'
            },
            src:  'index.html',
            dest: 'index.output.html'
        }
    }
});
grunt.registerTask('myTask', function() {
    var options = this.options(),
        template = grunt.file.read(options.src);
    var content = template.replace(/'{'{'s*(.*?)'s*'}'}/g, function(a, b) {
        return typeof options.data[b] !== undefined ? options.data[b] : '';
    });
    grunt.file.write(options.dest, content);
});
grunt.registerTask('default', ['myTask']);

我以前使用过grunt-include-replace。很容易使用。在您的gruntfile中，您将创建一个类似于下面的任务(示例取自官方github repo):

grunt.initConfig({
  includereplace: {
    your_target: {
      options: {
      // Task-specific options go here.
      },
  // Files to perform replacements and includes with
  src: '*.html',
  // Destination directory to copy files to
      dest: 'dist/'
    }
  }
})
相关文章：