《JavaScript开发框架权威指南》——2.5　操作文件系统

本节书摘来自异步社区《JavaScript开发框架权威指南》一书中的第2章，第2.5节，作者：【美】Tim Ambler , Nicholas Cloud著，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.5　操作文件系统

可想而知，作为构建工具，大部分Grunt插件都要以某种方式和文件系统交互。鉴于操作文件的重要性，Grunt提供了有益的抽象允许开发者与文件系统交互，并且仅仅使用很少数量的样板代码。

当然，我们不会把所有方法都列举在此，表显示了Grunt文件操作API中一些使用频率最高的方法。

2.5.1　源-目标映射
许多Grunt任务与文件系统交互是依赖于源-目标映射的，该映射描述了要被处理的文件及各文件对应的目标。构建这样的映射会很冗长乏味，感谢Grunt为我们提供了解决此问题的有益捷径。

假设你正在开发一个项目，该项目根目录有一个公共文件夹。一旦工程部署后，这个文件夹中的文件要通过网络提供服务（见清单）。

清单2-23　虚构项目的公共文件夹内容

// example-iterate1

.
└──  public
    └──  images
        ├── cat1.jpg
        ├── cat2.jpg
        └── cat3.png

如你所见，项目包含一个图片文件夹，其中有三个文件。了解这些内容之后，让我们看看Grunt能通过哪些方式来帮我们迭代这些文件。

如清单所示，Grunt的多任务配置和刚才介绍的很相似。关键不同之处在于任务配置中的src属性。在我们的任务中，Grunt提供了一个this.files属性，该属性提供了一个包含着匹配到每个文件路径的数组，这些文件通过node-glob模块取得匹配到的文件路径数组。任务输出的结果可以在清单中看到。

清单2-24　Grunt多任务配置对象，包含一个src键

// example-iterate1/tasks/list-files.js

module.exports = function(grunt) {

    grunt.config('list-files', {
        'images': {
            'src': ['public/**/*.jpg', 'public/* * /* .png']
        }
    });

    grunt.registerMultiTask('list-files', function() {
        this.files.forEach(function(files) {
            grunt.log.writeln('Source:', files.src);
        });
    }); 
};

清单2-25　清单中Grunt任务输出的结果

