初探grunt

今天开始正式学习grunt

参考博文：http://blog.fens.me/nodejs-grunt-intro/

一、关于grunt

Grunt是一个自动化的项目构建工具. 若是你须要重复的执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务. 那么你能够使用Grunt来处理这些任务, 你所须要作的只是配置好Grunt, 这样能很大程度的简化你的工做.

若是在团队中使用Grunt, 你只须要与其余人员约定好使用Grunt应该规避的问题, 就可以很方便的自动化的处理大部分的常见工做任务, 你所付出的努力几乎为0.

 

二、安装grunt

Grunt和Grunt插件都是经过npm, Node.js包管理器安装和管理的.

Grunt 0.4.x要求Node.js的版本>=0.8.0(也就是0.8.0及以上版本的Node.js才能很好的运行Grunt)。

个人系统环境

C:\Users\Administrator>node -v
v0.10.29

C:\Users\Administrator>npm -v
1.4.14

系统中已经安装好nodejs和npm，具体安装方法参考：http://www.jb51.net/article/33086.htm

和安装时"express不是内部命令"的解决方法：http://jingyan.baidu.com/article/922554468a3466851648f419.html

安装grunt-cli

为了方便使用Grunt，你应该在全局范围内安装Grunt的命令行接口(CLI)。要作到这一点，你可能须要使用sudo(OS X，*nix，BSD等平台中)权限或者做为超级管理员(Windows平台)来运行shell命令。

npm install -g grunt-cli

这条命令将会把grunt命令植入到你的系统路径中，这样就容许你从任意目录来运行它(定位到任意目录运行grunt命令)。

grunt-cli并不grunt，grunt-cli的做用是管理本地各版本的grunt，让命令行能够直接执行grunt命令。

注意，安装grunt-cli并不等于安装了grunt任务运行器！Grunt CLI的工做很简单：在Gruntfile所在目录调用运行已经安装好的相应版本的Grunt。这就意味着能够在同一台机器上同时安装多个版本的Grunt。

下面全局安装grunt-cli(-g)

C:\Users\Administrator>npm install -g grunt-cli
C:\Users\Administrator\AppData\Roaming\npm\grunt -> C:\Users\Administrator\AppDa
ta\Roaming\npm\node_modules\grunt-cli\bin\grunt
grunt-cli@0.1.13 C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-c
li
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

CLI如何工做

每次运行grunt时，它都会使用node的require()系统查找本地已安装好的grunt。正由于如此，你能够从你项目的任意子目录运行grunt。

若是找到本地已经安装好的Grunt，CLI就会加载这个本地安装好的Grunt库，而后应用你项目中的Gruntfile中的配置(这个文件用于配置项目中使用的任务，Grunt也正是根据这个文件中的配置来处理相应的任务)，并执行你所指定的全部任务。

安装grunt

接下来安装全局grunt（不要在乎盘符）

E:\nodejs>npm install -g grunt
grunt@0.4.5 C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.5
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── colors@0.6.2
├── rimraf@2.2.8
├── async@0.1.22
├── hooker@0.2.3
├── grunt-legacy-util@0.2.0
├── exit@0.1.2
├── lodash@0.9.2
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── nopt@1.0.10 (abbrev@1.0.5)
├── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

E:\nodejs>grunt
grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

执行grunt命令，咱们发现系统报错了，提示不能加载本地库。由于，grunt命令执行，是须要当前目录中包括package.json和Gruntfile.js两个文件。

package.json，是npm项目配置文件
Gruntfile.js，是专门用来配置grunt的配置文件

接下来我就建立一个helloworld的项目

E:\nodejs>express -e hello

在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每一个依赖来自动安装适当版本的依赖。

这里有一些为项目建立package.json文件的方式：

• 大多数的grunt-init模板都会自动建立一个项目特定的package.json文件。

• npm init命令会自动建立一个基本的package.json文件。

E:\nodejs\hello>npm install

添加Grunt和Grunt插件到一个现有的package.json中最简单的方式就是使用npm install <module> --save-dev命令。这不只会在本地安装<module>，它还会使用一个波浪形字符的版本范围自动将所安装的<module>添加到项目依赖中。

安装-save-dev就能够了，直接把grunt做为devDependencies写入的package.json中。

E:\nodejs\hello>npm install grunt --save-dev

{
  "name": "hello",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.2.0",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5"
  },
  "devDependencies": {
    "grunt": "^0.4.5" }
}

上述命令也能够用于Grunt插件和其余的node模块的安装。当完成操做后请确保更新后的package.json文件也要与你的项目一块儿提交。

而后，咱们再执行grunt，系统提示缺乏Gruntfile文件

E:\nodejs\hello>grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

在原目录下建立gruntfile.js文件

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

一个Gruntfile由下面几部分组成：

• "wrapper"函数(包装函数)
• 项目和任务配置
• 加载的Grunt插件和任务
• 自定义任务

在上面的Gruntfile中，项目的元数据会从项目的package.json文件中导入到grunt配置中，同时grunt-contrib-uglify插件的uglify任务被配置用于压缩一个源文件，同时使用该元数据(导入的元数据)动态的生成一个标语(banner)注释。在命令行运行grunt时默认会运行uglify任务。

再次运行grunt，这时提示是grunt-contrib-uglify包找不到，是Gruntfile.js配置文件中的错误了。

E:\nodejs\hello>grunt
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.

Aborted due to warnings.

由于package.json上没有这个依赖库，因此要编辑一下package.json

{
  "name": "hello",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.2.0",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "~0.2.4"
  }
}

注意，这里使用的grunt-contrib-uglify版本是0.2.4

编辑完后就npm它一下

E:\nodejs\hello>npm install

根据这段代码，咱们须要创建src和build文件夹

build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }

在src里创建一个简单的js文件，注意文件名要和根目录名相同

var hello = function(name){
    return 'Hello ' + name;
}

再来执行grunt

E:\nodejs\hello>grunt
Running "uglify:build" (uglify) task
File "build/hello.min.js" created.

Done, without errors.

grunt运行正常，而且执行了uglify:build的任务。打开build/nodejs-grunt.min.js文件

/*! hello 2014-07-08 */
var hello=function(a){return"Hello "+a};

咱们能够看到一个新生成的压缩文件nodejs-grunt.min.js。

上面的例子，是一个js文件压缩的例子。

 先写到这，继续熟悉咯~