Grunt教程——初涉Grunt_tools, grunt 教程

作者：大漠日期：2013-11-02 点击：18930

前端自动化，这样的一个名词听起来非常的有吸引力，向往力。当今时代，前端工程师需要维护的代码变得及为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具，能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多，并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知，百度有FIS,腾讯有Modjs，360有燕尾服，还有很多团队在使用Ant，Shell等，而现在讨论较多的是Grunt。

出于对这方面的兴趣爱好，我也开始加入Grunt的使用大军，也开始在学习并尝试使用Grunt。那么从今天开始，我和大家将一起学习和使用Grunt。

Grunt是什么

Grunt是一个基于JavaScript上的一个很强大的任务管理器(task runner)，或许这么一说让很多人觉得费解，简单来说就是你可以在你的终端机上，用JavaScript去执行一些程序来完成一些任务。比如说验证HTML、CSS、JavaScript的语法，压缩CSS、JavaScript、图像，Sass、LESS和Stylus编译成CSS等等，这些东西佛教徒吧很适合用Grunt来解决。

Grunt其实就是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。他可以更好的帮助一个团队更好的提高效率、减少错误率。

简单点来说，Grunt不仅仅是构建工具，实际上他只是任务运行器，管理每个子任务的自动化运行，我们还能使用他做更多东西。

为什么要用Grunt

或许有很多要都像我一样，会问“为什么要用Grunt”？其实用一句话可以概括出来：为了自动化。对于前端项目，为了明确模块分工，我们可以会将JavaScript、CSS代码拆解成很多个模块，他们都有独立的一个个文件，但这样一来用来页面上，增加了文件个数，同时也产生过多的Http请求，可从性能的角度来考虑，不利于页面优化。所以我们需要合并这些JavaScript和CSS文件。这样一来，也期望有一种工具能代替我们手工操作，去完成这些任务。

大家都非常清楚，在项目发布之前，我们都需要做一个步骤，那就是尽可能的将项目中的文件进行尽可能压缩，比如JavaScript、CSS、images甚至是HTML文件，主要目的是减小加载文件的带宽。另外，在很多情况为了安全性考虑，我们需要对我们项目的源代码做一些单元测试和回归测试。然而这些工作都是一些重复性的、乏味的工作。对于一个小型项目来说，或许没有太大的感觉，但对于一个大中型的项目，特别的参与人员过多的项目时，这些工作就显得更重要了。同时让大家更觉得自动化工具是多么的重要。

Grunt能做什么

Grunt就是一个工具箱，就像一个百宝箱，拥有非常丰富的任务插件，可以帮助开发人员实现各式各样的构建目标。

在Grunt工具箱中，按任务目标我们可以分为：

编译文档型：比如编译LESS、Sass、Stylus、Coffeescript等；
文件操作型：比如说合并、压缩JavaScript、CSS、图片等；
质量保障型：比如JSHint、Jasmin、Mocha等；
类库构建型：比如说Backbone.js、ember.js、angular.js等。

这些任务都依赖于给Grunt提供的插件来完成的，但很多工作依旧需要在命令终端手工输入命令来完成这些操作。为此在Grunt中可以使用watch任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。

运行Grunt需要什么？

前面也说过，Grunt是基于Node.js基础上运行的。需要能正常运行Grunt，必先在你的系统上正确安装Node.js和NPM。

如果你从未接触过node.js并不用太担心，只需要根据教程可以很容易帮助您在系统上安装Node.js。

环境好了之后，可以通过终端命令中安装grunt运行工具：

$ npm install -g grunt-cli

Grunt的运行工具具有两个版本，一个是服务器端的版本（grunt），另一个是客户端版本(grunt-cli)。而我们在项目中需要安装的是客户端版本。也就是上面所示的安装命令。这条命令将会把grunt命令植入到你的系统路径中，这样就允许你从任意目录来运行它(定位到任意目录运行grunt命令)。

一个Grunt项目还有两个文件特别的重要：package.json和Gruntfile.js，前者用于Nodejs包管理，比如Grunt插件安装，后者是Grunt配置文件，配置任务或者自定义任务。

package.json:这个文件被用来存储已经作为npm模块发布的项目元数据（也就是依赖模块）。你将在这个文件中列出你的项目所依赖的Grunt(通常我们在这里配置Grunt版本)和Grunt插件(相应版本的插件)
Gruntfile.js:通常这个文件被命名为Gruntfile.js或者Gruntfile.coffee，它是用于配置或者定义Grunt任务和加载Grunt插件的。

值得注意的是，package.json和Gruntfile.js两个文件都放置在项目的根目录中，并且应该与项目的源代码一起被提交。

创建package.json的方式

package.json是一个JSON文件，而这个文件是每个Grunt项目必备的文件，因此在首要条件需要先创建这个文件。创建package.json文件方式有很多种：

根据grunt-init模板自动创建一个特定的package.json文件；
在命令终端通过npm init命令自动创建一个基本的package.json文件；
从官网上复制或者下载一个package.json文件；
手工创建一个package.json文件；
在Grunt项目的根目录下运行npm install创建一个空的package.json文件(不过我没有成功过，一直有错误信息提示，不知道是不是我的系统还是node环境有问题，正在查找中)

package.json文件模板

我采用了一种最简单的方式——手工创建package.json文件。而这个文件又是Grunt项目中必备文件之一，因此如何创建package.json文件内容就非常的重要，那么这里，向大家显示一个最简单的package.json文件模板：

{
    "name":"项目名称",
    "version":"项目版本号",
    "description":"项目描述",
    "author":"项目创建者",
    "license":"项目版权",
    "devDependencies": {
        //项目依赖插件
    }
}

我们来看看一个测试项目的package.json文件中的真正内容：

