gulp预编译less和自动刷新网页

Browsersync 官方地址：http://www.browsersync.cn/docs/gulp/

全局安装gulp：

$ npm i gulp -g

在项目中安装gulp：

$ npm i gulp --save-dev

安装gulp-less和browser-sync插件：

$ npm i gulp-less browser-sync --save-dev

项目目录结构：
gulpfile.js
package.json
node_modules
app
|___index.html
less
|___style.less
css
|___style.css

在命令行中使用browser-sync：

 browser-sync start --server --files "css/*.css"

使用上面命令会开启一个迷你服务器，自动帮你打开浏览器，默认地址localhost:3000，默认打开index.html，如果没有，需要手动加上你要打开的页面，如localhost:3000/test.html。

使用代理：

 browser-sync start --proxy "localhost:8080" --files "css/*.css"

预编译和自动刷新：
gulp的强大之处在于它集成了很多的插件，如less和sass的预处理器等，现在我们可以同时完成less编译和浏览器刷新动作：

var gulp  = require('gulp');
var browserSync = require('browser-sync').create();
var less  = require('gulp-less');
var reload = browserSync.reload;

// 静态服务器 + 监听 less/html 文件
gulp.task('serve', ['less'], function() {
    browserSync.init({
        server: "./app"
    });
    gulp.watch("app/less/*.less", ['less']);
    gulp.watch("app/*.html").on('change', reload);
});

// less编译后的css将注入到浏览器里实现更新
gulp.task('less', function() {
    return gulp.src("app/less/*.less")
        .pipe(less())
        .pipe(gulp.dest("app/css"))
        .pipe(reload({stream: true}));
});

gulp.task('default', ['serve']);

现在，我们开启默认服务：

$ gulp

浏览器就可以自动跳转到localhost:3000的页面上，默认使用的是index.html，自己也可以手动修改：localhost:3000/test.html。这样，每次我们修改less文件后会直接映射到网页上，再也不用刷新网页了。

或者你希望再加入js的自动映射？ok…

gulp.task('serve', ['less'], function() {
    browserSync.init({
        server: "./app"
    });
    gulp.watch("app/less/*.less", ['less']);
    gulp.watch("app/*.html").on('change', reload);
    gulp.watch("app/js/*.js").on('change', reload);//在这里加入监听js文件
});

或者，再处理一下js文件？

安装js压缩插件gulp-uglify

$ npm i gulp-uglify –save-dev

// 处理完JS文件后返回流
var gulp  = require('gulp');
var browserSync = require('browser-sync').create();
var less  = require('gulp-less');
var uglify = require('gulp-uglify');
var reload = browserSync.reload;


// 静态服务器 + 监听 less/html/js 文件
gulp.task('serve', ['less','js'], function() {
    browserSync.init({
        server: "./app"
    });
    gulp.watch("app/less/*.less", ['less']);
    gulp.watch("app/*.html").on('change', reload);
    gulp.watch("app/js/*.js", ['js']);
});
// less编译后的css将注入到浏览器里实现更新
gulp.task('less', function() {
    return gulp.src("app/less/*.less")
        .pipe(less())
        .pipe(gulp.dest("app/css"))
        .pipe(reload({stream: true}));
});
//压缩后的js代码注入浏览器实现
gulp.task('js',function(){
    return gulp.src('app/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('app/dist'))
    .pipe(reload({stream: true}));
})

gulp.task('default', ['serve']);

（完）