项目构建

项目构建是指项目上线之前对项目源代码进行一系列处理，使其以最佳的形式运行于线上服务器。常见处理任包括以下几方面：
1 模块化开发可以实现功能的复用并解决模块间的依赖关系，缺点：使功能代码的碎片化程度增加。
2 使用less、sass等预处理器，可以降低CSS的维护成本，最终需要将这些预处理器编译成css文件；
3 对静态资源（css、js、html、images）压缩合并可以提升网页打开速度，提高性能；

常见的构建工具：Grunt,Gulp,webpack等

Gulp

Gulp是基于Nodejs开发的一个构建工具，借助gulp插件可以实现不同的构建任务，其优点是，简洁的配置和卓越的性能。
全局安装  
npm install -g gulp 会给我们配置一个环境变量
 环境变量:我们在命令行输入命令，可以分为两种
1 windows 自带的命令  ipconfig/all 自带的命令
2  第三方的软件提供的命令.
     我们怎么去看着环境变量,计算机--属性--高级系统设置--环境变量
  找到一个path 的变量名，这个是路径.
  我在命令行去输入命令，都是根据环境变量里面的path 去找对应的命令

Gulp基础

1 本地安装gulp
进入项目根目录执行 npm install gulp --save-dev(添加--save-dev会在package.json记录依赖关系)
2 在项目根目录中创建gulpfile.js,gulp会参考配置文件执行构建任务
例： //引入gulp
    var gulp=require("gulp");
    gulp.task("default",function(){
        //定义任务
        })
3 定义任务
在gulpfile.js定义构建任务，如压缩，合并等。
gulp是通过调用插件来完成具体构建任务，并且插件也都基于Nodejs，以编译LESS伪例
 安装 npm install gulp-less
 例：var gulp=require("gulp");
         less=require("gulp-less");
         gulp.task("less",function(){
             //定义任务
             return gulp.src('./public/less/*.less')
             .pipe(less())
             .pipe(gulp.dest('./public/css'))
             })
  4 执行任务
   打开命令行窗口并切换到项目根目录下，执行命令gulp less,这时候全局安装的gulp便以定义好的gulpfile.js执行构建任务了。

Gulp工作原理

 自动化任务运行器{
         文件合并 gulp-concat
         文本替换 gulp-replace
         文件拷贝 gulp-copy
         JS压缩   gulp-uglify
         CSS压缩  gulp-cssmin
         图片压缩  gulp-imagemin
 }
通过不同的插件实现构建任务，gulp只是配置文件调用执行了这些插件。