grunt的使用和安装

官网：https://gruntjs.com/

   使用方法

       1、grunt它是基于node

           判断node是否安装

       2、装grunt的命令行

           npm install -g grunt-cli

                      全局      命令行

       3、检查是否安装成功

           grunt --version

       4、准备两个文件

           package.json

               工程文件（配置文件）

               --------------

               在node中下载模块的时候--save 保存在工程文件中

               如果把项目给别人，npm install

               --------------

               有两种方法创建工程文件

                   1、手动创建

                   2、命令行自动创建

                       npm init

                       需要些一些项目相关的内容

                       注：name 除了grunt或者空（默认grunt）别写，其他随便

           Gruntfile.js

               注：首字母大写

               配置你的任务

               module.exports=function(grunt){

                   console.log(1);

               };

               运行任务：

                   进入gruntfile对应的文件夹，执行grunt

                   报错：没有发现本地的grunt

       5、安装grunt

           npm install grunt

           -------------------

           注：在grunt里有三种安装方式:

               npm install grunt

               npm install grunt --save

               npm install grunt --save-dev 推荐

           -------------------

       6、编写任务

           https://gruntjs.com/plugins

           模块分两种：

            contrib-XXX  grunt团队自己写的

            XXX          个人编写的

       7、编写流程

           a)下载模块

               npm install 模块名 --save-dev

               压缩js：npm install grunt-contrib-uglify --save-dev

           b)引入模块

               grunt.loadNpmTasks('模块名')

           c)配置具体的任务

               grunt.initConfig({

                   /*主任务名：{  //主任务必须写模块名

                       子任务名：{ //子任务随便

                           src:要压缩的文件目录

                           dest:压缩后的文件目录

                       }

                   }*/

               })

               如果想多文件分开

                   expand:true,//确定分开压缩

                   cwd:'js/',//现在（当前要压缩文件的目录）

               注意：

                   1、js在压缩的时候默认是破话压缩如果想不破坏

options: {

                       mangle: false

                   }

                   2、html

                   options: {

                       removeComments: true,//移出注释

                       collapseWhitespace: true//移出空白格

                   },

                   3、图片压缩的时候

                       *.{png,jpg,gif}

                       a: {  //次任务名

                           files: [{

                               expand: true,

                               cwd: 'src/',

                               src: ['**/*.{png,jpg,gif}'],

                               dest: 'dist/'

                       }]

                   4、监听模块：

                       watch:{//主任务名

                           a:{//子任务名

                               files:'css/index.css',

                               //你要监听的模块，

                               tasks:'cssmin'

                               //你要用到的任务

                           }

                       }

                   5、合并文件

                       grunt-contrib-concat

           d)执行任务

               grunt 主任务名

                   主任务里面的子任务都会执行

               grunt 主任务名:子任务名

               grunt 想要这么执行，必须配置默认项

                   配置默认项：

                   grunt.registerTask('default',['任务名'])