8

Web アプリを構築するために使用し ているgruntファイルがあります。

このgruntファイルは、、、、、などのいくつかのgrunt contrib プラグインを使用して、Web アプリを適切にビルドします。cleancopycompasscssmin

このgruntファイルは、CSS の生成と、テーマ別の CSS ファイルを作成するためのファイルのコピーも処理することになっています。現在、各テーマのclean, copyand (etc.) タスクにターゲットを追加しています。compass

これは grunt ファイルでは扱いにくくなり、新しいテーマが追加されたときに難しくなり、エラーが発生しやすくなります。

簡単にするために、指定されたテーマに必要なすべてのタスクを実行するために 、他のgrunt contrib タスク ( 、、など) を内部的に使用する独自のカスタム "テーマ" gruntタスクを作成したいと思います。cleancopycompass

テーマ (主にそのソース フォルダー) のごく少量の構成データがあれば、他のタスクを呼び出すのに十分な情報が得られます (テーマのソース ファイルと宛先ファイルは非常に規則に基づいているため)。

カスタムタスク内からタスクを呼び出して、すべての構成オプション、ファイルなどをプログラムで指定できる方法を見つけることができないようです。

誰も私がこれを行う方法を知っていますか?

ありがとう、エド

4

4 に答える 4

8

カスタムタスク内からタスクを呼び出して、すべての構成オプション、ファイルなどをプログラムで指定できる方法を見つけることができないようです。

マルチタスク構成はタスク構成で指定されたターゲットから読み取られるため、特定の構成で不機嫌そうなマルチタスクを実行できるとは思いません。

これを行う 1 つの方法は、実行する前にタスク構成を変更することです。

非常に基本的な例を次に示します。

grunt.registerMultiTask('theme', function() {
    var themeName = this.options().name;
    grunt.config.set('yourOtherTask.dist.options.name', themeName);
    grunt.task.run('yourOtherTask');
});
于 2013-08-27T09:45:55.680 に答える
5

これと同じくらい簡単です：

concat: {
  web: {
    src: ['web/**/*.js'],
    dest: 'dist/main.js'
  }
},

uglify: {
  server: {
    src: '<%= concat.web.dest %>',
    dest: '<%= concat.web.dest %>.min.js'
  }
},
于 2014-04-01T18:30:59.717 に答える
1

私は同じ問題を抱えていて、それを解決しました。

覚えておいてください: grunt はノードで実行されるすべての JavaScript であるため、JavaScript とノードがサポートすることは何でも実行できます。

私のソリューションは次のように機能します。

まず、コア アプリのすべての要素を別の JavaScript ファイル ("grunt-my-app-core.js" など) に配置します。そのエクスポートでは、2 つの関数init(grunt)とgetConfig(grunt, options).

(function() {
    "use strict"; //enable ECMAScript 5 Strict Mode

    function init(grunt) {
    }

    function getConfig(grunt, options) {
        return {};
    }


    ///////////////////////////
    //   Exports
    exports = module.exports = {
        init: init,
        getConfig: getConfig
    };
})();

init(grunt)タスクをロードして登録することです。次のようになります。

/**
 * public API
 *
 * add all required settings to grunt
 * 
 * register task "dist" and task "doc"
 *
 * @param  {object} grunt   the grunt instance
 * @return {void}
 */
function init(grunt) {
    // overwrite platform specific setting get always unix like line feed char
    grunt.util.linefeed = '\n';

    // Load plugins provide necessary task.
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-less');

    grunt.registerTask('dist', ['clean:build', 'copy:build', 'copy:dist', 'uglify', 'less']);
    grunt.registerTask('doc', ['clean:doc', 'copy:doc']);
}

getConfig(grunt, options)構成オブジェクトを構築して返します。

/**
 * public API
 *
 * will return a config object that have to be given as argument to "grunt.initConfig"
 *
 * @param  {object} grunt   the grunt instance
 * @param  {object|undefined} options to change some pathes
 * @return {object}         the configuration object for initConfig
 */
function getConfig(grunt, options) {

    options = options || {};

    var buildDir = options.buildDir || "build/";
    var distDir = options.distDir || "dist/";
    var docDir = options.docDir || "doc/";

    // ... doing some stuff to collect files or what ever ...

    return {
        clean: {
            build: {
                src: [buildDir]
            },
            doc: {
                src: [docDir]
            }
        },
        copy: {
            // ...
        }   
        // ... add here all the stuff you like to config ...
    };
}

それよりも、Gruntfile.jsテーマ プロジェクトの は非常に短く、コア アプリのすべてのものを必要としない場合があります。次のようになります。

/**
 * Module dependencies.
 */
var gruntMyApp = require("../my-app/grunt-my-app-core.js");

/*global module:false*/
module.exports = function(grunt) {

    var config = gruntMyApp.getConfig(grunt);

    // ... extend config, if you need it

    grunt.initConfig(config);

    // will register Task "dist" and "doc"
    gruntMyApp.init(grunt);

    // Default task.
    grunt.registerTask('default', ['dist', 'doc']);
};

これで、コア アプリで何かを変更すると、すべてのテーマがこれを取得します。マニュアルを更新する必要があるのdevDependenciesは、package.jsonファイル内の だけです。

于 2014-03-14T15:21:02.987 に答える