【问题标题】:html files in dist folder don't updatedist 文件夹中的 html 文件不更新
【发布时间】: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


【解决方案1】:
//gulp 4.0.2 panini 1.6.3
gulp.task('compile-html', function(){
    var paniniOption = {
        root: 'src/html/pages/',
        layouts: 'src/html/layouts/',
        partials: 'src/html/includes/',
        helpers: 'src/html/helpers/',
        data: 'src/html/data/'
    }
    return gulp.src('src/html/pages/**/*.html')
        .pipe(panini(paniniOption))
        .pipe(gulp.dest('_site'));
});
gulp.watch('src/html/pages/**/*').on('change', gulp.series('compile-html', browserSync.reload));
gulp.watch('src/html/{layouts,includes,helpers,data}/**/*').on('change', gulp.series(async () => { await panini.refresh() }, 'compile-html', browserSync.reload));

【讨论】:

  • 只需添加一些部分。
  • 我已经完成了一个演示,如果你想看,我可以给你看。
猜你喜欢
  • 2017-12-14
  • 2023-03-30
  • 1970-01-01
  • 1970-01-01
  • 2020-08-18
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多