目标与实现:
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,键入命令: