《JavaScript开发框架权威指南》——2.6　创建Grunt插件

2.6　创建Grunt插件

社区提供的丰富插件库是让Grunt真正变得闪耀的库，它能使你立即从Grunt中获益，而不是需要从头创建复杂的任务。如果你需要在项目中做自动构建，那么很可能某人已经为你做好这项“Grunt”工作。在这一节中，你可以懂得如何向社区回馈自己创建的Grunt插件。

2.6.1　开始
首先要做的事情之一是情创建一个公共的GitHub仓库，以存储你的新插件。下文中将要提及的示例包含在本书附带的源码中，本书附带了源码。一旦你准备好代码仓库，就把它克隆到你的电脑上。下一步，按照本章前面“将Grunt添加到项目中”一节所概述的步骤，在仓库目录中初始化Grunt。然后，你的新Grunt插件的文件模式将会类似清单中的示例。

清单2-31　新Grunt插件的文件模式

.
├──  Gruntfile.js
├──  README.md
├──  package.json
├──  tasks

注意：
　

这里提到的最重要一点是创建Grunt插件不需要任何额外的模式或知识（抛开本章已经涵盖的内容不说）。这个过程反映了把Grunt整合进一个现有的项目中，Gruntfile的建立用于加载任务，除此之外是任务本身。一旦插件发布至npm，其他的Grunt项目就能够像本章中到处提及的方式一样来加载你的插件。
2.6.2　创建任务
按照示例中的方式，让我们创建一个Grunt插件，该插件能够生成一份描述了项目中包含的文件类型、大小和数量的报告。该插件的配置示例如清单所示。

清单2-32　插件配置示例代码

// example-plugin/Gruntfile.js

module.exports = function(grunt) {

    grunt.config('file-report', {
        'options': {
        },
        'public': {
            'src': ['public/*/']
        },
        'images': {
            'src': ['public//.jpg', 'public/ /.png', 'public//*.gif']
        }
    });

    grunt.loadNpmTasks('grunt-file-reporter');
    grunt.registerTask('default', ['file-report']);
};

从清单中可以看到插件的源码，其中Grunt注册了一个多任务file-report。每当调用这个任务，清单中指定的目标文件会被迭代遍历。完成这个任务后，插件会编译得到一个报告展示出它发现的文件类型、数量和大小详情。

清单2-33　插件的源码

// example-plugin/node_modules/grunt-file-reporter/Gruntfile.js

var fs = require('fs');
var filesize = require('filesize');
var _ = require('lodash');
_.mixin(require('underscore.string'));

module.exports = function(grunt) {

    var mime = require('mime');
    var Table = require('cli-table');

    grunt.registerMultiTask('file-report', 'Generates a report of file types & sizes used
    within a project ', function() {

        var report = {
            'mimeTypes': {},
            'largest': null,
            'smallest': null
        };

        var table = new Table({
            'head': ['Content Type', 'Files Found', 'Total Size',
            'Average Size', 'Largest', 'Smallest']
        });
        var addFile = function(file) {
            if (grunt.file.isDir(file)) return;
            var mimeType = mime.lookup(file);
            if (!report.mimeTypes[mimeType]) {
                report.mimeTypes[mimeType] = {
                    'count': 0,
                    'sizes': [],
                    'largest': null,
                    'smallest': null,
                    'oldest': null,
                    'newest': null
                };
            }
            var details = report.mimeTypes[mimeType];
            details.count++;
            var stats = fs.statSync(file);
            details.sizes.push(stats.size);
            if (!details.largest || stats.size > details.largest.size) {
                details.largest = { 'file': file, 'size': stats.size };
            }
            if (!report.largest || stats.size > report.largest.size) {
                report.largest = { 'file': file, 'size': stats.size };
            }
            if (!details.smallest || stats.size < details.smallest.size) {
                details.smallest = { 'file': file, 'size': stats.size };
            }
            if (!report.smallest || stats.size < report.smallest.size) {
                report.smallest = { 'file': file, 'size': stats.size };
            }
       };
       var sum = function(arr) {
           return arr.reduce(function(a, b) {
               return a + b;
            });
        };

        var displayReport = function() {
            var totalSum = 0;
            var totalFiles = 0;
            var totalSizes = [];
            _.each(report.mimeTypes, function(data, mType) {
                var fileSum = sum(data.sizes);
                totalSum += fileSum;
                totalFiles += data.sizes.length;
                totalSizes = totalSizes.concat(data.sizes);
                table.push([mType, data.count, filesize(fileSum),
                    filesize(fileSum / data.sizes.length),
                    _.sprintf('%s (%s)', data.largest.file, filesize(data.largest.size)),
                    _.sprintf('%s (%s)', data.smallest.file, filesize(data.smallest.size)),
                ]);
            });
            table.push(['-', totalFiles, filesize(totalSum),
                filesize(totalSum / totalSizes.length),
                _.sprintf('%s (%s)', report.largest.file, filesize(report.largest.size)),
                _.sprintf('%s (%s)', report.smallest.file, filesize(report.smallest.size)),
            ]);
            console.log(table.toString());
        };
        this.files.forEach(function(files) {
            files.src.forEach(addFile);
        });

        displayReport();

    });

};

由file-report插件生成的输出如图所示。

图2-1　file-report任务所生成的输出

2.6.3　将任务发布到npm
一旦我们的插件已经就绪并且我们的Git仓库也更新到最新的代码，最后一步就是通过npm发布插件使他人也可用。

$ npm publish
注意：
　

如果这是你第一次向npm发布模块，你将被要求创建一个账号。