Grunt快速入门教程

95 阅读 0 评论 63 点赞

我是靠谱客的博主灵巧过客，这篇文章主要介绍Grunt快速入门教程，现在分享给大家，希望可以做个参考。

Grunt介绍
- 中文主页 : http://www.gruntjs.net/
- 是一套前端自动化构建工具，一个基于nodeJs的命令行工具
- 它是一个任务运行器, 配合其丰富强大的插件
- 常用功能:
  - 合并文件(js/css)
  - 压缩文件(js/css)
  - 语法检查(js)
  - less/sass预编译处理
  - 其它…
安装nodejs, 查看版本
复制代码node -v
```
1
2
node -v
```
创建一个简单的应用grunt_test
复制代码|- build----------构建生成的文件所在的文件夹 |- src------------源码文件夹 |- js---------------js源文件夹 |- css--------------css源文件夹 |- index.html-----页面文件 |- Gruntfile.js---grunt配置文件(注意首字母大写) |- package.json---项目包配置文件 { "name": "grunt_test", "version": "1.0.0" }
```
1
2
3
4
5
6
7
8
9
10
11
12
|- build----------构建生成的文件所在的文件夹
|- src------------源码文件夹   
    |- js---------------js源文件夹
    |- css--------------css源文件夹
|- index.html-----页面文件
|- Gruntfile.js---grunt配置文件(注意首字母大写)
|- package.json---项目包配置文件
    {
      "name": "grunt_test",
      "version": "1.0.0"   
    }
```
全局安装 grunt-cli
复制代码npm install -g grunt-cli
```
1
2
npm install -g grunt-cli 
```
安装grunt
复制代码npm install grunt --save-dev
```
1
2
3
npm install grunt --save-dev
```
运行构建项目命令
复制代码grunt //提示 Warning: Task "default" not found
```
1
2
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', []); };
```
1
2
3
4
5
6
7
8
9
10
11
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-watch——实时监控文件变化、调用相应的任务重新执行
合并js: 使用concat插件
- 命令:
  复制代码npm install grunt-contrib-concat --save-dev
```
1
2
npm install grunt-contrib-concat --save-dev
```
- 编码:
  - src/js/test1.js
    复制代码(function () { function add(num1, num2) { return num1 + num2; } console.log(add(10, 20)); })();
```
1
2
3
4
5
6
7
(function () {
  function add(num1, num2) {
    return num1 + num2;
  }
  console.log(add(10, 20));
})();
```
  - src/js/test2.js
    复制代码(function () { var arr = [2,3,4].map(function (item, index) { return item+1; }); console.log(arr); })();
