11

私が取り組んでいる単一ページのアプリの場合、次の構造があります。

  • 距離
    • CSS
    • js
    • ライブラリ
    • パーシャル
    • index.html
  • ソース
    • CSS
    • js
    • ライブラリ
    • ビュー
      • パーシャル
      • index.jade

ディレクトリdistは、プロジェクトを提供するために Express サーバーによって使用されます。distを消去し、 src/css、src/js、src/libをdistにコピーするための簡単なタスク ( grunt-contrib-clean、grunt-contrib-copyを使用) があります。

問題はsrc/viewsにあります。このディレクトリには、html ファイルにコンパイルする必要がある jade ファイルが含まれています。コンパイル後、それらをdistに入れます（distルートのindex.html、サブディレクトリとしてのパーシャル）。

現在、grunt-contrib-jadeタスクを使用して、jade ファイルをコンパイルおよびコピーしています。コンパイルされたhtmlファイルをソース管理に追加したくないので、それらをdistにコピーしたいと思います。しかし、すべての jade ファイルを指定する必要があるため、これは実際には機能しません (現在は数しかありませんが、それは大きくなります)。

   jade: {
        compile: {
            options: {
                pretty: true
            },
            files: {
                // TODO make one line
                'dist/index.html': ['src/views/index.jade'],
                'dist/partials/banner.html': ['src/views/partials/banner.jade'],
                'dist/partials/dashboard.html': ['src/views/partials/dashboard.jade'],
                'dist/partials/navbar.html': ['src/views/partials/navbar.jade'],
                'dist/partials/transfer.html': ['src/views/partials/transfer.jade']
            }
        }
    },

ディレクトリフィルターで grunt-contrib-jade タスク (または別のタスク) を使用する方法はありますか? このような：

   jade: {
        compile: {
            options: {
                pretty: true
            },
            dir: {
                'dist': ['src/views']
            }
        }
    }
4

3 に答える 3

20

Grunt wikiからの少しの説明- マッピングの展開:

grunt.file.expandMapping(patterns, dest [, options])

このメソッドは、マルチタスク用のファイル配列をプログラムで生成するために使用できますが、構成タスク ガイドの「ファイル オブジェクトを動的に構築する」セクションで説明されている宣言構文を使用することをお勧めします。

上記を仮定すると、構成は次のようになります。

files: [ { 
  expand: true, 
  src: "**/*.jade", 
  dest: "dist/", 
  cwd: "src/views", 
  ext: '.html'
} ];

宣言型構成でも同じ結果になります。

于 2013-02-03T21:57:35.093 に答える
10

私は最終的に grunt 0.4 にアップグレードしました (これにより、他の問題が発生しますが、処理できるようになります)。

grunt バージョン 0.4 では、grunt.file.expandMappingを使用できます。

    jade: {
        compile: {
            options: {
                pretty: true
            },
            files: grunt.file.expandMapping(['**/*.jade'], 'dist/', {
                cwd: 'src/views',
                rename: function(destBase, destPath) {
                    return destBase + destPath.replace(/\.jade$/, '.html');
                }
            })

        }
    },
于 2012-12-31T07:28:12.857 に答える
3

ファイルの拡張子のみを .jade から .html に変更したい場合は、次のようにパラメータflattenとパラメータを使用する別のオプションがあります。ext

jade: {
    compile: {
        options: {
            data: { debug: false, title: 'My awesome application' }
        },
        files: grunt.file.expandMapping(['**/*.jade'], '<%= yeoman.dist %>/views', {
            cwd: '<%= yeoman.app %>/views',
            flatten: true,
            ext: '.html'
       })
    }
}

またはさらに良い（ここで説明されているように）：

jade: {
    compile: {
        options: {
            data: { debug: false, title: 'My awesome application' },
            pretty: true
        },
        files: [
            {
                expand: true,
                cwd: '<%= yeoman.app %>/views',
                src: ['**/*.jade'],
                dest: '<%= yeoman.dist %>/views',
                ext: '.html'
            }
        ]}
}

ありがとう。

于 2013-05-12T14:32:59.430 に答える