项目构建是指项目上线之前对项目源代码进行一系列处理，使其以最佳的形式运行于线上服务器。常见处理任包括以下几方面：
1、模块化开发可以实现功能的复用并解决模块间的依赖关系，但带来好处的同时也使得功能代码的碎片化（若干文件）程度增加。
2、使用less、sass等预处理器，可以降低CSS的维护成本，最终需要将这些预处理器编译成css文件；
3、对静态资源（css、js、html、images）压缩合并可以提升网页打开速度，提高性能；
以上任务完如果完全靠手动来完成是非常耗时耗力的且容易出错，实际开发通常借助构建工具来实现。
所谓构建工具是指通过一系简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。
常见的构建工具包括：Grunt、Gulp、F.I.S（百度出品）、webpack等。
1.1 Gulp
Gulp是基于Nodejs开发的一个构建工具，借助gulp插件可以实现不同的构建任务，其以简洁的配置和卓越的性能成为目前主流的构建工具。
全局安装 npm install -g gulp
1.1.1 Gulp基础
1、本地安装gulp
进入项目根目录执行npm install gulp --save-dev（添加--save-dev会在package.json记录依赖关系）。
2、任务清单
在项目根目录中创建gulpfile.js，gulp会参考这个配置文件执行构建任务。
3、定义任务
在gulpfile.js定义构建任务，如压缩、合并等。
gulp是通过调用插件来完成具体构建任务的，并且这些插件也都基于Nodejs,以编译LESS为例，安装npm install gulp-less，如下图定义任务
如上图定义了一个名称为less的任务，用来完成less编译成css的任务。
4、执行任务
打开命令行窗口并切换到项目根目录下，执行命令 gulp less，这时全局安装的gulp便以我们定义好的gulpfile.js执行构建任务了。
这样LESS文件便会编译成CSS文件，并保存在了./public/css目录下。
1.1.1 Gulp API
Gulp是基于NodeJS的，通过require可以引入一个NodeJS的包（模块），其作用类似于浏览器中的script标签引入资源，被引入的包存放在node_modules目录下。
引入gulp包（模块）后返回一个对象（习惯赋值给变量gulp），通过该对象提供的方法（API）完成任务的配置。
1、gulp.task() 定义各种不同的任务，如下图有两个参数
不同任务间存在依赖关系时，可以指定依赖，如下图
2、gulp.src() 需要构建资源的路径，字符串或数组（可以正则方式书写）
2、gulp.pipe() 管道，将需要构建的资源“输送”给插件。
3、gulp.dest() 构建任务完成后资源存放的路径（会自动创建）
4、gulp.watch()
通过监视某静态资源的修改，然后可以调用相应任务。
1.1.2 常用Gulp插件
gulp-less 编译LESS文件
gulp-autoprefixer 添加CSS私有前缀
gulp-cssmin 压缩CSS
gulp-rname重命名
gulp-imagemin 图片压缩
gulp-uglify 压缩Javascript
gulp-concat 合并
gulp-htmlmin 压缩HTML
gulp-rev 添加版本号
gulp-rev-collector 内容替换
gulp-useref
gulp-if