gulp的部署
gulp是基于nodejs环境下的，所以本文默认已经部署好nodejs环境：
首先需要再用npm在全局环境下安装gulp，以方便在任何文件目录下运行gulp命令
npm install -g gulp其次需要在项目文件中安装局部gulp，作为项目依赖
npm install gulp然后再项目文件夹中创建gulpfile.js文件，用来运行gulp任务
gulp的基本使用
1、需要在gulpfile.js文件中引入gulp模块以及项目插件（插件需要局部下载）
var gulp = require('gulp'); //gulp模块
var less = require('gulp-less'); //less编译插件
var cssmin = require('gulp-cssmin'); //css压缩插件
var uglify = require('gulp-uglify'); //js压缩插件
var concat = require('gulp-concat'); //合并代码的插件
var connect = require('gulp-connect'); //运行本地服务器插件
var imagemin = require('gulp-imagemin'); //图片压缩插件
var open = require('open'); //打开文件或者url插件2、提前整理好项目所需路径
var app = {
srcPath:'src/', //src 开发路径
buildPath:'build/', //build运行路径
distPath:'dist/' //dist发布路径
};3、创建任务，把srcPath开发路径lib文件夹中的的前段框架（比如JQuery）同步到其它目录下，并实现实时更新
/*把bower下载的前端框架放到我们项目当中*/
gulp.task('lib',function () {
gulp.src(app.srcPath +'lib/**') // **表示所有文件，包含子孙文件夹子下的文件
.pipe(gulp.dest(app.buildPath+'lib'))
.pipe(gulp.dest(app.distPath+'lib'))
// 如果这个目录下面的东西改变了我就在浏览器里面刷新
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});4、创建任务，把srcPath开发路径下次的html文件同步到其他目录
/*2.定义任务 把所有html文件移动另一个位置*/
gulp.task('html',function () {
/*要操作哪些文件 确定源文件地址*/
gulp.src(app.srcPath+'**/*.html') /*src下所有目录下的所有.html文件*/
.pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目标位置
.pipe(gulp.dest(app.distPath))
.pipe(connect.reload()) //当内容发生改变时， 重新加载。
});5、把开发的less文件转成css放到build目录下，以及把css文件压缩到diist目录下
gulp.task('less',function () {
gulp.src(app.srcPath+'style/**.less')
.pipe(concat('index.less'))
.pipe(less())
.pipe(gulp.dest(app.buildPath+'css/'))
/*经过压缩，放到dist目录当中*/
.pipe(cssmin())
.pipe(gulp.dest(app.distPath+'css/'))
.pipe(connect.reload())
});6、把js文件合并
/*合并js*/
gulp.task('js',function () {
gulp.src(app.srcPath+'js/**/*.js')
.pipe(concat('index.js'))
.pipe(gulp.dest(app.buildPath+'js/'))
.pipe(uglify())
.pipe(gulp.dest(app.distPath+'js/'))
.pipe(connect.reload())
});7、把图片进行压缩
/*压缩图片*/
gulp.task('image',function () {
gulp.src(app.srcPath+'images/**/*')
.pipe(gulp.dest(app.buildPath+'images'))
.pipe(imagemin())
.pipe(gulp.dest(app.distPath+'images'))
.pipe(connect.reload())
});8、把前面的任务进行捆绑
/*同时执行多个任务 [其它任务的名称]
* 当执行bulid时，会自动把数组当中的所有任务给执行了。
* */
gulp.task('build',['less','html','js','image','lib']);9、定义一个Server任务，用来监听文件是否有改变，从而实现热更新
/*定义server任务
* 搭建一个服务器。设置运行的构建目录
* */
gulp.task('server',['build'],function () {
/*设置服务器*/
connect.server({
root:[app.buildPath],//要运行哪个目录
livereload:true, //是否开启热更新。
port:9999 //端口号
})
/*监听哪些文件，如果文件发生改变，就执行相应的任务*/
gulp.watch(app.srcPath + 'lib/**/*',['lib']);
gulp.watch(app.srcPath+'**/*.html',['html']);
gulp.watch(app.srcPath+'js/**/*.js',['js']);
gulp.watch(app.srcPath+'images/**/*',['image']);
gulp.watch(app.srcPath+'style/**/*.less',['less']);
//通过浏览器把指定的地址 （http://localhost:9999）打开。
open('http://localhost:9999');
});10、最后创建一个默认的gulp任务，当在终端输入gulp即可运行Server任务
/*定义默认任务
* 直接执行gulp 会调用的任务
* */
gulp.task('default',['server']);