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文件后重新加载

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

1 个答案: