browser-sync配合gulp-less使用

开发前端一直用gulp来做自动化构建。

browser-sync插件用的很舒服，开发的时候用一个外接屏幕，把要调试的网页放在外接屏幕上，你只要写完代码（js,css）后，按一下 cmd+s ，就可以直接看见页面效果了。

gulp-less,想用less的一些动态语言特性，对css做预处理。

思路是这样子的 ：用gulp-watch监控less文件目录，一旦文件发生改变，就进行less预处理操作（转成css文件）。这个时候browser-sync检测到css文件发生变化，会自动更新页面。   所以每次保存操作都会跑一遍这个流程。

var browserSync = require('browser-sync');

 var less = require('gulp-less');
 var watch = require('gulp-watch');

gulp.task('lessToCss', function () {
    //编译src目录下的所有less文件
    gulp.src(['src/less/*.less']) 
        .pipe(less())
        .pipe(gulp.dest('src/css'));
});

gulp.task('live', function() {
    gulp.watch('src/less/*.less',["lessToCss"]);
    browserSync({
        files: "**",
        server: {
            baseDir: "./"
        }
    }); 
});