說(shuō)明

這個(gè)是使用laravel進(jìn)行后臺(tái)開發(fā)的，所以大部分的東西是適應(yīng)laravel的工作流的，至于為什么沒(méi)有使用laravel自帶的工具，主要是為了能夠更好的進(jìn)行自定義。

目錄結(jié)構(gòu)

less js 等文件放在 resources/assets/ 下
通過(guò)watch 只要有改動(dòng)就編譯到 public/assets/ 對(duì)應(yīng)的目錄下

模塊介紹

// 對(duì)less文件進(jìn)行編譯
gulp-less
// 生成帶有hash后綴的靜態(tài)文件
gulp-rev
// 對(duì)靜態(tài)文件的引用路徑進(jìn)行替換，和上面的搭配使用
gulp-rev-collector
// js壓縮
gulp-uglify
// 瀏覽器自動(dòng)刷新
browser-sync
// 壓縮css
gulp-minify-css
// 刪除指定目錄或文件
del
// 對(duì)es6的轉(zhuǎn)換
gulp-babel
// 只編譯有修改的部分，加快編譯速度，但是不能檢測(cè)js第一次的編譯
gulp-changed
// 調(diào)試使用
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/**/*.*'];

// 監(jiān)視內(nèi)容
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時(shí)候 因?yàn)榫幾g之后文件的類型改變了，必須進(jìn)行單獨(dú)的配置
**/
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
* 檢測(cè)changed設(shè)置的目錄必須和dest的完全一致，
* 不要加 * 不然可能會(huì)不起作用
*/
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}));
});

這樣之后每次編譯的時(shí)間能保持在1s內(nèi)