Registering Grunt tasks whose code is located in e

问题:

I've written a function which I'd like to use as a Grunt task. I can do this by adding this to the Gruntfile:

grunt.registerTask('foo', function () {
    // code here
});

However, it makes more sense to keep the function code in a separate file. I plan to define a bunch of these custom tasks and I don't want to bloat the Gruntfile.

I'm not sure what the preferred way of registering such tasks is. I have found this to work:

grunt.registerTask('foo', function () {
    require('./path/to/foo.js')(grunt);
});

So, I'm having the inline function like in the fist example, but this time, I'm loading an external file and invoking it immediately. In that external file, I of course have to write:

module.exports = function (grunt) {
    // code here
}

This works, but it feels hackish. Is there a more proper way of doing this?

回答1:

Short answer: the alternative to this

grunt.registerTask('foo', function () {
    require('./path/to/foo.js')(grunt);
});

is http://gruntjs.com/api/grunt#grunt.loadtasks

Long answer:

Normally when you have tasks in external files there are served as other nodejs modules. So, if that is something that you will use in several projects you may want to register it in the registry. Later inside your Gruntfile.js you will have:

grunt.loadNpmTasks('yout-module-here');

The grunt's documentation says:

Load tasks from the specified Grunt plugin. This plugin must be installed locally via npm, and must be relative to the Gruntfile

However, if you don't want to upload anything to the registry you should use loadTasks

grunt.loadTasks('path/to/your/task/directory');

So, once the task is loaded you may use it in your configuration.

Here is a simple grunt task placed in external file:

'use strict';

module.exports = function(grunt) {

    grunt.registerMultiTask('nameoftask', 'description', function() {

        var self = this;

        // this.data here contains your configuration

    });
};

And later in Gruntfile.js

grunt.initConfig({
    nameoftask: {
        task: {
            // parameters here
        }
    }
});

回答2:

I had a similar problem.

I wanted to modularize my grunt config and custom tasks by functionnalities (big UX/UI blocks) rather than by technical features. AND I wanted to keep the config files next to task files... (better when working on a large legacy codebase with an varied team - 5 persons with varying JS knowledge)

So I externalized my tasks like Krasimir did.

In the gruntfile, I wrote :

//power of globbing for loading tasks
var tasksLocations = ['./grunt-config/default_tasks.js', './grunt-config/**/tasks.js'];

var taskFiles = grunt.file.expand({
    filter: "isFile"
  }, tasksLocations);

taskFiles.forEach(function(path) {
  grunt.log.writeln("=> loading & registering : " + path);
  require(path)(grunt);
});

---

You will find the whole boilerplate gruntfile here (external config and tasks loading) : https://gist.github.com/0gust1/7683132