grunt 快速入门：使用 grunt 自动化构建工具进行前端开发

2014-09-06 0 条评论 9,506 次阅读 被赞了 0 次
目录
[隐藏]

grunt 是前端开发的自动化构建工具，对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting 等，自动化工具可以减轻你的劳动，简化你的工作。

下面志文工作室以一个项目的构建为例，简介入门 grunt 进行前端开发的过程，主要涉及到 javascript 代码合并与压缩，css 代码合并与压缩，以及图片压缩。

1. 安装

grunt 依赖 nodejs，首先安装下载 nodejs:

http://nodejs.org/download/

安装 nodejs 后，打开命令行，安装 grunt-cli，执行命令：

npm install -g grunt-cli

2. 配置 grunt 项目文件

在项目中配置 grunt 所需文件，grunt 即可知道如何自动化工作。
这里主要工作是在项目的根目录创建 package.json 与 Gruntfile.js 两个文件。

2.1 创建 package.json 文件

执行命令：

npm init

按提示逐步操作即可。

该文件主要配置项目基本信息及工具插件依赖，以让 nodejs 知道下载哪些插件。具体可参考如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "lxxh",
  "version": "0.0.2",
  "description": "不花流量看离线笑话",
  "author": "志文工作室",
  "license": "BSD",
  "engines": {
      "node": ">= 0.8.0"
  },
  "scripts": {
    "test": "grunt qunit"
  },
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.2",
    "grunt-css": ">0.0.0",
    "grunt-contrib-imagemin": ">0.8.0",
    "grunt-contrib-jshint": "~0.6.2",
    "grunt-contrib-concat": "~0.3.0"
  }
}

或参考如下文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "jquery-plugin",
  "version": "0.0.0-ignored",
  "engines": {
    "node": ">= 0.8.0"
  },
  "scripts": {
    "test": "grunt qunit"
  },
  "devDependencies": {
    "grunt-contrib-clean": "~0.4.0rc6",
    "grunt-contrib-jshint": "0.1.1rc6",
    "grunt-contrib-qunit": "0.1.1rc6",
    "grunt-contrib-concat": "0.1.2rc6",
    "grunt-contrib-uglify": "0.1.1rc6",
    "grunt-contrib-watch": "0.2.0rc5",
    "grunt": "0.4.0rc7"
  }
}

https://github.com/cowboy/jquery-tiny-pubsub/blob/master/package.json

2.2 创建 Gruntfile.js 文件

该文件主要为 grunt 所使用。

配置参考如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
module.exports = function(grunt) {
  grunt.initConfig({
    //如果需要用到 package.json 中的参数变量，可使用 pkg 引用（如 pkg.name）
    pkg : grunt.file.readJSON('package.json'),
    //JSHint 代码质量检查任务
    jshint: {
      all: ['www/js/index.js'] //files to lint
    },
    //concat 多文件合并任务
    concat: {
      js: {
        options: {
          separator: ';' //多文件分隔符
        },
        src: ['www/js/*.js'], //合并哪些文件
        dest: 'www/index.min.js' //合并后输出
      },
      css : {
        src: ['www/css/*.css'],
        dest: 'www/index.min.css'
      }
    },
    //uglify 压缩任务，压缩 js
    uglify: {
      js: {
        files: {
          'www/js/index.min.js': ['www/js/index.min.js'] //替换保存
        }
      }
    },
    //cssmin 压缩任务，压缩 css
    cssmin: {
      css: {
        src: 'www/index.min.css',
        dest: 'www/index.min.css'
      }
    },
    //图片压缩
    imagemin: {
      dist: {
        options: {
          optimizationLevel: 3 //定义 PNG 图片优化水平
        },
        files: [{
          expand: true,
          cwd: 'img/',
          src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
          dest: 'img/' // 优化后的图片保存位置，覆盖旧图片，并且不作提示
        }]
      }
    }
  });
  //加载包含 jshint、concat 和 uglify 任务的插件
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-css');
  grunt.loadNpmTasks('grunt-contrib-imagemin');
   
  //默认被执行的任务列表
  grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'imagemin', "cssmin"]);
  //自定义任务列表
  grunt.registerTask('development', ['jshint']);
  grunt.registerTask('production', ['concat', 'uglify', 'imagemin', "cssmin"]);
  grunt.registerTask('img', ['imagemin']);
};

也可参考如下两个文件。该 Gruntfile.js 文件中的一些配置参数是从 tiny-pubsub.jquery.json 中读取的。

https://github.com/cowboy/jquery-tiny-pubsub/blob/master/Gruntfile.js
https://github.com/cowboy/jquery-tiny-pubsub/blob/master/tiny-pubsub.jquery.json

3. 安装项目依赖的库

进入项目根目录（Gruntfile.js 所在目录），执行命令：

npm install

执行后会在项目根目录下创建 node_modules ，并下载依赖库到该目录。

或者参考 package.json 文件中的依赖配置，逐个安装，参考命令：

npm install grunt –save-dev
npm install grunt-contrib-jshint –save-dev
npm install grunt-contrib-concat –save-dev
npm install grunt-contrib-uglify –save-dev
npm install grunt-css –save-dev
npm install grunt-contrib-imagemin –save-dev

4. 执行 grunt

接下来只需要执行 grunt 命令，即会根据 Gruntfile.js 文件配置自动化构建了。
既然是自动化构建，在执行该命令前，项目自然应当已经在开发中了。

当然，也可指定执行 Gruntfile.js 文件配置的某个任务。如：

grunt 或 grunt default
grunt concat
grunt jshint
grunt uglify
grunt development
grunt production

借助大量的插件，你可以使用 grunt 非常方便的简化许多工作。进一步学习请移步官网文档。

5. 相关参考

http://gruntjs.com/
http://www.gruntjs.net/docs/getting-started/

相关文章:

Default ThumbnailWeb 前端开发的包管理工具 bower 快速入门 Default ThumbnailJSHint：在 Eclipse 和 sublime 中配置与使用 javascript 语法风格检测工具 Default ThumbnailJavaScript 中的异步编程方式与实践 Default Thumbnailbootstrap前端开发框架简介 Default ThumbnailJavaScript 事件机制详细解读(摘) Default Thumbnail可选择可编辑输入的下拉框功能模拟的实现 Default Thumbnail开发模块化的JavaScript组件 Default Thumbnailjavascript 代码校验器 eslint: 在 sublime text 编辑器中安装和配置 eslint Default ThumbnailWindows 上安装 Jekyll Default ThumbnailnodeJS 中从命令行等待并读入用户输入实现与用户交互的方法 Default Thumbnailfetch API 实现 GET 和 POST 请求 Default Thumbnail让 iframe 页面强制刷新的方法
点赞 (0)
知识共享许可协议
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Captcha Code