web-dev-qa-db-ja.com

gruntを使用して、多くのディレクトリからの多くのファイルを新しいディレクトリ内の名前が変更された単一のファイルに連結します

Angularプロジェクトには、潜在的に多くのモジュールがあります。各モジュールには、コントローラー、ディレクティブ、サービスなどのサブディレクトリを持つ独自のディレクトリがあります。次のようなものです。

src
|-- js
    |-- modules
        |-- moduleOne
            | module.js
            |-- controllers
                | listController.js
                | detailController.js
            |-- directives
                | listItem.js
                | summaryWidget.js
            |-- filters
            |-- services
                | moduleService.js

私のビルドは基本的に、src /からファイルをバンドルしてコンパイルし、dev /に入れてから、dev /内のファイルを最小化し、prod /に移動します。開発中、サーバーはdev /フォルダーを指し、本番環境では、サーバーはprod /フォルダーを指します（ファイルがコンパイル/連結されているだけなのに、ファイルが.min.jsで終わる理由も）。このプロセスはうまく機能しています。

現在、私のconcatタスクは、moduleOne /内のすべてのファイルを取得し、devディレクトリに単一のmoduleOne.jsファイルを作成することです。これは私がやりたいことですが、より動的に：

concat: {
    modules: {
        files: {
            "dev/js/modules/moduleOne.min.js": [
                "src/js/modules/moduleOne/*.js",
                "src/js/modules/moduleOne/**/*.js"
            ],
            "dev/js/modules/moduleTwo.min.js": [
                "src/js/modules/moduleTwo/*.js",
                "src/js/modules/moduleTwo/**/*.js"
            ]
        } 
    }
}

問題は、すべてのモジュールに対してこれを実行する必要があることですが、そうする必要はないと思います。

私がやりたいことのようなものなので、私は次のことをやってみました：

concat: {
    modules: {
        files: [{
            expand: true,
            cwd: "src/js/modules",
            src: "**/*.js",
            dest: "dev/js/modules",
            ext: ".min.js"
        }]
    }
}

しかし、その結果、すべてのファイルとディレクトリ構造がsrc /からdev /に移動しました。私は基本的にconcatを使用してコピーを作成しましたが、役に立ちませんでした。

私はこのようなことをしたいです：

concat: {
    modules: {
        files: [{
            expand: true,
            cwd: "src/js/modules",
            src: "**/*.js",
            dest: "dev/js/modules/<foldername>.min.js",  <- how do I achieve this?
        }]
    }
}

たくさん読んでいますが、答えが出そうになっていて、コンセプトをまとめるのに苦労しているようです。私が見つけたものの多くは、名前を変更した新しいディレクトリへの単一のファイルです。複数のファイルを1つのファイルに変更して新しいディレクトリに入れたいのですが。それが私が転がる方法です:)

gruntjsgrunt-contrib-concat
19
coblr

それで、私は探していた答えを見つけました。

This SO post は基本的に同じ質問で、良い答えがありました。残念ながら、質問を作成しているときに出てこなかったので、読んでいませんでした。この。

私のニーズにわずかな調整がありました。 1つのcompile.jsファイルではなく、モジュールごとに動的に実行する必要があったため、最終的なコードは次のようになり、initConfig（）の直後に配置されます。

grunt.registerTask("prepareModules", "Finds and prepares modules for concatenation.", function() {

    // get all module directories
    grunt.file.expand("src/js/modules/*").forEach(function (dir) {

        // get the module name from the directory name
        var dirName = dir.substr(dir.lastIndexOf('/')+1);

        // get the current concat object from initConfig
        var concat = grunt.config.get('concat') || {};

        // create a subtask for each module, find all src files
        // and combine into a single js file per module
        concat[dirName] = {
            src: [dir + '/**/*.js'],
            dest: 'dev/js/modules/' + dirName + '.min.js'
        };

        // add module subtasks to the concat task in initConfig
        grunt.config.set('concat', concat);
    });
});

// the default task
grunt.registerTask("default", ["sass", "ngtemplates", "prepareModules", "concat", "uglify", "cssmin"]);

これにより、基本的に、concatタスクは、手動でコーディングしたときと同じように見えますが、少し単純です（そしてスケーラブルです！）。

concat: {
    ...
    moduleOne: {
        src: "src/js/modules/moduleOne/**/*.js",            
        dest: "dev/js/modules/moduleOne.min.js"
    },
    moduleTwo:{
        src: "src/js/modules/moduleTwo/**/*.js",
        dest: "dev/js/modules/moduleTwo.min.js"
    }
}

SOの投稿から私が行ったもう1つの逸脱は、prepareModulesが実行されたときにそれ自体でconcatを実行しないことを選択したことです。私のすべての処理。

これにより、次の構造が残り、prod /に縮小する準備が整います。

| dev
    | js
        | modules
            |-- moduleOne.min.js
            |-- moduleTwo.min.js
24
coblr