2013-08-15 6 views
18

私はGruntを使って静的なWebサイトをプリコンパイルできるように何かを探してきました。部分的な部分を持つ必要があるので、共通のヘッダー/フッターをページに含めることができます。Grunt.jsを使用した部分的なHTMLのコンパイル

これまでのところ、gruntプラグインを持つJadeと、Dust.jsテンプレートを静的HTMLにコンパイルするgrunt用のthisプラグインが見つかりました。私はJadeのシンタックスが本当に好きではないし、GruntのDustプラグインは理想的ではありません。

Grunt/Gulpをサポートする静的なHTMLテンプレート言語は、通常のHTMLから大きく外れておらず、まだアクティブですか?

+0

でありますか? – thefourtheye

答えて

16

このプラグインはgrunt-includesという名前でした。私は永遠にあなたの質問への答えを探してきました。これは私が最初に見たもので、使いやすいものです。他のすべてのものはと思われるかもしれません。はこの機能を持っていますが、他の20倍の機能を持っているので、仕事のツールとして間違っているようです。

これは私には欠けているものの1つは、相対パスに接頭辞を付けることです。私はより良い選択肢になっているmodestの開発者に話しています。

更新grunt-includes-replaceは、ほとんど同じくらい簡単で、相対パスのプレフィックスを付けることができます。 IE:変数を渡すことができます。

+2

'grunt-includes-replace'は簡単で便利です。ちょうど私が必要なもの!ありがとう。 –

2

私は、グラントプラグインを組み立てるだけで成功しています。

https://github.com/assemble/assemble

がここに公式サイトの

http://www.youtube.com/watch?v=oRwL5Y7K0CM(5時43分)

http://www.youtube.com/watch?v=R9Jj9ciA2wM(16時44分):私が最初にそれを使用し始めたとき、私は分割動画のカップルを作りました

そのサイトから、パーシャルをどのように使用できるかを確認できます。例えば:次に

assemble: { 
    options: { 
    assets: 'assets', 
    partials: ['docs/includes/**/*.hbs'], 
    data: ['docs/data/**/*.{json,yml}'] 
    }, 
    pages: { 
    src: ['docs/*.hbs'], 
    dest: './' 
    } 
} 

、本質的にあなたのような何かを実行することができます:

grunt assemble 

またはあなたのような組み立て、対象のタスクを実行することができ、よりきめの細かい制御のために:

grunt assemble:your_target 

私にとってはうまくいきます。それは少しの学習曲線を必要とし、ドキュメントは彼らがそれに取り組むように改善する可能性が高いでしょう。

+0

素晴らしいビデオ、ありがとう! – jonschlinkert

0

私はhttps://npmjs.org/package/grunt-dustを使用して、部分テンプレートを事前にコンパイルします。

Gruntfile.jsの関連部分はこのような何かを見ることができます:

dust: { 
     defaults: { 
      files: { 
       'views/index.js': 'views/**/*.dust' 
      }, 
      options: { 
       wrapper: 'commonjs', 
       runtime: false, 
       wrapperOptions: { 
        returning: 'dust', 
        deps: { 
         dust: 'dustjs-linkedin', 
         dustHelpers: 'dustjs-helpers' 
        } 
       } 

      } 
     } 
    }, 

これはviews/index.jsでコンパイルダストテンプレートのすべてを配置します。

より多くの例と、より詳細なドキュメントは、あなたが「理想より少ない」とはどういう意味ですかhttps://github.com/vtsvang/grunt-dust

関連する問題