基于grunt的web端开发环境搭建（简）

目标与实现：

1、安装node.js环境；

2、安装grunt环境与对应插件；

3、利用grunt进行端自动化构建（检查、合并、压缩等）；

工具与软件：

1、node-v6.9.1-x64；

2、webstorm;

步骤：

一、node安装

到官网下载node-v6.9.1-x64或者更高版本，用其默认步骤安装。安装完毕，打开dos窗口，检验如下代表安装成功：

Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。

C:\Users\neil0>node -v
v6.9.1

C:\Users\neil0>

二、grunt全局安装（grunt-cli）

在网络支持的环境下安装，grunt需要node环境支持，所有必须node安装成功后执行此步骤。打开dos窗口，用npm执行install -g grunt-cli命令，如下，表示安装成功；

Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。

C:\Users\neil0>npm install -g grunt-cli
C:\Users\neil0\AppData\Roaming\npm\grunt -> C:\Users\neil0\AppData\Roaming\npm\node_modules\grunt-cli\bin\grunt
C:\Users\neil0\AppData\Roaming\npm
`-- grunt-cli@1.2.0


C:\Users\neil0>

三、建立工程

在webstom中或者直接在硬盘目录下新建一个工程grunt_test，根目录下新建文件夹build、src、test及文件Gruntfiles.js及package.json，如下：                                                                                   

这里需要说明下Gruntfile.js及package.json文件的内容。package.json是一个json格式文件，作为资源而存在，此文件定义了项目名称、版本号及本项目所依赖的插件等。Gruntfile.js是一个配置文件，存放一些配置信息。

在工程创建之后，需要首页定义资源文件即package.json里的数据，定义内容如下：（这里定义了项目名称、版本号，依赖中内容为空这样定义之后，就可以安装grunt了。）

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {

  }
}

 

四、安装grunt

这里安装grunt是批在该项目中安装grunt工具与插件。打开dos窗口，进入到工程目录文件，例如我这里路径为D:\实验中心\WEB\grunt_test，键入命令：