grunt及gulp的使用

grunt是压缩代码，合并代码，检测代码书写规范
grunt也是前端自动化，构建项目工具
grunt官网：http://www.gruntjs.net/
grunt是基于：nodeJs
在cmd环境验证是否靠谱并检查版本：node -v和npm -v

---

一：grunt使用流程

1.使用cmd安装grunt命令环境
      npm install grunt-cli -g
      使用cmd验证是否安装成功
      grunt --version

2.需要准备两个文件

  Gruntfile.js        编写任务
  package.json        工程文件（项目配置文件）

3.编写具体任务

    module.exports=function (grunt){};

4.运行任务

    需要找到，Gruntfile这个js所在目录
    *在cmd命令行里面输入:grunt

5.使用cmd安装本地grunt

    需要在本地安装grunt
    npm install grunt

---

二：如何使用grunt压缩js,contrib-uglify

使用方法：grunt-contrib-uglify

1：grunt编写具体任务格式（sjon格式）：

    主任务名:{
        子任务名:{},
        子任务名:{},
        子任务名:{},
        子任务名:{},
        子任务名:{},
        子任务名:{},
        子任务名:{}
    }

2：在cmd命令下载contrib-uglify模块

    npm install grunt-contrib-uglify
    运行
    grunt ugligy(主任务名称)

3：在cmd命令下载css模块

    npm install grunt-contrib-cssmin

4：配置文件

    package.json
    在cmd命令行输入
        npm install grunt --save-dev
        npm init

5：在cmd命令下载监听

    npm install grunt-contrib-watch

---

gulp是：前端自动化构建工具，跟grunt一样，gulp运行比grunt快

一：gulp和grunt区别：

  1:gulp:快，跟nodejs一样快
  2:grunt:相对慢
  3:公司里面大部分情况用的都是gulp
    官网:http://www.gulpjs.com.cn/
    插件：http://gulpjs.com/plugins/

二：使用流程

1.使用cmd安装一个全局gulp命令环境

npm install gulp-cli -g

2.使用cmd验证安装成功

gulp --version

3.准备俩文件

gulpfile.js         gulp任务编写文件
package.json        工程文件

4.编写gulp任务

引入模块
编写任务

5.使用cmd安装本地gulp

npm install gulp

6.下载模块

npm install gulp-uglify
npm install gulp-cssmin
npm install gulp-html
npm install gulp-rename

7.使用cmd运行

gulp+任务名