0

几个小时以来我一直在战斗，我有一个小问题。我想使用 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。

4

2 回答 2

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});
});
于 2018-01-17T22:49:33.093 回答
0

我解决了：

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 init 中使用 server{//...}，因为那是为了创建服务器。相反，如果你在 wamp 上，你必须使用简单的代理......（如果你有一个虚拟主机，你必须修改它并将“需要本地”替换为“要求所有授予”，我认为......）。

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

所以你可以犯错误，但你有责任了解它。

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

于 2018-01-18T15:41:25.177 回答