前端自动化构建工具【grunt、gulp、webpack】

前端自动化构建工具【grunt、gulp、webpack】
1.它们的作用是什么？
以前的程序员，做项目的时候，需要大量的合并css，js文件，花费了大量的时间在合并压缩上面，在前端开发中会出现很多重复性、无意义的劳动。后来，为了希望这一切都可以自动完成，安装常用插件，合并插件、压缩插件等、就出现了这几种自动化构建工具。
2.简单介绍一下这三种工具？
Grunt是js任务管理工具（自动化构建工具）
优势：出来早，社区成熟 插件全
缺点：配置复杂 效率低（cpu占用率高）
Gulp是基于流的自动化构建工具
优点：配置简单 效率高 流式工作（一个任务的输出作为另外一个任务的输入）优点正好是grunt的缺点。
缺点：出现晚 插件少
Webpack 模块打包机
优点：模块化
缺点：配置复杂
3.安装node.js及npm
grunt、gulp、webpack这三种自动化构建工具都依赖node.js环境，所以我们需要先安装node。node.js不仅是服务器端js运行环境 还有 大工具包（npm）,前端用npm构建前端的开发环境、为了实现自动化构建及项目管理。（安装教程移步度娘）。

node.js的包分类：
1，全局包：全局环境下使用，可以在命令行任何目录下使用（-g）在所有项目都能用的情况下。
2，本地包：本地工程使用的包，某个项目需要用。
安装全局包cnpm
由于npm提供的包是在国外的服务器上，下载速度不能保证。所以实际使用中可以使用淘宝提供的，cnpm国内镜像（10分钟更新），下载速度快。在网络状况不好的时候用cnpm
安装步骤：

.grunt
grunt构建具体步骤：
安装全局grunt命令CLI 在任何目录下都可以使用grunt命令只不过无法执行：
npm install -g grunt-cli
创建工程目录：
mkdir 目录名
切换到当前目录：
cd 目录名
初始化工程：
npm init
安装本地grunt安装包。目的：多个版本可以在电脑上共存。
npm install grunt --save-dev
创建Gruntfile.js文件，用来配置或定义（task）并加载Grunt插件。
下面单独说Gruntfile.js文件的配置
安装各种grunt插件 --参考官方
grunt-contrib-less less编译
grunt-contrib-cssmin css压缩
grunt-contrib-uglify js压缩
grunt-contrib-watch 监控
grunt-contrib-concat 合并
执行任务task
关于Gruntfile.js文件配置：（官网）
Gruntfile.js文件配置需要和文件目录相结合下面是个模板的文件tree：

下面是Gruntfile.js文件配置模型：

合并js文件配置（压缩两个字去掉）：

将合并好的js文件进行压缩：

加入cssmin,less,watch,之后：

.gulp
创建工程目录
mkdir 目录名
切换当前目录
Cd 目录名
初始化工程进行配置文件
npm init
安装gulp、注册全局gulp
npm install -g gulp
安装本地gulp
npm install gulp --save-dev
创建grunt配置文件gulpfile.js 粘过去
创建build和src原文件（css js less在js文件内创建min文件）
安装插件 自带watch

.webpack
全局安装webpack
npm install webpack -g
在项目中安装webpack
初始化package.json,根据提示填写package.json的相关信息
npm init
将webpack依赖添加到package.json
npm install webpack --save-dev
Develop Server 工具（可选）
npm install webpack-dev-server --save-dev