安装 Grunt

安装 Grunt 前，你需要首先下载（http://nodejs.org/）并安装 node.js （npm已经包含在内）。npm是 node packagedmodules 的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。

然后在命令行中输入以下命令：

1. 在全局环境中安装 grunt-cli ：npm install -g grunt-cli 。
2. 进入 /bootstrap/ 根目录，然后执行 npm install 命令。npm将读取 package.json 文件并自动安装此文件中列出的所有被依赖的扩展包。

上述步骤完成后，你就可以运行Bootstrap 所提供的各个 Grunt 命令了。

除错

如果你在安装依赖包或者运行 Grunt 命令时遇到了问题，请首先删除npm自动生成的 /node_modules/ 目录，然后，再次运行 npm install 命令。

Grunt学习文档（参考网址：http://www.gruntjs.net/docs/getting-started/）

一、操作过程

1、  到nodejs官网下载相应安装包（http://nodejs.org/），傻瓜式安装。安装时，会自动配好环境变量，不需要自己配。

2、  在控制台中，通过node –v，npm -v来测试是否安装好。

3、在控制台中输入npminstall –g grunt-cli,将Grunt命令行（CLI）安装到全局环境中。

         4、新建项目studyGrunt,在项目中添加两份文件package.json 和 Gruntfile.js。

         5、package.json中写入代码：

{

"name": "studyGrunt",

"version": "0.1.0",

"devDependencies": {

"grunt": "~0.4.1",

"grunt-contrib-jshint": "~0.6.0",

"grunt-contrib-nodeunit": "~0.2.0",

"grunt-contrib-uglify": "~0.2.2"

}

                  }

         6、执行命令npm install。命令执行完后，会在项目中生成node-modules文件夹

         7、Gruntfile.js中写入代码：

                   module.exports =function(grunt) {

                            grunt.initConfig({

                   pkg:grunt.file.readJSON('package.json'),

                   uglify: {

                            options: {

                   banner: '/*! <%= pkg.name%><%= grunt.template.today("yyyy-mm-dd") %> */\n'

                            },

                            build: {

                            src:'src/studyGrunt.js',

                            dest: 'build/<%=pkg.name %>.min.js'

                            }

                   }

                            });

                   grunt.loadNpmTasks('grunt-contrib-uglify');

                  grunt.registerTask('default',['uglify']);

}

8、在工程目录中新建文件夹src,src文件夹中新建文件studyGrunt.js

9、在studyGrunt.js中写入一些js代码，例如写入：console.log(“HelloGrunt”);

10、接下来就可以在控制台中打入指令grunt，执行这个指令便会将刚刚新建的studyGrunt.js打包压缩为一个studyGrunt.min.js文件，存放在工程目录下的bulid文件夹中。现在就可以说“我会用grunt打包文件了！！！”

二、简单解释

Grunt和grunt插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。

2.1nodejs的使用

注意：npm包含在nodejs中，不需要单独安装。

（1）、nodejs的安装

A、到nodejs官网下载相应安装包（http://nodejs.org/），傻瓜式安装。安装时，会自动配好环境变量，不需要自己配。

B、安装好后，可以通过node –v，npm -v来测试是否安装好。如下图

（2）、npm命令的使用

A、npm install –g表示在全局环境中安装

B、npm install 在当前目录下安装

此时便可以进行grunt的安装，与使用

Goto Grunt!!!  Goto Grunt!!! Goto Grunt!!!

（3）、使用nodejs做一个服务器

其实就是写了一段js代码，用nodejs进行编译，并使之运行起来，即成了一个服务器。此处即体现了nodejs的作用，就是可以“编译”js代码，进行运行。代替了浏览器的编译过程

步骤：a、新建一个example.js文件

b、在文件中添加js代码

var http = require('http');

http.createServer(function (req, res) {

                            res.writeHead(200,{'Content-Type': 'text/plain'});

                            res.end('HelloWorld\n');

}).listen(1337, '127.0.0.1');

console.log('Serverrunning at http://127.0.0.1:1337/');

c、打开控制台，进入example.js所在目录

d、敲入命令nodeexample.js

e、打开浏览器在地址栏输入http://127.0.0.1:1337/，页面中会显示HelloWorld。到此便用nodejs成功创建了一个服务器。

（4）、使用nodejs，直接编辑，编译，运行js代码

node回车进入有>的环境下，可以直接写js代码，运行

步骤：

a、  打开控制台，敲入node，控制台中会出现>

b、  敲入js代码，nodejs会自动运行这段js代码,如下图

                   首先定义了一个变量，然后打印。则控制台中会执行这段js代码，打印Hello Nodejs

2.2grunt的使用

2.2.1grunt的安装

(1)、将Grunt命令行（CLI）安装到全局环境中

在控制台中输入npm install –g grunt-cli,此命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

注意，安装grunt-cli并不等于安装了grunt！grunt CLI的任务很简单：调用与Gruntfile在同一目录中grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的grunt。

2.2.2grunt的使用

2.2.2.1、新建项目studyGrunt,在项目中添加两份文件package.json 和 Gruntfile.js

（1）、package.json

{

  "name":"studyGrunt",

 "version": "0.1.0",

 "devDependencies": {

"grunt": "~0.4.1",

          "grunt-contrib-jshint":"~0.6.0",

"grunt-contrib-nodeunit": "~0.2.0",

    "grunt-contrib-uglify":"~0.2.2"

         }

执行命令npm install。命令执行完后，会在项目中生成node-modules文件夹，并在其中安装了devDependencies中的插件，如下图：

（2） Gruntfile.js

Gruntfile.js文件是有效的JavaScript文件，应当放在项目根目录中，和package.json文件在同一目录层级，并和项目源码一起加入源码管理器。

下面是一个Gruntfile文件案例。

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/studyGrunt.js',

dest:'build/<%= pkg.name %>.min.js'

      }

    }

  });

  // 加载包含"uglify" 任务的插件。

grunt.loadNpmTasks('grunt-contrib-uglify');

  // 默认被执行的任务列表。

grunt.registerTask('default',['uglify']);

};

Gruntfile由以下几部分构成：

l  "wrapper" 函数

l  项目与任务配置

l  加载grunt插件和任务

l  自定义任务

A、"wrapper"函数

每一份Gruntfile（和grunt插件）都遵循同样的格式，你所书写的Grunt代码必须放在此函数内：

module.exports =function(grunt) {

  // Do grunt-related things in here

};

B、项目和任务配置

大部分的Grunt任务都依赖某些配置数据，这些数据被定义在一个object内，并传递给grunt.initConfig 方法。

在下面的案例中，grunt.file.readJSON('package.json') 将存储在package.json文件中的JSON元数据引入到gruntconfig中。由于<% %>模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少一些重复的工作。

你可以在这个配置对象中(传递给initConfig()方法的对象)存储任意的数据，只要它不与你任务配置所需的属性冲突，否则会被忽略。此外，由于这本身就是JavaScript，你不仅限于使用JSON；你可以在这里使用任意的有效的JS代码。如果有必要，你甚至可以以编程的方式生成配置。

与大多数task一样，grunt-contrib-uglify 插件中的uglify 任务要求它的配置被指定在一个同名属性中。在这里有一个例子, 我们指定了一个banner选项(用于在文件顶部生成一个注释)，紧接着是一个单一的名为build的uglify目标，用于将一个js文件压缩为一个目标文件。

// Projectconfiguration.

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'

    }

  }

});

C、加载grunt插件和任务

像 concatenation、[minification]、grunt-contrib-uglify 和 linting这些常用的任务（task）都已经以grunt插件的形式被开发出来了。只要在 package.json 文件中被列为dependency（依赖）的包，并通过npminstall安装之后，都可以在Gruntfile中以简单命令的形式使用：

// 加载能够提供"uglify"任务的插件。

grunt.loadNpmTasks('grunt-contrib-uglify');

注意： grunt--help 命令将列出所有可用的任务。

D、自定义任务

通过定义 default 任务，可以让Grunt默认执行一个或多个任务。在下面的这个案例中，执行 grunt 命令时如果不指定一个任务的话，将会执行uglify任务。这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务（可以带参数）。

// Defaulttask(s).

grunt.registerTask('default',['uglify']);

如果Grunt插件中的任务（task）不能满足你的项目需求，你还可以在Gruntfile中自定义任务（task）。例如，在下面的Gruntfile中自定义了一个default 任务，并且他甚至不依赖任务配置：

module.exports =function(grunt) {

 

  // A very basic default task.

grunt.registerTask('default','Log some stuff.', function() {

grunt.log.write('Loggingsome stuff...').ok();

  });

 

};

特定于项目的任务不必在Gruntfile中定义。他们可以定义在外部.js 文件中，并通过grunt.loadTasks 方法加载。

三、grunt常用插件的简单例子

1、  grunt-contrib-concat

separator：string

合并文件的时候，在个文件分割处加入separator参数指定的字符串

 

Banner:string

在合并后的文件的头部，添加banner参数指定的字符串

 

Footer:string

在合并后的文件的底部，添加footer参数指定的字符串

 

stripBanners:Boolean/object

当设置为true时，会去掉原先文件头部的banner

默认情况下为false,不会去掉原先被合并文件中的banner

grunt.initConfig({

concat: {

options: {

separator: ';'

    },

dist: {

src: ['src/intro.js', 'src/project.js', 'src/outro.js'],

dest: 'dist/built.js'

    }

  }

});

2、  grunt-conntrib-less

将less文件压缩为css文件

当Yuicompress:true时，将生成的css文件压缩

less: {

development: {

files: {

      "path/to/result.css": "path/to/source.less"

    }

  },

production: {

options: {

compress: true

    },

files: {

      "path/to/result.css": "path/to/source.less"

    }

  }

}

3、  grunt-contrib-ugliy

压缩js文件

asdf

pkg: grunt.file.readJSON('package.json'),

uglify: {

options: {

banner: '/*! <%= pkg.name %><%= grunt.template.today("yyyy-mm-dd") %> */\n'

      },

build: {

src: 'src/studyGrunt.js',

dest: 'build/<%= pkg.name %>.min.js'

      }

    }