首先,在项目的根目录下,创建一个文本文件package.json,指定当前项目所需的模块。下面就是一个例子。
{ "family": "ms", "version": "1.0.0", "name": "zhe800", "spm": { "alias": { "zepto": "zepto" } }, "devDependencies": { "grunt": "~0.4.3", "grunt-cmd-transport": "~0.4.1", "grunt-cmd-concat": "~0.2.7", "grunt-contrib-uglify": "~0.4.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-cssmin": "~0.6.2", "grunt-contrib-clean": "~0.5.0" } }
模块安装完以后,下一步在项目的根目录下,新建脚本文件Gruntfile.js。它是grunt的配置文件。如下:
module.exports = function (grunt) { // 配置Grunt各种模块的参数 // 四个模块:jshint(检查语法错误)、concat(合并文件)、uglify(压缩代码)和watch(自动执行)。 grunt.initConfig({ pkg : grunt.file.readJSON("package.json"), //对SeaJS定义的模块进行依赖提取等任务 transport : { options : { paths : ['.'], alias: '<%= pkg.spm.alias %>' }, test : { options : { idleading : 'dist/' }, files : [ { expand:true, cwd : 'static', src : 'test/**/*.js', filter : 'isFile', dest : '.temp' } ] } }, //concat用来合并同类文件,它不仅可以合并JavaScript文件,还可以合并CSS文件。 concat : { options : { paths : ['.'], include : 'relative' }, test : { files: [ { expand: true, cwd: '.temp/', src: 'test/**/*.js', dest: 'dist/' } ] } }, //watch模块用来在后台运行,监听指定事件,然后自动运行指定的任务。 // watch:{ // css:{ // files:['static/demo/**/*.css'], // tasks:['cssmin:demo'], // options:{ // livereload:true // } // } // }, //uglify模块用来压缩代码,减小文件体积。 uglify : { test : { files: [ { expand: true, cwd: 'dist/', src: ['test/**/*.js','!test/**/*-debug.js'], dest: 'dist/' } ] } }, //压缩以及合并CSS文件。 cssmin : { test : { files: [ { expand: true, cwd : 'static', src : 'test/**/*.css', dest: 'dist/' } ] } }, //copy模块用于复制文件与目录。 copy : { test : { files:[ { expand: true, filter: 'isFile', cwd:'static/test/img/', src: ['**/*'], dest: 'dist/test/img/' } ] } }, clean : { spm : ['.temp'] } }); // 从node_modules目录加载模块文件 grunt.loadNpmTasks('grunt-cmd-transport'); grunt.loadNpmTasks('grunt-cmd-concat'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-watch'); // 每行registerTask定义一个任务。定义具体的任务。第一个参数为任务名,第二个参数是一个数组,表示该任务需要依次使用的模块。 grunt.registerTask('build-test', ['transport:test','concat:test','uglify:test','cssmin:test','copy:test','clean']); };
常见标签
expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
cwd:需要处理的文件(input)所在的目录。
src:表示需要处理的文件。如果采用数组形式,数组的每一项就是一个文件名,可以使用通配符。
dest:表示处理后的文件名或所在目录。
ext:表示处理后的文件后缀名。
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”的文件。