说明
这个是使用laravel进行后台开发的，所以大部分的东西是适应laravel的工作流的，至于为什么没有使用laravel自带的工具，主要是为了能够更好的进行自定义。
目录结构
less js 等文件放在 resources/assets/ 下
通过watch 只要有改动就编译到 public/assets/ 对应的目录下
模块介绍
// 对less文件进行编译
gulp-less
// 生成带有hash后缀的静态文件
gulp-rev
// 对静态文件的引用路径进行替换，和上面的搭配使用
gulp-rev-collector
// js压缩
gulp-uglify
// 浏览器自动刷新
browser-sync
// 压缩css
gulp-minify-css
// 删除指定目录或文件
del
// 对es6的转换
gulp-babel
// 只编译有修改的部分，加快编译速度，但是不能检测js第一次的编译
gulp-changed
// 调试使用
gulp-debug
代码部分
var gulp = require('gulp'),
less = require('gulp-less'),
rev = require('gulp-rev'),
revCollector = require('gulp-rev-collector'),
uglify = require('gulp-uglify'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload,
minifycss = require('gulp-minify-css');
del = require('del');
babel = require('gulp-babel');
changed = require('gulp-changed');
// debug = require('gulp-debug');
var lessDir = ['resources/assets/less/**/*.less'];
var reloadDir = ['resources/views/**/*.*'];
// 监视内容
gulp.watch(lessDir,['dev-less']);
gulp.watch('resources/assets/js/*.js',['js']);
gulp.watch('resources/assets/js/integration/*js',['uglify_integration']);
gulp.watch(reloadDir).on('change',reload);
gulp.task('default',function() {
browserSync.init({
proxy: "http://localhost",
port:"80"
});
});
//default
/**
* 编译less
* 使用gulp-changed时候 因为编译之后文件的类型改变了，必须进行单独的配置
**/
gulp.task('dev-less',function() {
gulp.src('resources/assets/less/*.less')
.pipe(changed('public/assets/css/',{extension:'.css'}))
.pipe(less())
.pipe(minifycss())
.pipe(gulp.dest('public/assets/css/'))
.pipe(reload({stream: true}));
});
/**
* 压缩js
* 检测changed设置的目录必须和dest的完全一致，
* 不要加 * 不然可能会不起作用
*/
gulp.task('js',function () {
return gulp.src('resources/assets/js/*.js')
.pipe(changed('public/assets/js/'))
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest('public/assets/js/'))
.on("end",reload);
});
// 压缩js源码包
gulp.task('uglify_integration',function () {
gulp.src('resources/assets/js/integration/*.js')
.pipe(uglify())
.pipe(gulp.dest('public/assets/js/integration/'))
.pipe(reload({stream: true}));
});
这样之后每次编译的时间能保持在1s内
