开发者社区> 异步社区> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

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

2.5 操作文件系统

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

当然,我们不会把所有方法都列举在此,表显示了Grunt文件操作API中一些使用频率最高的方法。
screenshot
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
            }
        } 
    });
};

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
盘点JavaScript中那些进阶操作知识(下篇)
盘点JavaScript中那些进阶操作知识(下篇)
30 0
盘点JavaScript中那些进阶操作知识(上篇)
盘点JavaScript中那些进阶操作知识(上篇)
43 0
按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现
按钮被点击后屏蔽点击且倒计时60S能再次被点击-JS实现和JQuery实现
36 0
前端学习之原生JS实现attr方法的封装
前端学习之原生JS实现attr方法的封装
144 0
前端学习之原生JS实现siblings方法!
前端学习之原生JS实现siblings方法!
112 0
js实现上传图片前本地预览
js实现上传图片前本地预览
41 0
js实现给html固定区域增加水印
给视频和文档的div区域增加水印。以下代码可以在任意位置增加水印。
111 0
spring boot 用js实现上传文件(包含其他字段)显示进度
spring boot 用js实现上传文件(包含其他字段)显示进度
70 0
js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交
js实现动态添加具有相同name的input+动态添加的input绑定事件+保存前判断所有name为空阻断提交
148 0
JS实现输入时验证(十七)
JS实现输入时验证(十七)
30 0
+关注
异步社区
异步社区(www.epubit.com)是人民邮电出版社旗下IT专业图书旗舰社区,也是国内领先的IT专业图书社区,致力于优质学习内容的出版和分享,实现了纸书电子书的同步上架,于2015年8月上线运营。公众号【异步图书】,每日赠送异步新书。
12049
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载