当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']);
最佳答案
使用livereload, https://github.com/livereload/livereload-plugins , http://livereload.com/
使用此工具,一旦您更新 html/css/javascript 文件,浏览器就会重新加载
关于javascript - css发生变化时如何重新加载页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34148676/