Grunt入门教程(自动任务运行器)(2)


module.exports = function(grunt) { grunt.initConfig({ cssmin: { minify: { expand: true, cwd: ‘css/‘, src: [‘.css', ‘!.min.css'], dest: ‘css/‘, ext: ‘.min.css' }, combine: { files: { ‘css/out.min.css': [‘css/part1.min.css', ‘css/part2.min.css'] } } } }); grunt.loadNpmTasks(‘grunt-contrib-cssmin'); grunt.registerTask(‘default', [‘cssmin:minify','cssmin:combine']); };


下面详细解释上面代码中的三个方法,下面一个个来看。

(1)grunt.initConfig

grunt.initConfig方法用于模块配置,它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。由于我们要配置的是cssmin模块,所以里面有一个cssmin成员(属性)。

cssmin(属性)指向一个对象,该对象又包含多个成员。除了一些系统设定的成员(比如options),其他自定义的成员称为目标 (target)。一个模块可以有多个目标(target),上面代码里面,cssmin模块共有两个目标,一个是“minify”,用于压缩css文 件;另一个是“combine”,用于将多个css文件合并一个文件。

每个目标的具体设置,需要参考该模板的文档。就cssmin来讲,minify目标的参数具体含义如下:

expand:如果设为true,就表示下面文件名的占位符(即号)都要扩展成具体的文件名。
cwd:需要处理的文件(input)所在的目录。 src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。
dest:表示处理后的文件名或所在目录。 ext:表示处理后的文件后缀名。
除了上面这些参数,还有一些参数也是grunt所有模块通用的。

filter:一个返回布尔值的函数,用于过滤文件名。只有返回值为true的文件,才会被grunt处理。 dot:是否匹配以点号(.)开头的系统文件。
makeBase:如果设置为true,就只匹配文件路径的最后一部分。比如,a?b可以匹配/xyz/123/acb,而不匹配/xyz/acb/123。
关于通配符,含义如下: :匹配任意数量的字符,不包括/。 ?:匹配单个字符,不包括/。
**:匹配任意数量的字符,包括/。 {}:允许使用逗号分隔的列表,表示“or”(或)关系。
!:用于模式的开头,表示只返回不匹配的情况。
比如,foo/.js匹配foo目录下面的文件名以.js结尾的文件,foo//.js匹配foo目录和它的所有子目录下面的文件名以.js结尾的文件,!.css表示匹配所有后缀名不为“.css”的文件。

使用通配符设置src属性的更多例子:
(2)grunt.loadNpmTasks

grunt.loadNpmTasks方法载入模块文件。
(3)grunt.registerTask

grunt.registerTask方法定义如何调用具体的任务。“default”任务表示如果不提供参数,直接输入grunt命令,则先运行 “cssmin:minify”,后运行“cssmin:combine”,即先压缩再合并。如果只执行压缩,或者只执行合并,则需要在grunt命令后 面指明“模块名:目标名”。
grunt-contrib-clean:删除文件。
*
grunt-contrib-compass:使用compass编译sass文件。
*
grunt-contrib-concat:合并文件。
*
grunt-contrib-copy:复制文件。
*
grunt-contrib-cssmin:压缩以及合并CSS文件。
*
grunt-contrib-imagemin:图像压缩模块。
*
grunt-contrib-jshint:检查JavaScript语法。
*
grunt-contrib-uglify:压缩以及合并JavaScript文件。
*
grunt-contrib-watch:监视文件变动,做出相应动作。
模块的前缀如果是grunt-contrib,就表示该模块由grunt开发团队维护;如果前缀是grunt(比如grunt-pakmanager),就表示由第三方开发者维护。

以下选几个模块,看看它们配置参数的写法,也就是说如何在grunt.initConfig方法中配置各个模块。

### grunt-contrib-jshint

jshint用来检查语法错误,比如分号的使用是否正确、有没有忘记写括号等等。它在grunt.initConfig方法里面的配置代码如下。
/.js'] },

上面代码先指定jshint的检查项目,eqeqeq表示要用严格相等运算符取代相等运算符,trailing表示行尾不得有多余的空格。然后,指定files属性,表示检查目标是Gruntfile.js文件,以及lib目录的所有子目录下面的JavaScript文件。

### grunt-contrib-concat

concat用来合并同类文件,它不仅可以合并JavaScript文件,还可以合并CSS文件。
.js', dest : ‘js/‘ } },

上面代码中的options属性指定压缩后文件的文件头,以及sourceMap设置;target目标指定输入和输出文件。

### grunt-contrib-copy

copy模块用于复制文件与目录。


copy: { main: { src: ‘src/‘, dest: ‘dest/‘, }, },

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wggpsy.html