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']);

（完）

程序员青戈 认证博客专家 Java 架构 博客专家 Java程序员，5年一线大厂实战经验。关注我的原创微信公众号「Java学习指南」，回复「面试」可获取大厂通关面试题解一套。