2

これは実際には2つの質問です...

Node.js を使用してコンパイルするために、複数の JSON ファイルをプルしたい単一の SWIG テンプレート (index.html) があります。そのページにのみ関連する変数を含む「index.json」ファイル、次にシステム全体で使用したい一連の共通変数を含む「common.json」ファイル。

また、「index.html」内に「header.html」テンプレートと「footer.html」テンプレートがあります。それぞれ独自の「header.json」ファイルと「footer.json」ファイルをそれぞれ取得するにはどうすればよいですか?

最終的には、プロジェクトの残りの部分で常に GULP プロセスを実行しているため、GULP-SWIG 内でこれをすべて機能させようとしています。

更新: GULP-SWIG は自動的に同じ名前の JSON ファイルを探して処理しますが、追加の JSON ファイルを含めることに関するドキュメントはありません。

私はこのようにしてみました：

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var swig = require('gulp-swig');

// Swig Variables
var common = require('./json/common.json');   //   <--- NEW CODE
var optEng = {
    load_json: true,
    json_path: 'json/',
    data: {
        locale: 'en_US',
        currencyval: 'USD'
    }
};

// Tasks
gulp.task('swig-eng', function() {
    gulp.src('templates/*.html')
        .pipe(swig(common))   //   <--- NEW CODE
        .pipe(swig(optEng))
        .pipe(gulp.dest('./compiled/'));
});

gulp.task('watch', function() {
    gulp.watch('templates/*.html', ['swig-eng']);
    gulp.watch('includes/*.html', ['swig-eng']);
    gulp.watch('json/*.json', ['swig-eng']);
});

gulp.task('build', ['swig-eng', 'watch']);

そして、私はこのように試しました：

// Include gulp
var gulp = require('gulp');

// Include Our Plugins
var swig = require('gulp-swig');

// Swig Variables
var optEng = {
    common: require('./json/common.json'),   //   <--- NEW CODE
    load_json: true,
    json_path: 'json/',
    data: {
        locale: 'en_US',
        currencyval: 'USD'
    }
};

// Tasks
gulp.task('swig-eng', function() {
    gulp.src('templates/*.html')
        .pipe(swig(optEng))
        .pipe(gulp.dest('./compiled/'));
});

gulp.task('watch', function() {
    gulp.watch('templates/*.html', ['swig-eng']);
    gulp.watch('includes/*.html', ['swig-eng']);
    gulp.watch('json/*.json', ['swig-eng']);
});

gulp.task('build', ['swig-eng', 'watch']);

必要なファイル構造を含む ZIP ファイルを作成しました: https://www.dropbox.com/s/psxsdn31rd5177h/Gulp-Swig%20Sample.zip

gulpfile.js ファイルは、更新が必要な唯一のファイルです。

4

2 に答える 2

3

require彼ら

jsonファイルだけrequireをローカル変数としてswigに渡すことができます

swig.renderFile('/path/to/template.html', {
    common: require('path/to/your/common.json'),
    index: require('path/to/your/index.json')
    // etc
});

仮にあなたが...

ヘッダーとフッターのテンプレートをパーシャルとして「含める」、つまり

index.swig.html

{# ... #}
{% include "header.swig.html" %}
{# ... #}
{% include "footer.swig.html" %}
{# ... #}

with *whatever* onlyステートメントを指定しない限り、すべてのローカル変数を受け取ります。さらに理解を深めるために、インクルード ドキュメントを確認してください。

{% include "./partial.html" with my_obj only %}

あなたはできる...

すべてのjsonファイルを必要とし、それらをローカル変数として渡し、渡したいオブジェクトを指定します。

swig.renderFile('/path/to/index.swig.html', {
    common: require('path/to/your/common.json'),
    index: require('path/to/your/index.json'),
    header: require('path/to/your/header.json'),
    footer: require('path/to/your/footer.json')
    // etc
});

そしてindex.swig.htmlで...

{# ... #}
{% include "header.swig.html" with header only %}
{# ... #}
{% include "footer.swig.html" with footer only %}
{# ... #}
于 2014-05-20T18:36:43.737 に答える
1

setupswig オブジェクトに直接アクセスできる gulp-swigのオプションを使用できます。アクセスできるようになったら、データの受け渡し方法に関する Swig のドキュメントを読むことができます。次に例を示します。

var opts = {
  setup: function(swig) {
    swig.setDefaults({
      locals: {
        common: require('path/to/your/common.json'),
        header: require('path/to/your/header.json'),
        footer: require('path/to/your/footer.json')
      }
    });
  }
};

gulp.task('templates', function() {
  gulp.src('./lib/*.html')
    .pipe(swig(opts))
    .pipe(gulp.dest('./dist/'))
});
于 2014-05-28T23:54:58.773 に答える