（1）什么是GULP
GULP是一个工具包，帮助我们解决开发过程中遇到的一些痛苦或者耗费时间长的任务，避免出现低级的错误，实际上就是帮程序员做一些低级的，重复性的工作。
特点：易于使用和学习，构建快速，插件高质
（2）GULP环境的配置（基于node.js）
1.安装node.js在官网上下载安装即可)
安装完后打开命令行输入 node -v 进行查看你安装node.js的版本
2.全局安装gulp-cli
命令行输入后回车进行安装 npm install gulp-cli -g
3.创建package.json
在自己的工作目录下命令行执行 npm init 一路回车就可以了
4.局部安装gulp
命令行输入后回车进行安装 npm install gulp --save-dev
5.创建gulpfile.js(gulp运行时依赖的js文件)
var gulp = require('gulp');
gulp.task('default', function(){
// place code for your default task here
});6.命令行执行gulp命令
（3）GULP基本使用
在gulpfile.js中进行使用：
// 第一个参数是任务的名称
// 第二个参数是任务所依赖的其它任务（可省略）
// 第三个参数是执行任务要运行的代码（也就是回调函数）（当传递第二个参数后可以省略）
gulp.task('my-task',function(){
// 取到指定的文件 .pipe将文件以流的形式进行输入 gulp.dest( './dist' ) 将文件拷贝到dist目录下
// 文件路径/*.html 是将文件夹下所有的html文件拷贝到指定的目录下
// 文件夹下存在文件夹的形式 采用 文件路径/**/*.*
guld.src('文件路径').pipe( gulp.dest( './dist' ) )
})接下来我们可以在工作目录的文件夹的命令行中输入 gulp my-task(可能会报错 命令行输入npm install gulp回车后安装完在运行gulp my-task)
// 监听文件的改变
gulp.watch()
当文件发生变化使执行一些任务：
gulp-task ( 'watch', function(){
gulp.watch( './src/index.html', ['copy-index'] );
} )（4）GULP的插件安装与使用（首先命令行安装插件 例如： npm install gulp-concat 在gulpfile.js中接收插件即var content = require('gulp-concat');）
1.连接JS （gulp-concat）
gulp.task( 'content', function(){
gulp.src( './src/script/**/*.js' ).pipe( content( 'output.js' ) ).pipe( gulp.dest( './dist/js' ) )
} )2.压缩JS（gulp-uglify）
gulp.task( 'content', function(){
gulp.src( './src/script/**/*.js' ).pipe( content( 'output.js' ) ).pipe( uglify() ).pipe( gulp.dest( './dist/js' ) )
} )3.编译sass （gulp-sass）
npm install gulp-sass
var sass = require('gulp-sass');
gulp.task( 'sass', function(){
gulp.src( './src/style/**/*.scss ).pipe( sass() ).pipe( minify() ).pipe( gulp.dest( './dist/js' ) )
} )4.最小化css（gulp-minify-css）
npm install gulp-minify-css
var minify = require('gulp-sass');5.文件重命名（gulp-rename）:生成两个版本的js一个是压缩版的一个是完整版的
npm install gulp-rename
var rename = require('gulp-rename');
gulp.task( 'content', function(){
gulp.src( './src/script/**/*.js' ).pipe( content( 'output.js' ) ).pipe( gulp.dest( './dist/js' ).pipe( uglify() ).pipe( rename( 'output1.js' ) ).pipe( gulp.dest( './dist/js' ) )
} )6.热更新（gulp-connect）:当修改完某个文件后进行保存后刷新相关的页面connect.reload（）
npm install gulp-connect；
var connect = require('gulp-connect');
gulp.task( 'server', function(){
connect.serve({
root: './dist', // 根目录
livereload: true // 支持自动刷新
})
} )7.错误处理（gulp-plumber）当时用监听的时候，保存文件出错会导致整个监听事件崩溃需要重新启动因此需要这个插件
npm install gulp-plumber；
var plumber= require('gulp-plumber');
gulp.task( 'sass', function(){
gulp.src( './src/style/**/*.scss ).pipe( plumber() ).pipe( sass() ).pipe( minify() ).pipe( gulp.dest( './dist/js' ) )
} )