grunt构建工具使用总结（二）Gruntfile文件配置

启动grunt必须新建一个Gruntfile文件，在文件中必须写的代码：

module.exports = function (grunt) {}

注：所有的grunt配置代码都放在module.exports这个函数中。

本节主要谈谈一下几点设置：concat(合并)，uglify（压缩），watch（监视），jshint（代码规范）

1.代码合并压缩插件（concat,uglify）

在现在的前端项目中代码合并压缩是项目必须要做的，可以加快页面加载速度，也可以缩小项目的体积。

首先需要安装concat，uglify插件:

 npm install grunt-contrib-concat

 npm install grunt-contrib-uglify

配置concat任务(将a.js,b.js,c.js合并成all.js)：

//数组写法

concat:{

build:{

src:["a.js","b.js","c.js"],

dest:"all.js"

}}

//对象写法

concat: {    

 build2: {      

 files: {        

 'all.js': ["a.js","b.js","c.js"]

}}}

//同时创建多个合并任务

concat:{

build:{

src:["a.js","b.js","c.js"]

dest:"all.js"

}

build2:{

files:{

"all.js":["a.js","b.js","c.js"]

}

}

}

uglify的配置同concat相同。

2.项目中各个文件的watch

安装插件：npm install grunt-contrib-watch

配置任务：

watch:{

 scripts: {
    files: ["a.js","b.js","c.js"],
    tasks: ['concat'],//当files中文件发生改变时，需要执行的任务
  }

}

3.文件的jslint

jshint: {
        build: ["a.js","b.js","c.js" ],
  }

 grunt.loadNpmTasks('grunt-contrib-jshint');//加载任务插件

 grunt.registerTask('default', 'jshint’);//执行所定义的任务可以传入数组或函数