Question

我正在使用Zurb panini进行模板化和构建页面。我不确定我错在哪里。现在，如果我更新我的scss文件，BrowserSync将重新加载并显示更新。但是当我更新html文件时它只是不起作用。谁能帮我看看我的Gulp配置？ THX〜

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']);

Answer 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));

dist文件夹中的html文件不会更新

1 个答案: