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']);
 
};