gulpfile.js 中 BrowserSync 配置方法
gulpfile.js 中 BrowserSync 配置方法
切图小弟 发表于12个月前
gulpfile.js 中 BrowserSync 配置方法
  • 发表于 12个月前
  • 阅读 31
  • 收藏 1
  • 点赞 0
  • 评论 0
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var less = require("gulp-less");
var reload = browserSync.reload;
gulp.task('browser-sync',function(){
    browserSync.init({
        server:{
            baseDir: './'
        },
        port: 2020,
        // proxy: "http://localhost:2020/project-prepare/"
    }) 
});
gulp.task("gulp-less", function() {
	gulp.src("./src/less/*.less")
		.pipe(less())
		.pipe(gulp.dest("./css"));
});
gulp.task("watch", function() {
	gulp.watch(["./src/less/*.less"], ["gulp-less"]);
	gulp.watch(["./*.html", "./js/*.js", "./css/*.css"], reload);
})
gulp.task("default", ["browser-sync", "watch"]);

这里额外使用了 gulp-less 用于对 less 文件进行实时编译转换。

其中 browserSync.init 配置参数中使用 proxy 来替换 server 和 port 参数是用来代理本地已有的服务器,即不使用 browserSync 提供的服务器。

还可以传入 browser: "chrome" 用来设置默认打开的浏览器。

标签: BrowserSync Gulp
共有 人打赏支持
粉丝 0
博文 20
码字总数 2094
×
切图小弟
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: