前端工程

Windows 平台下 Grunt 构建工具的安装与使用

原创 · 前端工程化

DOCX: 【原创】Windows平台下Grunt构建工具的安装与使用.docx

初识Grunt

Grunt是啥

很火的前端自动化小工具，基于任务的命令行构建工具。

Grunt能帮我们干啥

假设有这样一个场景：编码完成后，你需要做以下工作 - HTML去掉注析、换行符 - HtmlMin - CSS文件压缩合并 – CssMinify - JS代码风格检查 – JsHint - JS代码压缩 – Uglyfy - image压缩 - imagemin 重复而枯燥的工作太多了，我们需要一个自动化的工作流程，于是Grunt应运而生。

bashgrunt-cli命令行工具，grunt安装到项目中，也可以当成插件，grunt-init是个脚手架工具，它可以帮你完成项目的自动化创建，包括项目的目录结构，每个目录里的文件等。具体要看你运行grunt-init指定的模板，以及创建过程中你对问题的回答。

grunt配置文件解析

从官网下载package.json和Gruntfile.js 文件放到项目根目录，并对文件进行修改配置. package.json //项目自动化所依赖的相关插件。

bashGruntfile.js //项目自动化工作流配置文件。

package.json 文件的基本内容：

bashGruntfile.js 文件的基本内容：

常用命令

bashnpm install
grunt live
grunt build

Windows平台下安装Grunt

bashGrunt基于Node.js，其中 npm 是 Node.js 的包管理器，而Grunt和Grunt插件就通过 npm 安装并管理。安装Node.js：官网http://nodejs.org/，下载并安装，现在的Node.js会自动安装npm。安装完成之后，打开命令行，（开始->输入CMD或开始->所有程序->命令提示符）。进入Node.js的安装目录（默认路径为"C:\Program Files\nodejs"）：可以通过以下2个命令：

查看 node.js 和 npm 的版本号

bash- node –v
- npm –v

安装Grunt

bash- npm install -g grunt

安装Grunt命令行（CLI）

bash- npm install -g grunt-cli

注1：-g代表全局安装，Grunt有两个版本：服务器端版本（grunt）和客户端版本（grunt-cli）。安装grunt-cli并不等于安装了grunt！grunt cli的任务很简单：调用与Gruntfile在同一目录中的grunt。这样带来的好处是，允许你在同一个系统上同时安装多个版本的grunt。而grunt使用模块结构，除了安装命令行界面以外，还要根据需要安装相应的模块。这些模块应该采用局部安装，因为不同项目可能需要同一个模块的不同版本。上述命令执行完后，grunt 命令就被加入到你的系统路径中了，以后就可以在任何目录下执行此命令了。

创建新的Grunt项目

假设这个项目安装在D盘根目录。

进度D盘

- d:

创建项目文件夹

bash- mkdir testProject

进入文件夹

bash- cd testProject

创建package.json文件

在你的项目文件夹根目录下添加两个文件：package.json 和 Gruntfile.js。 package.json: 此文件用于存储项目的元数据。

bashGruntfile:用来配置或定义任务并加载Grunt插件。

执行 npm init向导创建package.json文件

根据默认的grunt-init模板，引导你创建一个“基本”的package.json文件。

bash- npm init

根据提示填写信息（都允为空）：

[TABLE]

bashname: (GruntT)　　　　　 // 模块名称：为空则使用项目文件夹名称代替 version: (0.0.0)　　　　 // 版本号 description:　　　　　　 // 描述：会在npm搜索列表中显示 entry point: (index.js)　// 模块入口文件 test command:　　　　　　// 测试脚本 git repository:　　　　　// git仓库地址 keywords:　　　　　　　　// 关键字：用于npm搜索，多个关键字用空格分开 author:　　　　　　　　　// 作者 license: (BSD-2-Clause)  // 开原协议

[/TABLE]

手动创建package.json文件

添加项目/模块的描述信息：

[TABLE]

代码{ 　"name": "my-project", 　"version": "0.1.0" }

[/TABLE]

安装Grunt和Grunt插件

修改package.json文件新增节点devDependencies

[TABLE]

bash{ 　"name": "my-project", 　"version": "0.1.0", 　"devDependencies": { 　　"grunt": "~0.4.1", 　　"grunt-contrib-cssmin": "~0.7.0" 　} }

[/TABLE]

注：devDependencies里面的参数，指定了项目依赖的Grunt和Grunt插件版本。其中"~0.7.0"代表安装该插件的某个特定版本，如果只需安装最新版本，可以改成"*"。然后执行：

bash- npm install

这时你会发现项目文件夹中多了个node_modules文件夹，其里面就是对应的Grunt和Grunt插件。

命令方式安装

通过 npm install <module> --save-dev 命令安装最新版的Grunt：

bash- npm install grunt --save-dev

安装我们所需要的插件：

bash- npm install grunt-contrib-cssmin --save-dev

代码注：其中--save-dev，表示将它作为你的项目依赖添加到package.json文件中devDependencies内。如果你要安装指定版本的Grunt或者Grunt插件，只需要运行npm install grunt@VERSION --save-dev命令，其中VERSION就是你所需要的版本。

创建Gruntfile.js文件

bashmodule.exports = function(grunt) {

// 配置任务参数

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

代码cssmin: {
combine: {
files: {'css/release/compress.css': ['css/*.css'] }
},
minify: {
options: {

keepSpecialComments: 0, /* 删除所有注释 */ banner: '/* minified css file */'

代码},
files: {'css/release/master.min.css': ['css/master.css']}
}
}
});

// 插件加载（加载 "cssmin" 模块）

bashgrunt.loadNpmTasks('grunt-contrib-cssmin');
// 自定义任务：通过定义 default 任务，可以让Grunt默认执行一个或多个任务
grunt.registerTask('default', ['cssmin']);

代码}

执行配置中所有的任务：

bashgrunt

执行某个特定的任务：

bashgrunt cssmin

测试Grunt压缩css文件

接着我们在项目文件夹中创建个子文件夹，命名为CSS，并且在里面创建base.css和master.css，2个CSS文件，你可以随便写点内容在里面。然后在命令行中执行grunt，看到如下提示说明执行成功。 Running "cssmin:combine" (cssmin) task File css/release/compress.css created. Running "cssmin:minify" (cssmin) task File css/release/master.min.css created. Done, without errors。