Grunt的一天

什么是grunt:一个javascript任务运行器。

安装步骤：
1、安装nodejs(生成npm[npm是nodejs的包管理器])

2、安装grunt-cli（grunt命令行）
全局安装grunt-cli ：打开命令行输入 npm install -g grunt-cli

说明安装成功！
3、grunt的安装和使用方法
a.在F盘下新建一个grunt文件夹，里面建2个空文件夹(build和src)，一个grunt配置文件（Gruntfile.js）[G大写]

b.在当前目录下输入命令行：npm init 一步步next之后，会出现一个package.json的文件，如图所示:

这个文件告诉我们项目的名称、版本号、描述、入口文件、作者等等。devDependencies{}告诉我们开发这个项目所要用到的所有插件。。。

4、安装grunt插件（所有要用到的插件都这么装）
在当前目录下输入命令行：npm install grunt –save-dev [–save-dev的意思就是说在当前目录下安装grunt的同时，顺便设置为该项目的开发依赖项]。安装成功后会在当前目录下新生成一个文件夹，如图所示：

并且在package.json的项目依赖配置文件里”devDependencies”会自动添加grunt的及其版本号。在自动生成的node_mudules里也会出现grunt文件夹（源文件），说明gurnt插件安装成功了。

5、配置Gruntfile.js文件
顾名思义：就是告诉grunt要做哪些事情。
先看一下简单配置：如图所示

 不妨先运行一下grunt:在命令行输入：grunt看看会出现什么--‘Done,without errors.’继续

6、Grunt插件介绍：Grunt官网
其中’contrib-‘是官方的并且标有星号标注，其他都是第三方提供的当然是通过官方审核的。先看几个简单常用的。
Contrib-jshit——javascript语法错误检查
Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
Contrib-clean——清空文件、文件夹
Contrib-uglify——压缩javascript代码
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码
karma——前端自动化测试工具

7、使用uglify插件（压缩javascript代码）
a.安装uglify插件
在当前目录下输入命令行输入：npm install grunt-contrib-uglify –save-dev这时在package.json和node_modules都会增加相应的信息和文件夹
b.配置Gruntfiles.js告诉插件要做什么
c.先准备一个zepto.js文件（未压缩过的）

然后开始在Gruntfile.js配置

   //包装函数module.exports = function(grunt) {   //任务配置，所有插件的配置信息    grunt.initConfig({        //获取package.json的信息        pkg:grunt.file.readJSON('package.json'),        //uglify插件的配置信息        uglify:{            options:{                stripBanners:true,                banner:'/*!<%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%>*/\n'            },            build:{                src:'src/zepto.js',                dest:'build/<%=pkg.name%>.min.js'            }        }    })    //告诉grunt我们将使用的插件    grunt.loadNpmTasks('grunt-contrib-uglify');    //告诉grunt当我们在终端输入gurnt时需要做些什么(注意先后顺序)    grunt.registerTask('default',['uglify']);}; 

第一步:pkg:获取package.json中的内容
第二步:对“uglify”配置
“options”中允许生成的压缩文件带banner，即在生成的压缩文件的加一段说明。
“build” 中配置源文件和目标文件。即规定要压缩谁？压缩之后会生成谁？build文件如果没有会自动生成。
第三步：告诉 grunt要使用的插件，如果要就写，不要就不写。
第四步：在控制台输入：grunt 得到结果如图：

我们发现在build下自动生成了一个压缩后的文件（文件大小发生了变化）。说明uglify压缩成功了。

8、使用jshint插件(检查javascript语法错误)
a.安装 ，命令行 npm install grunt-contrib-jshint – save-dev
b.配置，


‘.jshintrc’文件中代码的格式遵守严格的json语法，否则无效。
c.加载插件【这里没有先后顺序】
d.配置grunt命令启动，【这里有先后顺序】。你是希望先检查语法呢，还是先合并呢。——一般我们都是先检查语法的！！！
运行：
我们发现这里报错，并且没有执行合并，说明uglify并没有执行这就是我们想要的结果。

9、使用watch插件(真正实现自动化)
a.安装，
b.配置watch将监控那些文件的变化，以及这些文件一旦变化，要立即执行那些插件功能。

//watch插件的配置信息   watch:{       files:['src/*.js'],       tasks:['jshint','uglify'],       options:{spawn:false}   }

watch将监控src文件夹下所有的js文件的变化，一旦变化立即执行jshint和uglify两个插件功能。
c.加载

grunt.loadNpmTasks('grunt-contrib-watch');

d.配置grunt启动项 

 grunt.registerTask('default',['jshint','uglify','watch']);

e.运行

我们发现watch已经开始监控了。。。
现在我们对test.js文件做些更改并保存我们发现：

提示我们test.js文件发生了更改，并执行了‘jshint’方法。更重要的是，它现在还在监听、并未停止。那么我们将错误改正回来：

我们发现，test.js文件再次发生了变化，这次语法没有错误，并顺利的执行了jshint和uglify，执行完毕之后，重新监听。我们实现了——自动化。