Grunt教程——初涉Grunt

前端自动化，这样的一个名词听起来很是的有吸引力，向往力。当今时代，前端工程师须要维护的代码变得及为庞大和复杂，代码维护、打包、发布等流程也 变得极为繁琐，同时浪费的时间和精力也愈来愈多，固然人为的错误也随着流程的增长而增长了更多的出错率。导致每个团队都但愿有一种工具，能帮助整个团队 在开发中能精简流程、提升效率、减小错误率。随之讨论自动化部署也愈来愈多，而且国内不少大型团队也都有本身成熟的自动化部署工具。据我所知，百度有 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更多的应用，但愿对你们有所帮助。