本节书摘来自异步社区《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
}
}
});
};
