gulp 前端项目构建工具，用来处理css，js，图片压缩等，编译less和scss以及coffeeScript等，提高开发效率。gulp是基于NodeJs而NodeJs又是基于CommonJs的，所以我们要想使用gulp需要先安装NodeJs。运行如下两条命令来查看是否安装成功。
npm是node包管理工具，随着node自动安装
gulp安装
淘宝镜像安装 npm install -g cnpm --registry=https://registry.npm.taobao.org
1.全局安装gulp
npm install --global gulp
2.局部安装gulp
创建一个项目，我这里叫mygulp，然后cmd命令进入到此目录文件夹，输入
npm init
此时会发现项目目录下多了一个package.json文件
之后执行以下命令来初始化我们刚创建好的项目
npm install --save-dev gulp
在项目根目录创建gulpfile.js文件，先在gulpfile.js文件创建一个任务，看能否运行成功
然后在cmd命令行输入gulp task1
执行多个任务，gulp.task('default',gulp.series['task1','task2']);
gulp的常用功能：
1.复制加移动文件
任务：要程序把index.html文件复制一份到app文件夹下
gulpfile.js
然后执行gulp task3，看到执行结果：
2.创建webServer
- 下载gulp-webServer npm install - -save-dev gulp-webserver
在node_modules文件夹中有gulp-webserver文件夹证明已经安装成功
- 在gulpfile.js中引入gulp-webServer
var server = require("gulp-webServer");
放在浏览器上效果图：
而且保存的时候可以实现同步刷新
3.合并和压缩js文件
npm install - -save-dev gulp-concat
npm install - -save-dev gulp-uglify
然后在gulpfile.js里面输入如下代码，来合并多个js文件
var concat = require("gulp-concat");
效果如图：
压缩js文件
修改刚才的合并代码如下，其中pipe叫做管道符：
然后我们再看scipt.js里面的效果
4.编译sass到css
less
sass box color:red 不是咱们平常写css的习惯，所以scss就应运而生
scss box{color:red;}
npm install - -save-dev gulp-sass
然后我们创建scss文件夹，再在里面新建一个a.scss文件，a.scss内容如下：
在gulpfile.js里面编写如下内容
这时我们会看到项目里自动生成了一个新的css文件夹里面有了新的a.css文件
5.css的合并和压缩
合并gulp-concat 压缩 gulp-minifiy-css
cnpm install gulp-minify-css --save-dev 也可以用npm install gulp-minify-css --save-dev 哪个能用就用哪个
之后我们来合并以及压缩css文件夹里的a.css和b.css
别忘记先引入gulp-minify-css
var cssmin = require('gulp-minify-css');
压缩后生产style.css如下：
6.压缩图片
在cmd中运行 cnpm install gulp-imagemin --save-dev因为我们已经采用淘宝镜像替换掉了npm，所以以后的安装都可以采用cnpm来安装
如果想深度压缩图片还需要在cmd中运行 cnpm install imagemin-pngquant --save-dev这个时候我们看package.json文件，发现都已经安装成功
在项目里新建一个image文件夹，里面放上一张图片，然后在gulpfile.js里面进行配置如下：别忘了先引入：var imagemin = require('gulp-imagemin');
之后我们看到项目里自动生成了img文件夹，并且里面有压缩好的图片
但是压缩完之后，两张图片的大小并没有多大的改变，现在我们可以进行深度压缩
还是 别忘了先引入var pngquant = require('imagemin-pngquant');
然后配置任务如下：
这时gulp项目生成了一个新的文件夹dist/img下有刚刚压缩过的图片