【问题标题】:How to get output html in different language using gulp-data?如何使用 gulp-data 获取不同语言的输出 html?
【发布时间】:2016-05-12 22:25:38
【问题描述】:

这是我的 gulp 文件

var gulp = require('gulp');
var posthtml = require('gulp-posthtml');
var mjml = require('gulp-mjml');
var nunjucksRender = require('gulp-nunjucks-render');
var data = require('gulp-data');



gulp.task('html', function() {
  var plugins = [
      require('posthtml-lorem')(),
       ];
  // Gets .html and .nunjucks files in pages
  return gulp.src('./pages/**/*.+(html|nunjucks)')
  // Adding data to Nunjucks
  .pipe(data(function() {
    return require('./data.json')
  }))
  // Renders template with nunjucks
  .pipe(nunjucksRender({
      path: ['./helpers/']
    }))
  .pipe(posthtml(plugins))
  .pipe(mjml())
  // output files in app folder
  .pipe(gulp.dest('./dest'))
});

这可能是数据data.json的json文件

{
  "Page title": "hello English"
 }

我想在./dest 文件夹home.htmlhome_de.html 中有两个文件 home.html 应该有英文内容,home_de.html 应该有德文内容。我不想为不同的语言使用不同的源 HTML 模板文件。

将手动添加到数据文件 (.json) 的内容

【问题讨论】:

    标签: json npm internationalization gulp gulp-data


    【解决方案1】:

    Gulp 只是 node.js 的一个简单包装器。通过要求 fs 您可以访问文件系统。然后,您可以遍历不同的语言数据文件并为每个文件呈现 html。这应该可以解决问题,但是这是未经测试的,但是您应该了解要点。

    var fs = require('fs');
    var gulp = require('gulp');
    var posthtml = require('gulp-posthtml');
    var mjml = require('gulp-mjml');
    var nunjucksRender = require('gulp-nunjucks-render');
    var data = require('gulp-data');
    
    
    
    gulp.task('html', function() {
        var plugins = [
           require('posthtml-lorem')(),
        ];
    
        fs.readdir('./languages/',function(err,files){
            if(err) throw err;
                files.forEach(function(file){
                    var language = file.split('.')[0];
                    // Gets .html and .nunjucks files in pages
                    return gulp.src('./pages/**/*.+(html|nunjucks)')
                    // Adding data to Nunjucks
                    .pipe(data(function() {
                        return require('./languages/' + language + '.json')
                    }))
                    // Renders template with nunjucks
                    .pipe(nunjucksRender({
                        path: ['./helpers/']
                    }))
                    .pipe(posthtml(plugins))
                    .pipe(mjml())
                    // output files in app folder
                    .pipe(gulp.dest('./dest/' + language));
            });
        });
    });
    

    【讨论】:

    • 文件夹 /myfiles/ 有什么作用,会有什么?
    • 保存语言 json 文件的约定应该是什么?
    • 用户偏好问题。只需在语言简码后命名它们,如 en.json 和 de.json。至于你如何构造对象,这就是你的全部。快乐编码! ^_^
    • 收到此消息The following tasks did not complete: html [09:53:32] Did you forget to signal async completion??
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2018-10-17
    • 2016-02-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-09
    相关资源
    最近更新 更多