$ grunt list-files
Running "list-files:images" (#list-files) task
Source: [ 'public/images/cat1.jpg',
  'public/images/cat2.jpg',
  'public/images/cat3.png' ]

Done, without errors.

配置属性src和多任务属性this.files的结合使用，在迭代多文件时给开发者提供了精确的语法。以上的例子明显设计得非常简单，不过Grunt也同样为更复杂的场景提供额外选项。下面让我们来看一下。

与清单中所示的键src的用法相反，清单的例子展示了文件数组的使用——尽管这种方法有点冗长，但它为选择文件提供了更强大的数据格式。该格式接受额外的选项，从而让我们能够更好地调整我们的选择。特别重要的是它的expand选项，如清单所示。请仔细关注，由于使用了expand选项，该示例与清单的输出有所不同。

清单2-26　使用“文件数组”格式迭代文件

// example-iterate2/tasks/list-files.js

module.exports = function(grunt) {
    grunt.config('list-files', {
        'images': {
            'files': [
                {
                    'cwd': 'public',
                    'src': ['**/*.jpg', '* */*.png'],
                    'dest': 'tmp',
                    'expand': true 
                }
            ]
        } 
    });

    grunt.registerMultiTask('list-files', function() {
        this.files.forEach(function(files) {
            grunt.log.writeln('Source:', files.src);
            grunt.log.writeln('Destination:', files.dest);
        });
    }); 
};

清单2-27　清单中Grunt任务的输出

$ grunt list-files
Running "list-files:images" (#list-files) task
Source: [ 'public/images/cat1.jpg' ]
Destination: tmp/images/cat1.jpg
Source: [ 'public/images/cat2.jpg' ]
Destination: tmp/images/cat2.jpg

Done, without errors.

当该expand选项与dest选项成对出现的时候，表示明Grunt会迭代访问任务中的this.files. forEach循环所找到的每个入口文件。在每个文件内，我们可以找到对应的dest属性。使用这种方法，我们就能很容易地创建源-目的地映射，可以用于把文件从一个位置复制（或移动）到另一个位置。

2.5.2　监视文件变化
当特定模式下匹配到的文件被创建、修改、删除时，Grunt最为流行的插件之一grunt-contrib-watch使Grunt有能力运行预定义的任务。当和其他任务结合在一起时，grunt-contrib-watch让开发者能创建强大的工作流，用于自动执行如下工作：

检查JavaScript代码中的错误（如静态语法分析“linting”）；
编译Sass/L样式表；
运行单元测试
下面让我们看几个实践中运用上述工作流的例子。

1．JavaScript 自动化静态检查
清单显示了一个基本的Grunt设置，和本章已经展示的示例相似。监视任务以默认任务作为别名注册在Grunt中，这样我们就能简单地在命令行中运行$ grunt来监视项目中的变化。本例中，Grunt会监视src文件夹下的变化。一旦变化发生，jshint任务就会触发。

清单2-28　发生变化时自动检查JavaScript错误

// example-watch-hint/Gruntfile.js
module.exports = function(grunt) {
    grunt.loadTasks('tasks');
    grunt.registerTask('default', ['watch']);
};

// example-watch-hint/tasks/jshint.js

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.config('jshint', {
        'options': {
            'globalstrict': true,
            'node': true,
            'scripturl': true,
            'browser': true,
            'jquery': true
        },
        'all': [
            'src/**/*.js'
        ]
    }); 
};

// example-watch-hint/tasks/watch.js

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.config('watch', {
        'js': {
            'files': [
                'src/**/*'
            ],
            'tasks': ['jshint'],
            'options': {
                'spawn': true
            }
        }
    });
};

2．自动编译Sass样式表
清单展示了这样一个示例，它引导Grunt来监视项目变化。然而这次不同于监视JavaScript文件，Grunt监视的是项目的Sass样式表。当变化发生的时候，插件grunt-contrib-compass被调用，把样式表编译为最终形态。

清单2-29　变化发生时自动编译Sass样式表

// example-watch-sass/Gruntfile.js

module.exports = function(grunt) {
    grunt.loadTasks('tasks');
    grunt.registerTask('default', ['watch']);
};

// example-watch-sass/tasks/compass.js

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-contrib-compass');

    grunt.config('compass', {
        'all': {
            'options': {
                'httpPath': '/',
                'cssDir': 'public/css',
                'sassDir': 'scss',
                'imagesDir': 'public/images',
                'relativeAssets': true,
                'outputStyle': 'compressed'
            } 
        }
    }); 

};

// example-watch-compass/tasks/watch.js

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.config('watch', {
        'scss': {
            'files': [
                'scss/**/*'
            ],
            'tasks': ['compass'],
            'options': {
                'spawn': true
            }
        } 
    });

};

注意：
　

若想让本例生效，前提是需要安装Compass。它是一个开源CSS编辑框架。
3．自动化单元测试
最后一个例子是使用grunt-contrib-watch插件来完成单元测试。清单展示了用于监视JavaScript变化的Gruntfile。变化发生时会立即触发项目的单元测试，单元测试由grunt-mocha-test插件完成。

清单2-30　当变化发生时自动运行单元测试

// example-watch-test/Gruntfile.js

module.exports = function(grunt) {
    grunt.loadTasks('tasks');
    grunt.registerTask('default', ['watch']);
};

// example-watch-test/tasks/mochaTest.js

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-mocha-test');

    grunt.config('mochaTest', {
        'test': {
            'options': {
                'reporter': 'spec'
            },
            'src': ['test/**/*.js']
        }
    }); 
};

// example-watch-test/tasks/watch.js

module.exports = function(grunt) {

    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.config('watch', {
        'scss': {
            'files': [
                'src/**/*.js'
            ],
            'tasks': ['mochaTest'],
            'options': {
                'spawn': true
            }
        } 
    });
};