web自动化开发环境配置详解

1、安装 nodejs

Grunt和所有grunt插件都是基于nodejs来运行的， https://nodejs.org/

安装完成之后在终端 node -v 查看安装版本

2、安装 grunt-CLI

要想使用grunt，首先必须将grunt-cli安装到全局环境中，使用nodejs的“npm install…”进行安装。

安装方法： npm install -g grunt-CLI 回车

注：mac系统在这句话前面加上“sudo”指令

安装完成输入 grunt 回车

3、创建一个网站项目

创建项目名称“project1”子目录为：source（源文件）dist（目标文件）Gruntfile.js(grunt任务配置文件) package.json（开发依赖项）

package.json 基础文件编写

4、给项目安装grunt

在项目文件“project1”下打开终端（命令行）

安装方法：npm-install grunt --save-dev 回车（注意package.json文件内容变化）

项目文件“project1”下回自动生成node_modules文件夹，这里就是存储grunt源文件的地方。

终端运行grunt回车会提示 Warning：Task “default” not found . Use --force to continue.（任务default没有找到），说明grunt安装成功

5、Gruntfile.js 基础文件编写

在运行grunt没有上面Warning提示 而是Done，without errors.

6、安装自己项目中所需要用的grunt插件

6.1、安装html插件 grunt-include-replace

安装方法：npm install grunt-include-replace --save-dev

Gruntfile.js文件中对includereplace的配置信息如下：

6.2、安装css插件 grunt-contrib-sass

安装方法： npm install grunt-contrib-sass --save-dev

Gruntfile.js文件中对sass的配置信息如下：

6.3、安装css插件 grunt-postcss

安装方法： npm install grunt-postcss --save-dev

Gruntfile.js文件中对postcss的配置信息如下：

6.4、安装postcss插件 grunt-autoprefixer

安装方法： npm install grunt-autoprefixer --save-dev

Gruntfile.js文件中对autoprefixer的配置信息如上图：

6.5、安装css插件 grunt-contrib-cssmin

安装方法： npm install grunt-contrib-cssmin --save-dev

Gruntfile.js文件中对cssmin的配置信息如下：

6.6、安装image插件 grunt-spritesmith

安装方法：npm install grunt-spritesmith --save-dev

Gruntfile.js文件中对sprite的配置信息如下：

6.7、安装image插件 grunt-contrib-imagemin

安装方法：npm install grunt-contrib-imagemin --save-dev

Gruntfile.js文件中对imagemin的配置信息如下：

6.8、安装全局插件 grunt-contrib-connect

安装方法：npm install grunt-contrib-connect --save-dev

Gruntfile.js文件中对connect的配置信息如下：

6.9、安装contrib-copy插件（监控项目文件的插件）

安装方法：npm install grunt-contrib-copy --save-dev

Gruntfile.js文件中对copy的配置信息如下：

6.10、安装contrib-watch插件（监控项目文件的插件）

安装方法：npm install grunt-contrib-watch --save-dev

Gruntfile.js文件中对watch的配置信息如下：

6.11、Gruntfile.js整体配置如下：

6.12、源文件目录结构

7、web自动化环境已经搭好，其他项目要使用项目的环境操作如下：

7.1、新建项目文件project2文件夹

7.2、将已经搭建好的项目中的package.json文件拷贝到新项目中

7.3、新项目中打开命令行（终端）

7.4、执行命令npm install (安装package.json中所有的插件)

7.5、将搭建好的项目中设置好的Grunt.js文件拷贝进来（需要修改的地方自行设置）

7.6、项目结构需要与原项目保持一致即可，需要更改自行设置

7.7、ok新的项目环境已经搞定，运行试试吧。

注：各插件的功能

全局插件：

*grunt-contrib-watch       //监控文件以及保存文件后索要执行的任务

grunt-contrib-clean       //清空、删除文件

grunt-contrib-copy       //copy文件，有些不需要任何修改的文件需要赋值到其他位置

grunt-contrib-concat      //合并对个文件为一个文件

*grunt-contrib-connect     //构建实时预览开发环境

Html插件：

*grunt-include-replace     //可以外部引入其他的html文件

Css插件：

*grunt-contrib-sass        //编译scss文件成css文件

*grunt-contrib-cssmin      //压缩css文件

*grunt-postcss            //编译css文件放在指定的位置

Js插件：

grunt-contrib-jshint       //js语法检查

grunt-contrib-uglify       //压缩js文件

Image插件：

*grunt-contrib-imagemin    //压缩image

*grunt-spritesmith         //将多张image拼接到一张图片上生成类，调用类名使用图片