Grunt的配置和使用

Grunt和Grunt插件是经过NodeJs的包管理工具npm安装并进行管理的。

Grunt 0.4.x必须配合NodeJs=>0.8.0版本使用（奇数版本的NodeJs不是稳定的开发版本）

 

首先介绍2个基础指令：

（1）指令：npm update -g npm
    做用：升级当前环境中的npm为最新的版本

（2）指令：npm install -g grunt-cli
    做用：将Grunt命令行安装到全局环境中，执行完后，就将grunt命令加入到你的系统路径中，之后就能够在任何目录下执行此命令了。
    注意：安装grunt-cli并不等于安装了Grunt。GruntCli的任务很简单：调用与Gruntfile在同一目录中的Grunt。好处是：容许你在同一系统上同时安装多个版本的Grunt。

 

命令行CLI的工做原理：

每次运行grunt时，Grunt就会利用node提供的require()系统查找本地安装的Grunt。因此你能够在项目的任意子目录中运行Grunt。若找到一份本地安装的Grunt，CLI就将其加载，并传递Gruntfile中的配置信息，而后执行你指定的任务。

 

对于新的Grunt项目：

在项目中添加两份文件，package.json和Gruntfile.

Package.json:此文件被npm用于存储项目的元数据，以便于将此项目发布为npm模块。能够在此文件中列出项目依赖的grunt和grunt插件，放置于devDendencies配置段内。

Gruntfile：（用于为grunt作某种配置）此文件被命名为Gruntfile.js或Gruntfile.coffee。用来配置或定义任务task 并加载Grunt插件的。

 

1）Package.json

    应放置于项目的根目录中，与Gruntfile在同一目录中，并与项目的源代码一块儿提交。在Package.json所在目录中运行npm install将依据Package.json文件中所列出的每一个依赖来自动安装适当版本的依赖。

建立Package.json文件的3种方式：

   （1）大部分grunt-init模板都会自动建立特定于项目的Package.json文件。

   （2）npm init命令会建立一个基本的Package.json文件。

   （3）模板案例并补充：

 

 { "name": "my-project-name", "version":"0.0.1", "devDependencies": {//开发依赖项 "grunt-contrib-jsint":"~0.10.0", "grunt-contrib-nodeunit":"~0.4.1", "grunt-contrib-uglify":"~0.5.0" } }

安装Grunt和Grunt插件：

向已存在的Package.json文件添加Grunt和Grunt插件的最简单的方式是经过指令
npm install <module name> --save-dev  进行安装的。

做用：不只安装了<module>,还自动将其添加到devDependencies配置中，遵循title version range格式。

指令：npm install grunt --save-dev

做用：安装Grunt最新版本到项目目录中，并将其添加到devDependencies内。

 

 

指令：npm install grunt-contrib-jshint --save-dev

做用：Grunt插件和其余node模块均可以按照相同的方式安装，上述指令就是jshint任务模块。

安装插件以后，务必确保将更新以后的package.json文件提交到项目仓库中。

 

2）Gruntfile

    Gruntfile.js文件是有效的js文件，应当放在项目根目录中和package.json文件在同一目录层级，并和项目源代码一块儿加入源代码管理器中。

    Gruntfile由4部分组成，分别是”wrapper”函数、项目与任务配置、加载grunt插件和任务、自定义任务等。

    在如下Gruntfile、Package.json文件中的项目元数据被导入到Grunt配置中。grunt-contrib-uglify插件中的uglify任务被配置为压缩源码文件，并依据上述元数据动态生成一个文件头注释。

    当在命令行中执行grunt命令时，uglify任务被默认执行。

结合代码进行说明:

 

module.exports=function(grunt){//"wrapper"函数，所写的Grunt代码都放在此函数中 grunt.initConfig({//项目与任务配置 pkg: grunt.file.readJSON('package.json'),//pkg属性 uglify:{//uglify任务 options:{//目标 banner:'/*! <%= pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n' //banner注释将插入到输出文件的顶部 }, build:{//目标 src:'src/test.js',//源文件 dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'//目标文件 } } }); //加载包含"uglify"任务的插件 grunt.loadNpmTasks('grunt-contrib-uglify'); //默认被执行的任务列表 grunt.registerTask('default',['uglify']); /** 经过定义default任务，可让Grunt默认执行一个或多个任务。在该案列中，执行grunt指令时若不指定一个任务的话，将会执行uglify任务，这与grunt uglify 或grunt default的效果同样。Default任务列表数组中能够指定任意数目的任务（能够带参数）。 **/ }; 

注解：

    因为<% %>模板字符串能够引用任意的配置属性，所以能够经过这种方式来指定诸如文件路径、文件列表类型的配置数据，从而减小一些重复的工做。

    那么就能够在传递intconfig()方法的对象中存储任意的数据，只要它不与你任务配置所需的属性冲突，不然会被忽略。

    与大多数task同样，grunt-contrib-uglify插件中的uglify任务要求它的配置被指定在一个同名属性中，在这里的示例中。咱们指定一个banner选项（用于在文件顶部生成一个注释），紧接着是一个单一的名为build的uglify目标，用于将一个js文件压缩为一个目标文件。

 

指令：grunt --help

做用：列出全部可用的任务。

 

---------------------------Grunt插件分割线----------------------------

Grunt插件：http://www.gruntjs.net/plugins

插件分为2类：
①grunt团队贡献的插件，这些插件的名字前有”contrib-”前缀，且在插件列表中有星号标注。
②第三方插件，无此两种特征。
经常使用插件：

grunt-contrib-jshint:javascript语法错误检查。

grunt-contrib-watch:实时监控文件变化，调用相应的任务从新执行。

grunt-contrib-clean：清空文件、文件夹。

grunt-contrib-uglify:压缩JavaScript代码。

grunt-contrib-copy:复制文件、文件夹。

grunt-contrib-concat:合并多个文件的代码到一个文件中。

grunt-karma:前端自动化测试工具。

grunt-contrib-cssmin:压缩css代码。

 

 

---------------------------Grunt通配符分割线----------------------------

 

通配符模式：一般分别指定全部源文件路径是不切实际的，所以Grunt经过内置支持node-glob和minimatch库来匹配文件名（又称为globing）。

如何在文件路径匹配过程当中使用通配符？

（1）*匹配任意数量的字符，但不匹配/

（2）?匹配单个字符，但不匹配/

（3）**匹配任意数量的字符，包括/,只要它是路径中惟一的部分

（4）{}容许使用一个逗号分割的”或”表达式列表

（5）！在模式的开头用于排除一个匹配模式所匹配的任何文件

 

foo/*.js将匹配位于foo/目录下的全部的.js结尾的文件

foo/**/*.js将匹配位于foo/目录以及其子目录下的全部的.js结尾的文件

 

另外，为了简化原来复杂的通配符模式，Grunt容许指定一个数组形式的文件路径或一个通配符模式，全部模式按顺序处理，模式处理过程当中，带有！前缀的模式所匹配的文件不包含在结果集中，并且其结果集中的每一项也是惟一的。

例如：

{src:’foo/this.js’,dest:...}//指定单个文件

{src:[’foo/this.js’,’foo/that.js’,’foo/other.js’],dest:...}//指定一个文件数组

{src:’foo/th*.js’,dest:...}//使用一个匹配模式

 

一个独立的node-glob模式

{src:’foo/{a,b}*.js’,dest:...}或{src:’foo/a*.js’,’foo/b*.js’,dest:...}

 

{src:’foo/*.js’,dest:...}//foo目录中全部的.js文件，按字母顺序排列

{src:[’foo/bar.js’,’foo/*.js’],dest:...}//首先是bar.js,接着是剩下的js文件，并按照字母顺序排列

 

{src:[’foo/*.js’,’！foo/bar.js’],dest:...}//除bar.js之外的全部js文件，按照字母顺序排序

{src:[’foo/*.js’,’！foo/bar.js’,’foo/bar.js’],dest:...}//按照字母顺序排序的全部.js文件，但bar.js在最后

 

 

//模板也能够用于文件路径或匹配模式中

{src:[‘src/<%=basename%>.js’],dest:’build/<%=basename%>.min.js’}

//它们也能够引用配置中定义的其余文件列表

{src:[‘foo/*.js’,‘<%=jshint.all.src%>’],dest:...}

Gruntfile文件实例：

 

module.exports=function(grunt){ //任务配置，全部插件的配置信息 grunt.initConfig({ //获取package.json中的信息 pkg: grunt.file.readJSON('package.json'), uglify:{ options:{ stripBanners:true, banner:'/*! <%= pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build:{ src:'src/test.js', dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js' } }, cssmin:{ options:{ stripBanners:true, banner:'/*! <%= pkg.name%>-<%=pkg.version%>.css <%= grunt.template.today("yyyy-mm-dd") %> */\n' }, build:{ src:'src/test.css', dest:'build/<%=pkg.name%>-<%=pkg.version%>.css.min.css' } }, jshint:{ build:['Gruntfile.js','src/*.js'], options:{ jshintrc:'.jshintrc' } }, csslint:{ build:['src/*.css'], options:{ csslintrc:'.csslintrc' } }, watch:{ build:{ files:['src/*.js','src/*.css'], task:['jshint','uglify'], options:{spawn:false} } } }); //告诉grunt 咱们将使用插件 grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-jshint'); grunt.loadNpmTasks('grunt-contrib-csslint'); grunt.loadNpmTasks('grunt-contrib-watch'); //告诉grunt 当咱们在终端中输入grunt时须要作些什么，同时注意前后顺序 grunt.registerTask('default',['jshint','uglify','watch','csslint','cssmin']); };