【发布时间】:2017-09-27 18:18:27
【问题描述】:
我正在使用 Zurb panini 来做模板和构建页面。我不确定我在哪里做错了。现在,如果我更新我的 scss 文件,BrowserSync 将重新加载并显示更新。但是当我更新 html 文件时它就不起作用了。谁能帮我看看我的 Gulp 配置?谢谢~
var gulp = require('gulp');
var panini = require('panini');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var autoprefixer = require('autoprefixer-core');
var clean = require('gulp-clean');
gulp.task('copy', function() {
return gulp.src('./src/assets/icon/*')
.pipe(gulp.dest('./dist/assets/icon'));
});
gulp.task('sass', function(){
var processors = [
autoprefixer({browsers:['last 2 versions']})
];
return gulp.src('./src/assets/sass/*.scss')
.pipe(sass())
.pipe(concat('style.css'))
.pipe(gulp.dest('./dist/assets'))
});
gulp.task('clean', function () {
return gulp.src('./dist/*.html', {read: false})
.pipe(clean());
});
gulp.task('pages', function() {
return gulp.src('src/pages/**/*.html')
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
}))
.pipe(concat('index.html'))
.pipe(gulp.dest('./dist'));
});
gulp.task('browserSync', function(){
browserSync.init({
server: "./dist"
});
});
gulp.task('watch', function(){
gulp.watch(['./src/{layouts,partials}/**/*'], [panini.refresh]);
gulp.watch("./src/assets/sass/**/*.scss", ['sass']).on('change', browserSync.reload);
gulp.watch("./src/**/*.html").on('change', browserSync.reload);
});
gulp.task('build', ['clean', 'copy', 'sass', 'pages']);
gulp.task('default', ['build', 'watch', 'browserSync']);
【问题讨论】:
-
您是否尝试在调用 panini.refresh 的注释/删除行中运行它?我希望第三个手表没有正确触发重新加载,甚至完全被忽略,因为第一个也适合 html 更改。
-
我试着注释掉这一行。它仍然没有更新。浏览器确实会重新加载。
标签: gulp browser-sync