Question

当我对main.scss文件进行更改时，似乎无法使用Browersync自动重新加载。我已经让Browsersync在html更改后自动重新加载浏览器，但不是css

使用gulp作为我的任务管理器。在css更改完成后，我在这里缺少什么让浏览器重新加载？或剂量Browersync和gulp集成不支持在css更改后重新加载？

我已经在这个主题上搜索过，我注意到还有一些其他人也收到了同样的问题。

如果我无法解决这个问题，你会建议我使用什么来自动重新加载css更改？ Chromedev工具？ Nodemon？还是Chrome扩展程序？

这是我的gulpfile

// refferance gulp
var gulp = require('gulp');

// browser-sync
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// other packages installed
var concat = require('gulp-concat');
var cssmin = require('gulp-minify-css');
var rename = require('gulp-rename');
var scss = require('gulp-sass');
var uglify = require('gulp-uglify');

var source = {
    scss: './/src/scss/*.scss',
    css: './/dest/css/*.css',
    html: './*.html'
};

// browser-sync task
gulp.task('browser-sync',['styles'], function(){
    browserSync({
        server:'./'
    });
    gulp.watch(source.scss,['scss']);
    gulp.watch(source.html).on('change',reload);
});

// scripts task
gulp.task('scripts', function(){
    // fetch all files in the .js extension in the /src/js directory
    return gulp.src('./src/js/*.js')
    // concatinate files and save as app.js
    .pipe(concat('app.js'))
    // save app.js in dest directory
    .pipe(gulp.dest('./dest/js/'))
    .pipe(uglify())
    // minfiy file and rename to app.min.js
    .pipe(rename({
        suffix: '.min'
    }))
    // save in dest directory
    .pipe(gulp.dest('./dest/js'));
});


// styles task
gulp.task('styles', function(){
     // fetch all files with scss extension in /src/scss directory
    return gulp.src('./src/scss/*.scss')
    // compile scss
    .pipe(scss())
    // output css in css dest directory
    .pipe(gulp.dest('./dest/css/'))
    // minify css
    .pipe(cssmin())
    // rename as styles.min.css
    .pipe(rename({
        suffix: '.min'
    }))
    // save in same directory
    .pipe(gulp.dest('./dest/css'))
    // injecting css into browser via browsersync
    .pipe(reload({stream:true}));
});

// we use the watch task in the default task bellow
gulp.task('watch',function(){
    // watch js
    gulp.watch('./src/js/*.js',['scripts']);
    // watch scss
    gulp.watch('./src/scss/*.scss',['styles']);
});

// default task allows us to run all tasks at once by just runing `gulp` in command line
gulp.task('default', ['scripts', 'styles', 'browser-sync', 'watch']);

Answer 1

您的浏览器同步包含scss gulp.watch指向scss中不存在的gulpfile.js任务。考虑使用观看任务中的gulp.watch。

gulp.task('browser-sync',['styles'], function(){
    browserSync({
        server:'./'
    });
    gulp.watch('./src/scss/*.scss',['styles']);
    gulp.watch(source.html).on('change',reload); 
});

Answer 2

好问题没有真正解决，因为我们在Slack上讨论过这是一个更合适的解决方案，它会注入CSS而不是重新加载浏览器。

var gulp        = require('gulp'),
    browserSync = require('browser-sync').create(),
    reload      = browserSync.reload,
    concat      = require('gulp-concat'),
    cssmin      = require('gulp-minify-css'),
    rename      = require('gulp-rename'),
    sass        = require('gulp-sass'),
    uglify      = require('gulp-uglify');

var source = {
    styles: 'src/scss/*.scss',
    js:'src/js/*.js',
    html: '*.html'
};

var destination = {
    styles: 'dest/css',
    js: 'desc/js'
};  

gulp.task('serve', function(){
    browserSync.init({
        server:'./'
    });
});

gulp.task('scripts', function(){
    return gulp.src(source.js)
    .pipe(concat('app.js'))
    .pipe(uglify())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest(destination.js))
    .pipe(reload());
});

gulp.task('styles', function(){
    return gulp.src(source.styles)
    .pipe(sass())
    .pipe(cssmin())
    .pipe(rename({
        suffix: '.min'
    }))
    .pipe(gulp.dest(destination.styles))
    .pipe(reload({stream:true}));
});

gulp.task('watch',function(){
    gulp.watch(source.js,['scripts']);
    gulp.watch(source.scss,['styles']);
});

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

Answer 3

问题已解决：）

scss更改现在正在触发浏览器重新加载！

使用我的source对象链接到scss中的更改，并在我的scss文件上调用gulp.watch(source.scss).on('change',reload);。

// path to files
var source = {
    scss: './src/scss/*.scss',
    css: './dest/css/*.css',
    html: './*.html'
};

// serve task 
gulp.task('serve',['styles'], function(){
    browserSync.init({
        server:'./'
    });
    // firing a browser reload on changes to these files
    gulp.watch(source.scss).on('change',reload);
    gulp.watch(source.html).on('change',reload);
});

然后在我的styles任务中，我确保在 .pipe(browserSync.stream());之后致电 .pipe(gulp.dest('./dest/css'))

最后，我在serve gulp任务
中引用了default
gulp.task('default', ['scripts', 'styles', 'serve', 'watch']);

然后在命令行中 gulp 并发生魔法！ css和html更改会反映出来:)

使用Browersync自动重新加载css

3 个答案: