gulp 基于流 任务化 （所以理解简单 容易上手）
以下代码为整体使用规则：
单个test的使用 gulp html gulp json
//声明引用文件
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
var open = require('open');
// 声明全局变量 定义目录路径
var app = {
srcPath:'src/', //源代码位置
devPath:'build/', //整合之后的文件 开发环境所需的文件
prdPath:'dist/' //用于生产 部署的文件
};
//创建gulp任务（gulp.task('name',function(){}）
gulp.task('lib',function() {
gulp.src('bower_components/**/*.js') //gulp.src 读取文件
.pipe(gulp.dest(app.devPath +'vendor')) // .pipe进行操作 gulp.dest() 进行文件拷贝
.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') //其他less文件可以使用@import引用index.less
.pipe($.plumber())
.pipe($.less()) // 实际使用的是gulp.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')) //进行合并
.pipe(gulp.dest(app.devPath +'js'))
.pipe($.uglify()) //进行压缩
.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:4000
});
open('http://localhost:4000');
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']);
