javascript - css发生变化时如何重新加载页面？

Question

当scss文件发生变化时，我尝试重新加载我的页面。我下载浏览器syn插件并尝试使用它，但当scss文件发生变化时，它不会重新加载。

其实我什么

如果 scss 文件有更改，则应执行以下步骤

• 将 scss 文件转换为 css 文件。
• 将 css 文件转换为 css.min 文件。
• 然后重新加载页面。

我能够将 sass 转换为 css 文件，将 css 转换为 css.min 文件，并且还能够创建服务器，但在更改 scss 文件时它不会重新加载。

这是我的gulp.js

var gulp = require('gulp');
//require sass package
var sass = require('gulp-sass');
var rename = require('gulp-rename');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var browerSync = require('browser-sync').create();
var reload=browerSync.reload;

gulp.task('serve',['minify-css'],function(){
    browerSync.init({
        server:'./'
    })

   // gulp.watch('scss/*.scss',['minify-css']);
    gulp.watch('scss/*.scss').on('change',reload)


})




// Compile Our Sass
gulp.task('sass', function () {
    return gulp.src('scss/*.scss')
        .pipe(plumber())
        .pipe(sass())
        .pipe(gulp.dest('css'));
});
// css miifilcation
gulp.task('minify-css',['sass'], function () {
    return gulp.src('css/*.css')
        .pipe(minifyCss())
        .pipe(plumber())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist'));
});

// js minifiction
gulp.task('compress', function() {
    return gulp.src('app/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('jdist'));
});

//concatination of js files

gulp.task('scripts',['compress'], function() {
    return gulp.src('jdist/**/*.js')
        .pipe(concat('all.js'))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/'));
});


// Watch Files For Changes
gulp.task('watch', function () {
    gulp.watch('scss/*.scss', ['sass','minify-css']);
    gulp.watch('app/**/*.js', ['compress','scripts']);

});

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

Answer 1

使用livereload， https://github.com/livereload/livereload-plugins , http://livereload.com/

使用此工具，一旦您更新 html/css/javascript 文件，浏览器就会重新加载