一、简介及安装：
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率
gulp的优点：基于流的操作、任务化。
常用api：src 、dest、watch、task、pipe
由于gulp是基于node的所以使用的时候需要通过npm或者cnpm安装全局安装（cnpm i -g gulp）
常用的gulp需要安装的包括gulp-clean gulp-connect gulp-concat gulp-cssmin gulp-imagemin gulp-less gulp-load-plugins gulp-uglify open
安装以上的gulp插件可以使用cnpm i --save-dev xxx(--save-dev可以使安装的插件的依赖保存在package.json中),同时有一种快捷的方式可以一次性安装多个，每个组件之间使用空格隔开cnpm i --save-dev gulp-concat gulp-connect等
安装完以上插件，package.json的文件会添加下面的依赖。
二、使用
首先需要创建一个gulpfile.js文件，使用require引入gulp模块，同时引入gulp-load-plugins模块（引入该模块的目的是为了当以后想要引入gulp-connect等插件的时候，可以通过$直接引入，这样比较方便）
下面结合具体的实例对以上进行说明：（具体的已经给出注释说明）
var gulp = require('gulp');
//引入gulp-load-plugins模块 注意要将其实例化
var $ = require('gulp-load-plugins')();
var open = require('open');
var app = {
srcPath: 'src/',
devPath: 'build/',
prdPath: 'dist/'
};
gulp.task('lib', function() {
gulp.src('bower_components/**/*.js')//读取文件目录
.pipe(gulp.dest(app.devPath + 'vendor'))//写入目录
.pipe(gulp.dest(app.prdPath + 'vendor'))
.pipe($.connect.reload());//重新刷新浏览器
});
gulp.task('html', function() {
gulp.src(app.srcPath + '**/*.html')
.pipe(gulp.dest(app.devPath))
.pipe(gulp.dest(app.prdPath))
.pipe($.connect.reload());
})
gulp.task('json', function() {
gulp.src(app.srcPath + 'data/**/*.json')
.pipe(gulp.dest(app.devPath + 'data'))
.pipe(gulp.dest(app.prdPath + 'data'))
.pipe($.connect.reload());
});
gulp.task('less', function() {
gulp.src(app.srcPath + 'style/index.less')
.pipe($.plumber())
.pipe($.less())//编译less文件
.pipe(gulp.dest(app.devPath + 'css'))
.pipe($.cssmin())//压缩css文件
.pipe(gulp.dest(app.prdPath + 'css'))
.pipe($.connect.reload());
});
gulp.task('js', function() {
gulp.src(app.srcPath + 'script/**/*.js')
.pipe($.plumber())
.pipe($.concat('index.js'))//将js文件合并到index.js文件中
.pipe(gulp.dest(app.devPath + 'js'))
.pipe($.uglify())//压缩js文件
.pipe(gulp.dest(app.prdPath + 'js'))
.pipe($.connect.reload());
});
gulp.task('image', function() {
gulp.src(app.srcPath + 'image/**/*')
//捕获处理任务中的错误
.pipe($.plumber())
.pipe(gulp.dest(app.devPath + 'image'))
.pipe($.imagemin())//压缩图片文件
.pipe(gulp.dest(app.prdPath + 'image'))
.pipe($.connect.reload());
});
//总的任务
gulp.task('build', ['image', 'js', 'less', 'lib', 'html', 'json']);
//清除目录中的内容
gulp.task('clean', function() {
gulp.src([app.devPath, app.prdPath])
.pipe($.clean());
});
gulp.task('serve', ['build'], function() {
$.connect.server({
root: [app.devPath],//读取路径
livereload: true,//自动刷新
port: 3000
});
//打开默认地址
open('http://localhost:3000');
//监控文件 当变化时执行相对应的任务
gulp.watch('bower_components/**/*', ['lib']);
gulp.watch(app.srcPath + '**/*.html', ['html']);
gulp.watch(app.srcPath + 'data/**/*.json', ['json']);
gulp.watch(app.srcPath + 'style/**/*.less', ['less']);
gulp.watch(app.srcPath + 'script/**/*.js', ['js']);
gulp.watch(app.srcPath + 'image/**/*', ['image']);
});
gulp.task('default', ['serve']);
由于刚开通博客，不怎么会排版，写得知识也只是个人理解，如果问题请指出。希望大神们多多指教。