Grunt | XYX's Blog

序

使用构建工具去对 JS、CSS、HTML、LESS、IMG 等进行合并压缩构建到最后实现自动化构建项目。是前端工程师必备的技能之一

什么是项目构建？
- 编译项目中的js,sass,less
- 合并js/css等资源文件
- 压缩js/css/html等资源文件
- js语法的检查
构建工具的作用？
- 简化项目构建，自动化完成构建
  Grunt
Grunt中文官网
是一套前端自动化构建工具，一个基于nodeJs的命令行工具
它是一个任务运行器, 配合其丰富强大的插件
常用功能:
- 合并文件(js/css)
- 压缩文件(js/css)
- 语法检查(js)
- less/sass预编译处理

安装

举例创建一个简单的应用grunt_test

  |- build----------构建生成的文件所在的文件夹
  |- src------------源码文件夹   
      |- js---------------js源文件夹
      |- css--------------css源文件夹
  |- index.html-----页面文件
  |- Gruntfile.js---grunt配置文件(去官网获取，注意首字母大写)
  |- package.json---项目包配置文件
      {
        "name": "grunt_test",
        "version": "1.0.0"   
      }
  ```  
* 安装nodejs, 查看版本

node -v

1	* 全局安装 grunt-cli

npm install -g grunt-cli

* 安装grunt

npm install grunt –save-dev

1	* 运行构建项目命令

grunt //提示 Warning: Task “default” not found

* 配置文件: Gruntfile.js
  * 此配置文件本质就是一个node函数类型模块
  * 配置编码包含3步:
    1. 初始化插件配置
    2. 加载插件任务
    3. 注册构建任务
  * 基本编码:

官网有详细介绍
module.exports = function(grunt){

// 1. 初始化插件配置
grunt.initConfig({
    //主要编码处
});

// 2. 加载插件任务
// grunt.loadNpmTasks('grunt-contrib-concat');

// 3. 注册构建任务
grunt.registerTask('default', []);

};

  * 命令: grunt  //提示成功, 但没有任何效果(还没有使用插件定义任务)

## Grunt插件介绍
* grunt官网的插件列表页面 http://www.gruntjs.net/plugins 
* 插件分类:
    * grunt团队贡献的插件 : 插件名大都以contrib-开头
    * 第三方提供的插件 : 大都不以contrib-开头
* 常用的插件:
    * grunt-contrib-clean——清除文件(打包处理生成的)
    * grunt-contrib-concat——合并多个文件的代码到一个文件中
    * grunt-contrib-uglify——压缩js文件
    * grunt-contrib-jshint——javascript语法错误检查；
    * grunt-contrib-cssmin——压缩/合并css文件
    * grunt-contrib-htmlmin——压缩html文件
    * grunt-contrib-imagemin——压缩图片文件(无损)
    * grunt-contrib-copy——复制文件、文件夹
    * **grunt-contrib-requirejs**——合并压缩requirejs管理的所有js模块文件
    * grunt-contrib-watch——实时监控文件变化、调用相应的任务重新执行

## 合并js: 使用concat插件
  * 命令:

npm install grunt-contrib-concat –save-dev

1
2
3


* 配置: Gruntfile.js
  * 配置任务:

 concat: {
   options: { //可选项配置
     separator: ';'   //使用;连接合并
   },
   build: { //此名称任意
     src:  ["src/js/*.js"],  //合并哪些js文件
     dest: "build/js/built.js" //输出的js文件
   }
 }
 1
* 加载插件:

grunt.loadNpmTasks('grunt-contrib-concat');
1
* 注册任务:

grunt.registerTask('default', ['concat']);
1
2
* **grunt执行任务是同步的**，插件顺序要放对
* 命令:

grunt   //会在build下生成一个built.js
1
2
3
4
5
    

## 压缩js: 使用uglify插件
  * 先合并后压缩 
  * 下载

npm install grunt-contrib-uglify –save-dev

1 2	* 配置: Gruntfile.js * 配置任务:

pkg : grunt.file.readJSON('package.json'),
uglify : {
  options: {  //不是必须的
    banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
    '<%= grunt.template.today("yyyy-mm-dd") %> */'
  },
  build: {
    files: {
      'build/js/built.min.js': ['build/js/built.js']
    }
  }
}
1
* 加载任务:

grunt.loadNpmTasks('grunt-contrib-uglify');
1
* 注册任务:

grunt.registerTask('default', ['concat', 'uglify']);
1
* 命令:

grunt   //会在build下生成一个压缩的js文件
1
2
3

## js语法检查: 使用jshint插件
  * 命令:

npm install grunt-contrib-jshint –save-dev

1	* 编码: 创建.jshintrc

{

"curly": true,
"eqeqeq": true,
"eqnull": true,
"expr" : true,
"immed": true,
"newcap": true,
"noempty": true,
"noarg": true,
"regexp": true,
"browser": true,
"devel": true,
"node": true,
"boss": false,

//不能使用未定义的变量
"undef": true,
//语句后面必须有分号
"asi": false,
//预定义不检查的全局变量
"predef": [ "define", "BMap", "angular", "BMAP_STATUS_SUCCESS"]

}

1
2
3


* 配置 : Gruntfile.js
  * 配置任务:

jshint : {
  options: {
    jshintrc : '.jshintrc' //指定配置文件
  },
  build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
}
1
* 加载任务:

grunt.loadNpmTasks('grunt-contrib-jshint');
1
* 注册任务:

grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
1
* 命令:

grunt   //提示变量未定义和语句后未加分号 -->修改后重新编译
1
2
3

## 压缩/合并css文件：使用cssmin插件
  * 安装:

npm install grunt-contrib-cssmin –save-dev

1 2	* 配置 : Gruntfile.js * 配置任务:

cssmin:{
  options: {
    shorthandCompacting: false,//快速压缩
    roundingPrecision: -1//精确度
  },
  build: {
    files: {
        'build/css/output.min.css': ['src/css/*.css']
    }
  }
}
1
* 加载任务:

grunt.loadNpmTasks('grunt-contrib-cssmin');
1
* 注册任务:

grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);
1
* 命令:

grunt    //在build/css/下生成output.min.css
1
2
3
4
5
6

## 使用watch插件:(真正实现自动化-实时监控文件变化、调用相应的任务重新执行)
  * 命令: npm install grunt-contrib-watch --save-dev
  * 配置 : Gruntfile.js
  
    * 配置任务:

watch : {
  scripts : {
    files : ['src/js/*.js', 'src/css/*.css'],
    tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
    options : {spawn : false}  
  }
}
1
* 加载任务:

grunt.loadNpmTasks('grunt-contrib-watch');
1
* 注册任务:

grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'watch']);
改进：grunt.registerTask('myWatch', ['default','watch']);
1
* 命令:

grunt   //控制台提示watch已经开始监听, 修改保存后自动编译处理
```