如何创建和组织配置和注册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');
};

您将能够运行config任务grunt sass以运行所有sass任务或grunt sass:dev仅运行一个任务.

注册任务看起来应该是这样的(例如:SassAndConcat运行任务sass和concat任务):

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

而现在你将能够运行grunt SassAndConcat.

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

不要忘记安装include-allNPM模块以动态地要求我们所有的grunt配置和任务注册.