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

时间:2022-04-12 11:49:04

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、创建一个网站项目

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

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

package.json 基础文件编写

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

4、给项目安装grunt

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

安装方法:npm-install grunt --save-dev 回车(注意package.json文件内容变化)

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

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

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

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

5、Gruntfile.js 基础文件编写

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

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

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

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

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

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

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

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

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

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

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

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

6.3、安装css插件 grunt-postcss

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

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

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

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的配置信息如下:

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

6.6、安装image插件 grunt-spritesmith

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

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

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

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

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

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

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

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

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

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

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

6.9、安装contrib-copy插件(监控项目文件的插件)

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

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

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

6.10、安装contrib-watch插件(监控项目文件的插件)

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

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

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

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

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

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

6.12、源文件目录结构

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

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拼接到一张图片上生成类,调用类名使用图片