前端构建工具gulp的使用

1、gulp是一个前端构建工具包，可以帮助我们解决在开发过程中遇到耗时的任务，它有易于使用、构建快速等特点。

2、环境配置：
（1）安装nodejs:
gulp插件都是基于nodejs来运行的， 下载nodejs网址https://nodejs.org/，
选装cnpm:由于 npm 安装速度慢，从而使用了淘宝的镜像及其命令 cnpm，具体介绍参照：官方网址：http://npm.taobao.org；
安装cnpm： npm install cnpm -g --registry=https://registry.npm.taobao.org
（2）全局安装gulp-cli： cnpm install gulp-cli -g
（3）创建package.json：切换到当前工作路径npm init
（4）局部安装gulp：如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上–save-dev：cnpm install gulp --save-dev
（5）创建gulpfile.js：
var gulp=require('gulp'); gulp.task('default',function(){ console.log('default'); }) //若在当前路径下运行gulp 会输出dfault说明gulp配置安装成功
（6）执行gulp命令

3、基本使用：
（1）gulp.task(参数1，参数2，参数3)：
介绍：创建一个gulp任务
参数说明：参数1：任务名称，参数二：任务所依赖的其他任务（可省略），参数3：执行的代码
（2）gulp.src()
（3）gulp.dest()
（4）gulp.watch()
4、例子

var gulp = require('gulp');
   //创建任务
gulp.task('copy-index', function() {

	//1、文件的拷贝
	//gulp.src取到指定的文件,gulp.dest将取到的文件写进去，pipe取到pipe参数内之前的输入流也就是src里面的文件
	gulp.src('./src/index.html')
		.pipe(gulp.dest('./dist'))
})
gulp.task('copy-html', function() {
	gulp.src('./src/html/*.html')
		.pipe(gulp.dest('./dist/html'))
})
gulp.task('copy-vendor', function() {
	gulp.src('./src/vendor/**')
		.pipe(gulp.dest('./dist/vendor'))
})
//**是匹配所有的文件夹，*.*是匹配所有的文件
gulp.task('copy-assets', function() {
	gulp.src('./assets/**/*.*')
		.pipe(gulp.dest('./dist/assets'))
})
//这行代码用于复制上面所有的文件
gulp.task('copy', ['copy-index', 'copy-html', 'copy-vendor', 'copy-assets'])