{
  "name": "testGrunt",
  "version": "0.1.0",
  "description": "this is test project with grunt.",
  "author": "airen",
  "license": "BSD",
  "devDependencies": {
        "grunt": "~0.4.1"
    }
}

可以手动在package.json中添加Grunt的插件，也可以通过以下命令的方式向package.json文件中添加：

$ npm install grunt插件名 --save-dev

这不仅会在本地安装Grunt插件，它还会使用一个波浪形字符的版本范围自动将所安装的Grunt插件添加到项目依赖中。

例如使用下面的命令可以把最新版本的Grunt安装到你的项目中，并自动将它添加到你的项目依赖中：

$ npm install grunt --save-dev

特别声明：使用这个命令，在我的环境中没有成功过，希望有知道原因的朋友能告诉我，下面是报错信息：

npm ERR! Error: Invalid name: "testGrunt"
npm ERR!     at ensureValidName (/usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/fixer.js:281:15)
npm ERR!     at Object.module.exports.fixNameField (/usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/fixer.js:196:5)
npm ERR!     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/normalize.js:29:38
npm ERR!     at Array.forEach (native)
npm ERR!     at normalize (/usr/local/lib/node_modules/npm/node_modules/read-package-json/node_modules/normalize-package-data/lib/normalize.js:28:15)
npm ERR!     at final (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:310:33)
npm ERR!     at then (/usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:124:33)
npm ERR!     at /usr/local/lib/node_modules/npm/node_modules/read-package-json/read-json.js:284:48
npm ERR!     at fs.js:207:20
npm ERR!     at Object.oncomplete (fs.js:107:15)
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <npm-@googlegroups.com>

npm ERR! System Darwin 13.0.0
npm ERR! command "node" "/usr/local/bin/npm" "install" "grunt" "--save-dev"
npm ERR! cwd /Users/airen/Sites/grunt/testGrunt
npm ERR! node -v v0.10.13
npm ERR! npm -v 1.3.2
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /Users/airen/Sites/grunt/testGrunt/npm-debug.log
npm ERR! not ok code 0

创建Gruntfile.js文件

package.json文件搞定之后，就可以在项目根目下创建Gruntfile.js文件，这个时候你可以使用grunt-init或者直接手工创建一个。我们先来看一个Gruntfile.js的文件模板：

module.exports = function(grunt){
    // 构建任务配置
    grunt.initConfig({
        //读取package.json的内容，形成个json数据
        pkg: grunt.file.readJSON('package.json'),

        //Grunt 任务配置
    });

    //加载Grunt插件
    grunt.loadNpmTasks('Grunt插件名');

    //默认的Grunt任务
    grunt.registerTask('default',['Grunt任务'])；
};

我们来看一个简单的示例：

module.exports = function(grunt) {
    // 构建任务配置
    grunt.initConfig({
        //读取package.json的内容，形成个json数据
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            //文件头部输出信息
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            //具体任务配置
            build: {
                //源文件
                src: 'src/hello-grunt.js',
                //目标文件
                dest: 'build/hello-grunt-min.js'
            }
        }
    });
    // 加载指定插件任务
    grunt.loadNpmTasks('grunt-contrib-uglify');
    // 默认执行的任务
    grunt.registerTask('default', ['uglify']);
};

到此，Grunt项目所需的package.json和Gruntfile.js文件都算是创建完成。有了这两个文件之后，Grunt项目算是万事具备，只欠东风了。你只需要在你的Grunt项目下运行：

$ npm install

执行完后，你将会在你的命令终端看到一大串类似于下面的一些信息：

...
npm http 200 https://registry.npmjs.org/source-map/-/source-map-0.1.31.tgz
npm http GET https://registry.npmjs.org/wordwrap
npm http GET https://registry.npmjs.org/amdefine
npm http 304 https://registry.npmjs.org/amdefine
npm http 304 https://registry.npmjs.org/wordwrap
grunt@0.4.1 node_modules/grunt
├── which@1.0.5
├── dateformat@1.0.2-1.2.3
├── eventemitter2@0.4.13
├── colors@0.6.2
├── hooker@0.2.3
├── async@0.1.22
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── findup-sync@0.1.2 (lodash@1.0.1)
├── iconv-lite@0.2.11
├── lodash@0.9.2
├── nopt@1.0.10 (abbrev@1.0.4)
├── rimraf@2.0.3 (graceful-fs@1.1.14)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── minimatch@0.2.12 (lru-cache@2.3.1, sigmund@1.0.0)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

grunt-contrib-uglify@0.2.5 node_modules/grunt-contrib-uglify
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
└── uglify-js@2.4.1 (uglify-to-browserify@1.0.1, async@0.2.9, source-map@0.1.31, optimist@0.3.7)

这个时候表示你的Grunt项目创建完成。你的项目结构也将变化成：

|--testGrunt
|----Gruntfile.js
|----node_modules
|--------grunt
|--------grunt-contrib-uglify
|----package.json

这里演示的仅仅是一个简单的示例，给大家对Grunt有一个初步的认识，在接下来，我将和大家一起探讨有关于Grunt更多的应用，希望对大家有所帮助。

如需转载，烦请注明出处：http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html

上一篇: 使用Grunt启动和运行 | 下一篇: 初学Foundation之入门篇

w3cplus

Grunt教程——初涉Grunt

Grunt是什么

为什么要用Grunt

Grunt能做什么

运行Grunt需要什么？

创建package.json的方式

package.json文件模板

创建Gruntfile.js文件

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品

w3cplus

你在这里

Grunt教程——初涉Grunt

Grunt是什么

为什么要用Grunt

Grunt能做什么

运行Grunt需要什么？

创建package.json的方式

package.json文件模板

创建Gruntfile.js文件

关注我们

合作网站

友情链接

关于我们

关于站长

我的作品