如何创建和组织配置和注册grunt任务

Question

我有一个项目，我正在使用grunt来处理我的Js和SASS文件。

目前，当我需要处理某些内容时，我需要调用gruntfile.js所有任务，即使我只想更改一个模块，也只需要更改SASS文件。

有没有办法创建自定义任务，只运行sass部分，另一个只创建模块进程，我可以从提示中调用此任务？

这是我尝试过的，没有成功：

    module.exports = function(gruntHome) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        /* @CONCAT */
        concat: {
            home : {
                src: 'src/app/component/home/*.js',
                dest: 'src/app/component/home/concat/concat_config.js'
            }
        },

        /* @ANNOTATE */
        ngAnnotate: {
            options: {
                add: true
            },
            home: {
                files: {
                    'src/app/component/home/concat/concat_config.js': 'src/app/component/home/concat/concat_config.js'
                }
            }
        },

        /* @UGLIFY */
        uglify: {
            home: {
                src:  'src/app/component/home/concat/concat_config.js',
                dest: 'app/component/home/home.min.js'
            }
        }
    });


    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-ng-annotate');

    grunt.registerTask('gruntTask', ['concat', 'ngAnnotate', 'uglify']);
};

如果不可能，还有其他方法可以实现这一目标吗？ 因为我的gruntfile.js很大，有时需要花费很多时间来处理，即使我不需要处理所有内容。

---

编辑：

这里的链接是我按照此问题提供的步骤进行的相关问题。 它会解决你在尝试做我在这里所做的事情时可能遇到的一些问题。 希望它可以帮助其他人。

Answer 1

以下是如何组织您的繁琐任务：

• config ：默认任务
• register ：调用多个默认任务的别名任务

您必须遵守的一些规则 ：

• 您的文件名必须与您的任务名称相同（例如：ngAnnotate.js - > task：ngAnnotate）
• 通过grunt插件将配置任务分组到一个文件中。 不要在配置任务中混合使用grunt-plugins，注册任务就可以完成这项工作。
• 配置任务和注册任务的名称是共享的，因此您无法设置home配置任务和home注册任务，因为当您使用grunt home调用它时，grunt无法知道您正在引用的任务。

├── Gruntfile.js
└── grunt
    ├── config
    │   ├── sass.js
    │   ├── concat.js
    │   └── uglify.js
    └── register
        ├── GroupOfTasks.js
        └── AnotherGroupOfTasks.js

您的Gruntfile.js将使用以下代码加载和配置grunt/config和grunt/register文件夹中的所有任务：

module.exports = function(grunt) {


    // Load the include-all library in order to require all of our grunt
    // configurations and task registrations dynamically.
    var includeAll;

    try {
        includeAll = require('include-all');
    }
    catch (e0) {
        console.error('Could not find `include-all` module.');
        console.error('Skipping grunt tasks...');
        console.error('To fix this, please run:');
        console.error('npm install include-all --save-dev');
        console.error();
    }

    /**
     * Loads Grunt configuration modules from the specified
     * relative path. These modules should export a function
     * that, when run, should either load/configure or register
     * a Grunt task.
     */
    function loadTasks(relPath) {
        return includeAll({
                dirname: require('path').resolve(__dirname, relPath),
                filter:  /(.+)\.js$/
            }) || {};
    }

    /**
     * Invokes the function from a Grunt configuration module with
     * a single argument - the `grunt` object.
     */
    function invokeConfigFn(tasks) {
        for (var taskName in tasks) {
            if (tasks.hasOwnProperty(taskName)) {
                tasks[taskName](grunt);
            }
        }
    }

    // Load task functions
    var taskConfigurations  = loadTasks('./grunt/config'),
        registerDefinitions = loadTasks('./grunt/register');

    // Run task functions to configure Grunt.
    invokeConfigFn(taskConfigurations);
    invokeConfigFn(registerDefinitions);

};

你的配置任务看起来应该是这样的（例如： sass.js ）：

module.exports = function(grunt) {
    grunt.config.set('sass', {
        dev: {
            options: {
                sourceMap: false
            },
            files: {
                'main.css': 'main.scss'
            } 
        }
    });

    grunt.loadNpmTasks('grunt-sass');
};

您将能够使用grunt sass运行config任务来运行所有sass任务或grunt sass:dev只运行一个任务。

注册任务看起来应该是这样的（例如：运行sass和concat任务的SassAndConcat任务）：

module.exports = function(grunt) {
    grunt.registerTask('SassAndConcat', [
        'sass:dev',
        'concat:dev',
    ]);
};

现在你将能够运行grunt SassAndConcat 。

如果您了解这一点，您将能够通过在正确的时间运行正确的任务来更有效地运行您的grunt任务。

不要忘记安装include-all NPM模块来动态地要求我们所有的grunt配置和任务注册。