【问题标题】:Browsersync doesn't refresh on wampBrowsersync 不会在 wamp 上刷新
【发布时间】:2018-01-17 18:37:45
【问题描述】:

我有一个小问题,我从几个小时就开始战斗。我想使用 gulp 来观看 scss 文件,将它们转换为 css 然后重新加载浏览器。

在重新加载浏览器之前一直有效。所以 sass 正在使用 gulp 而不是 Browsersync。这是我的 gulpfile.js,也许有人可以帮忙?

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

gulp.task('sass', function () {  
    gulp.src('webroot/css/style.scss')
        .pipe(sass({includePaths: ['scss']}))
        .pipe(gulp.dest('webroot/css'));
});

gulp.task('browser-sync', function() {  
    browserSync.init(["./**/*.css", "./**/*.php","./**/*.ctp","./**/*.js"], {
        server: {
            baseDir: "./",
            proxy:{target:'cake.dev', ws : true}
        },
        logLevel: "debug",
    });
});

gulp.task('default', ['sass', 'browser-sync'], function () {  
    gulp.watch("webroot/css/*.scss", ['sass']);
});

Ps:我正在使用 CAKEPHP 3。

【问题讨论】:

    标签: gulp wamp cakephp-3.0 gulp-sass gulp-browser-sync


    【解决方案1】:

    所以你需要告诉 browserSync 在 sass 任务结束时重新加载:

    gulp.task('sass', function () {  
      gulp.src('webroot/css/style.scss')
        .pipe(sass({includePaths: ['scss']}))
        .pipe(gulp.dest('webroot/css'))
        .pipe(browserSync.reload({stream:true});
    });
    

    【讨论】:

    • 好的,谢谢!但是 .pipe(browserSync.reload({stream:true}); 并没有改变任何东西。而且当浏览器打开时我没有浏览器同步的通知。
    【解决方案2】:

    我解决了:

    var gulp = require('gulp');  
    var sass = require('gulp-sass');  
    var browserSync = require('browser-sync');
    
    gulp.task('sass', function () {  
        gulp.src('webroot/css/style.scss')
            .pipe(sass({includePaths: ['scss']}).on('error', sass.logError))
            .pipe(gulp.dest('webroot/css'));
    });
    
    gulp.task('browser-sync', function() {  
        browserSync.init(["webroot/css/*.css", "webroot/js/*.js"], {
            proxy   : "http://cake.dev/",
        });
    });
    
    gulp.task('default', ['sass', 'browser-sync'], function () {  
        gulp.watch("webroot/css/*.scss", ['sass']);
    });
    

    您不必在 browserSync 初始化中使用 server{//...},因为那是为了创建服务器。相反,如果你在 wamp 上,你必须使用简单的代理......(如果你有一个虚拟主机,你必须修改它并将“需要本地”替换为“要求所有授予”,我认为......)。

    并且在“错误”条件下,如果您在编写 scss 并保存它时出错,则不要停止程序。

    所以你可能会犯错误,但你有责任了解它。

    谢谢大家。希望有一天这会对其他人有所帮助。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-10-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-10-15
      • 1970-01-01
      • 1970-01-01
      • 2020-01-25
      相关资源
      最近更新 更多