Question

所以我一直在使用基础电子邮件框架中的默认gulp文件（加上一些添加的任务），并且gulp watch任务正常工作。

当我找到一个设置项目的同事时，我们注意到手表只在第一次文件更改时运行 - 它构建，重新加载浏览器，然后观察并且再也不会闪光。

在尝试调试它时，我通过一次一个地添加每个任务来构建完整的构建过程，并且似乎总是打破第二个我添加browser.reload。

我确认我们安装了相同版本的gulp，node和browser-sync。我还尝试让他设置一个项目，其中包含foundation website提供的说明，但它也没有用。

是否有其他人遇到此问题或知道如何修复它？

这是默认的gulpfile：

import gulp     from 'gulp';
import plugins  from 'gulp-load-plugins';
import browser  from 'browser-sync';
import rimraf   from 'rimraf';
import panini   from 'panini';
import yargs    from 'yargs';
import lazypipe from 'lazypipe';
import inky     from 'inky';
import fs       from 'fs';
import siphon   from 'siphon-media-query';

const $ = plugins();

// Look for the --production flag
const PRODUCTION = !!(yargs.argv.production);

// Build the "dist" folder by running all of the above tasks
gulp.task('build',
    gulp.series(clean, pages, sass, inline));

// Build emails, run the server, and watch for file changes
gulp.task('default',
    gulp.series('build', server, watch));



// Delete the "dist" folder
// This happens every time a build starts
function clean(done) {
  rimraf('dist', done);
}

// Compile layouts, pages, and partials into flat HTML files
// Then parse using Inky templates
function pages() {
  return gulp.src('src/pages/**/*.html')
      .pipe(panini({
        root: 'src/pages',
        layouts: 'src/layouts',
        partials: 'src/partials/**',
        helpers: 'src/helpers'
      }))
      .pipe(inky())
      .pipe(gulp.dest('dist'));
}

// Reset Panini's cache of layouts and partials
function resetPages(done) {
  panini.refresh();
  done();
}

// Compile Sass into CSS
function sass() {
  return gulp.src('src/assets/scss/app.scss')
      .pipe($.if(!PRODUCTION, $.sourcemaps.init()))
      .pipe($.sass({
        includePaths: ['node_modules/foundation-emails/scss']
      }).on('error', $.sass.logError))
      .pipe($.if(!PRODUCTION, $.sourcemaps.write()))
      .pipe(gulp.dest('dist/css'));
}

// Copy and compress images
function images() {
  return gulp.src('src/assets/img/*')
      .pipe($.imagemin())
      .pipe(gulp.dest('./dist/assets/img'));
}

// Inline CSS and minify HTML
function inline() {
  return gulp.src('dist/**/*.html')
      .pipe($.if(PRODUCTION, inliner('dist/css/app.css')))
      .pipe(gulp.dest('dist'));
}

// Start a server with LiveReload to preview the site in
function server(done) {
  browser.init({
    server: 'dist'
  });
  done();
}

// Watch for file changes
function watch() {
  gulp.watch('src/pages/**/*.html', gulp.series(pages, inline, browser.reload));
  gulp.watch(['src/layouts/**/*', 'src/partials/**/*'], gulp.series(resetPages, pages, inline, browser.reload));
  gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss'], gulp.series(sass, pages, inline, browser.reload));
  gulp.watch('src/assets/img/**/*', gulp.series(images, browser.reload));
}

// Inlines CSS into HTML, adds media query CSS into the <style> tag of the email, and compresses the HTML
function inliner(css) {
  var css = fs.readFileSync(css).toString();
  var mqCss = siphon(css);

  var pipe = lazypipe()
      .pipe($.inlineCss, {
        applyStyleTags: false
      })
      .pipe($.injectString.replace, '<!-- <style> -->', `<style>${mqCss}</style>`)
;

  return pipe();
}

Answer 1

这个问题发布后不久，PR 18已经在电子邮件基金会中修复了此问题。请注意，下面每行添加了).on('change'：

<强>之前：

function watch() {
    gulp.watch('src/pages/**/*.html', gulp.series(pages, inline, browser.reload));
    gulp.watch(['src/layouts/**/*', 'src/partials/**/*'], gulp.series(resetPages, pages, inline, browser.reload));
    gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss'], gulp.series(sass, pages, inline, browser.reload));
    gulp.watch('src/assets/img/**/*', gulp.series(images, browser.reload));
}

<强>后：

function watch() {
    gulp.watch('src/pages/**/*.html').on('change', gulp.series(pages, inline, browser.reload));
    gulp.watch(['src/layouts/**/*', 'src/partials/**/*']).on('change', gulp.series(resetPages, pages, inline, browser.reload)); 
    gulp.watch(['../scss/**/*.scss', 'src/assets/scss/**/*.scss']).on('change', gulp.series(sass, pages, inline, browser.reload)); 
    gulp.watch('src/assets/img/**/*').on('change', gulp.series(images, browser.reload));
}

Gulp手表只运行一次

1 个答案: