使用Browersync自動重新載入css

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變化正在射擊的瀏覽器重裝！

使用我的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'))

最後，我在命令我default一飲而盡任務

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

然後一飲而盡參考serve線和魔術發生！ css和html更改反映:)

Answer 2

您的瀏覽器同步包含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 3

好的問題沒有真正解決，因爲我們在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']);