```
1
2
3
4
5
6
7
(function () {
  var arr = [2,3,4].map(function (item, index) {
    return item+1;
  });
  console.log(arr);
})();
```
- 配置: Gruntfile.js
  - 配置任务:
    复制代码concat: { options: { //可选项配置 separator: ';' //使用;连接合并 }, build: { //此名称任意 src: ["src/js/*.js"], //合并哪些js文件 dest: "build/js/built.js" //输出的js文件 } }
```
1
2
3
4
5
6
7
8
9
10
concat: {
  options: { //可选项配置
    separator: ';'   //使用;连接合并
  },
  build: { //此名称任意
    src:  ["src/js/*.js"],  //合并哪些js文件
    dest: "build/js/built.js" //输出的js文件
  }
}
```
  - 加载插件:
    复制代码grunt.loadNpmTasks('grunt-contrib-concat');
```
1
2
grunt.loadNpmTasks('grunt-contrib-concat');
```
  - 注册任务:
    复制代码grunt.registerTask('default', ['concat']);
```
1
2
grunt.registerTask('default', ['concat']);
```
  - 命令:
    复制代码grunt //会在build下生成一个built.js
```
1
2
grunt   //会在build下生成一个built.js
```
压缩js: 使用uglify插件
- 下载
  复制代码npm install grunt-contrib-uglify --save-dev
```
1
2
npm install grunt-contrib-uglify --save-dev
```
- 配置: 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-<%=pkg.name%>-<%=pkg.version%>.min.js': ['build/js/built.js'] } } }
```
1
2
3
4
5
6
7
8
9
10
11
12
13
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-<%=pkg.name%>-<%=pkg.version%>.min.js': ['build/js/built.js']
    }
  }
}
```
  - 加载任务:
    复制代码grunt.loadNpmTasks('grunt-contrib-uglify');
```
1
2
grunt.loadNpmTasks('grunt-contrib-uglify');
```
  - 注册任务:
    复制代码grunt.registerTask('default', ['concat', 'uglify']);
```
1
2
grunt.registerTask('default', ['concat', 'uglify']);
```
  - 命令:
    复制代码grunt //会在build下生成一个压缩的js文件
```
1
2
grunt   //会在build下生成一个压缩的js文件
```
js语法检查: 使用jshint插件
- 命令:
  复制代码npm install grunt-contrib-jshint --save-dev
```
1
2
npm install grunt-contrib-jshint --save-dev
```
- 编码: .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
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "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"]
}
```
- 修改src/js/test1.js
  复制代码(function () { function add(num1, num2) { num1 = num1 + num3 return num1 + num2; } console.log(add(10, 20)); })();
```
1
2
3
4
5
6
7
8
(function () {
  function add(num1, num2) {
    num1 = num1 + num3
    return num1 + num2;
  }
  console.log(add(10, 20));
})();
```
- 配置 : Gruntfile.js
  - 配置任务:
    复制代码jshint : { options: { jshintrc : '.jshintrc' //指定配置文件 }, build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件 }
```
1
2
3
4
5
6
7
jshint : {
  options: {
    jshintrc : '.jshintrc' //指定配置文件
  },
  build : ['Gruntfile.js', 'src/js/*.js'] //指定检查的文件
}
```
  - 加载任务:
    复制代码grunt.loadNpmTasks('grunt-contrib-jshint');
```
1
2
grunt.loadNpmTasks('grunt-contrib-jshint');
```
  - 注册任务:
    复制代码grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
```
1
2
grunt.registerTask('default', ['concat', 'uglify', 'jshint']);
```
  - 命令:
    复制代码grunt //提示变量未定义和语句后未加分号 -->修改后重新编译
```
1
2
grunt   //提示变量未定义和语句后未加分号 -->修改后重新编译
```
使用cssmin插件
- 安装:
  复制代码npm install grunt-contrib-cssmin --save-dev
```
1
2
npm install grunt-contrib-cssmin --save-dev
```
- 编码:
  - test1.css
    复制代码#box1 { width: 100px; height: 100px; background: red; }
```
1
2
3
4
5
6
#box1 {
  width: 100px;
  height: 100px;
  background: red;
}
```
  - test2.css
    复制代码#box2 { width: 200px; height: 200px; background: blue; }
```
1
2
3
4
5
6
#box2 {
  width: 200px;
  height: 200px;
  background: blue;
}
```
  - index.html
    复制代码<link rel="stylesheet" href="build/css/output.min.css"> <div id="box1"></div> <div id="box2"></div>
```
1
2
3
4
<link rel="stylesheet" href="build/css/output.min.css">
<div id="box1"></div>
<div id="box2"></div>
```
- 配置 : Gruntfile.js
  - 配置任务:
    复制代码cssmin:{ options: { shorthandCompacting: false, roundingPrecision: -1 }, build: { files: { 'build/css/output.min.css': ['src/css/*.css'] } } }
```
1
2
3
4
5
6
7
8
9
10
11
12
cssmin:{
  options: {
    shorthandCompacting: false,
    roundingPrecision: -1
  },
  build: {
    files: {
        'build/css/output.min.css': ['src/css/*.css']
    }
  }
}
```
  - 加载任务:
    复制代码grunt.loadNpmTasks('grunt-contrib-cssmin');
```
1
2
grunt.loadNpmTasks('grunt-contrib-cssmin');
```
  - 注册任务:
    复制代码grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);
```
1
2
grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'cssmin']);
```
  - 命令:
    复制代码grunt //在build/css/下生成output.min.css
```
1
2
grunt    //在build/css/下生成output.min.css
```
使用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
2
3
4
5
6
7
8
watch : {
  scripts : {
    files : ['src/js/*.js', 'src/css/*.css'],
    tasks : ['concat', 'jshint', 'uglify', 'cssmin'],
    options : {spawn : false}  
  }
}
```
  - 加载任务:
    复制代码grunt.loadNpmTasks('grunt-contrib-watch');
```
1
2
grunt.loadNpmTasks('grunt-contrib-watch');
```
  - 注册任务:
    复制代码grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'watch']); 改进：grunt.registerTask('myWatch', ['default','watch']);
```
1
2
3
grunt.registerTask('default', ['concat', 'uglify', 'jshint', 'watch']);
改进：grunt.registerTask('myWatch', ['default','watch']);
```
  - 命令:
    复制代码grunt //控制台提示watch已经开始监听, 修改保存后自动编译处理
```
1
2
grunt   //控制台提示watch已经开始监听, 修改保存后自动编译处理
```

adNpmTasks(‘grunt-contrib-watch’);
* 注册任务:
grunt.registerTask(‘default’, [‘concat’, ‘uglify’, ‘jshint’, ‘watch’]);
改进：grunt.registerTask(‘myWatch’, [‘default’,‘watch’]);
* 命令:
grunt //控制台提示watch已经开始监听, 修改保存后自动编译处理
```