3

ゴール：

動的にインクルード/static/js/**/*.jsし、/static/css/**/*.cssファイルも<head>

方法：

私はクライアント側のテンプレートパーシャルを使用しているので、この例では、すべてのファイルパスを次のように記述します。

/static/js/**/*.jsあまりに/templates/head.js.dust
/static/css/**/*.cssも/templates/head.css.dust

もちろん、ファイルパスだけでは不十分です。すべての「ファイル」が次のような適切なタグでラップされるように、出力を前処理する方法が必要です。

<!-- /templates/head.js.dust -->
<script src="/static/js/assests/jquery.js"></script>
<script src="/static/js/assests/jquery_ui.js"></script>
<script src="/static/js/app.js"></script>
...

<!-- /templates/head.css.dust -->
<link src="/static/css/assests/jquery_ui.css"/>
<link src="/static/css/app.css"/>
...

質問：

すでにこのようなことをしているうなり声のモジュールはありますか？

ボーナスポイント： そうでない場合、どうすればこのようなものを作り始めることができますか？

4

1 に答える 1

2

あなたはかなり簡単な方法でそうすることができます：

grunt.registerMultiTask("assetAppend", "Append JS/CSS assets to a file", function() {
    var paths = grunt.file.expand( this.data.paths ),
        out = this.data.output,
        contents = "";

    paths.forEach(function( path ) {
        if ( /\.js$/i.test( path ) ) {
            contents += '<script src="' + path + '"></script>';
        } else if ( /\.css$/i.test( path )) {
            contents += '<link rel="stylesheet" type="text/css" href=' + path + ' />';
        }
    });

    grunt.file.write( out, contents );
});

grunt.initConfig({
    assetAppend: {
        js: {
            paths: ["static/js/**/*.js"],
            output: "head.js.dust"
        },
        css: {
            paths: ["static/css/**/*.css"],
            output: "head.css.dust"
        }
    }
});

この例は私のプラグインgrunt-contrib-assetpushの一部になりました

于 2013-03-26T23:18:18.470 に答える