Как создать и организовать конфигурацию и зарегистрировать задачи 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-плагины в задачах конфигурации, для этой задачи есть задачи Register.
• имя задачи конфигурации и задачи регистрации являются общими, то вы не можете установить 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 запустить все нахальное задание или grunt sass:dev запустить только одну задачу.

И задача регистрации должна выглядеть так (например: SassAndConcat задача для запуска sass а также concat задача):

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

И теперь ты сможешь бежать grunt SassAndConcat,

Если вы понимаете это, вы сможете более эффективно выполнять свои задачи, выполняя правильные задачи в нужное время.

Не забудьте установить include-all Модуль NPM для динамического запроса всех наших конфигураций и регистрации задач.