Question

我的问题表面上与this表面相似，但不同的是，那里的答案对我的特殊情况没有帮助。

这是我的gulpfile：

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const postcss = require('gulp-postcss');
const tailwindcss = require('tailwindcss');
const nested = require('postcss-nested');
const concat = require('gulp-concat');
const minify = require('gulp-minify');
const rename = require("gulp-rename");
const autoprefixer = require('autoprefixer');
const cssnano = require('gulp-cssnano');
const nunjucksRender = require('gulp-nunjucks-render');
const data = require('gulp-data');

const cssSource = './src/css/styles.pcss';
const cssDest = './dist/css/';

const jsSource = [
  './src/js/headroom.min.js',
  './src/js/tiny-slider.js',
  './src/js/shoestring.min.js',
  './src/js/main.js'
];
const jsDest = './dist/js/';

gulp.task('nunjucks', () => {
  return gulp.src('pages/**/*.+(html|nunjucks)')
    .pipe(data(() => {
      return require('./site-config.json')
    }))
    .pipe(nunjucksRender({
      path: ['templates']
    }))
    .pipe(gulp.dest('./'))
});

gulp.task('postCSS', () => {

  var processors = [
    autoprefixer,
    nested,
  ];

  return gulp.src(cssSource)
    .pipe(postcss(processors))
    .pipe(rename(function (path) {
      path.extname = ".css"
    }))
    .pipe(postcss([
      tailwindcss('./tailwind.js'),
      autoprefixer({
        browsers: [
          ">0.25%",
          "not ie 11",
          "not op_mini all"
        ],
        open: false
      })
    ]))
    // .pipe(purify(['./index.html', 'pages/**/*.html']))
    .pipe(cssnano())
    .pipe(gulp.dest(cssDest));
});

gulp.task('scripts', () => {
  return gulp.src(jsSource)
    .pipe(concat('main.js'))
    .pipe(gulp.dest(jsDest))
});

gulp.task("reload", (done) => { 
  browserSync.reload(); done(); 
});

gulp.task('browser-sync', () => {
  browserSync.init({
    server: true,
    open: false,
    online: true
  });
  gulp.watch('**/*.nunjucks', gulp.series('nunjucks', 'reload'));
  gulp.watch(cssSource, gulp.series('postCSS', 'reload'));
  gulp.watch('tailwind.js', gulp.series('postCSS', 'reload'));
  gulp.watch(jsSource, gulp.series('scripts', 'reload'));
});

gulp.task('default', gulp.series('nunjucks', 'postCSS', 'scripts', 'browser-sync'));

当我保存Browsersync正在观看的任何文件时，gulp.series会启动并运行相应的任务，包括reload功能。但在执行这两项任务（例如postCSS和reload）后，我的终端再次表示浏览器同步为Reloading Browsers...。这项任务似乎永远不会完成。

我已经尝试了许多事情（有些人太过愚蠢，不能在这里重复）来摆脱那最后一次看似无法结束的重新加载任务，但是徒劳无功。到目前为止谷歌已经失败了。我一次尝试一个单独的监视任务，但每个都以相同的方式结束：使用Reloading Browsers...输出。

这是我的postCSS任务的相关控制台输出，例如：

[18:15:48] Starting 'postCSS'...
[18:15:50] Finished 'postCSS' after 1.32 s
[18:15:50] Starting 'reload'...
[18:15:50] Finished 'reload' after 652 μs
[Browsersync] Reloading Browsers...

奇怪的是，它不会挂起任何东西。除了控制台输出之外，它不会出现任何不对劲。我的浏览器重装得很好，我可以开始我的快乐业务。

我实际上只是希望了解Gulp 4的新任务执行系统的工作原理。我觉得我某处有一个明显的错误，但不知道在哪里。

像我说的那样，不是紧急情况，因为一切都“有效”。只是希望弄清楚我错过了什么。

有人能指出我正确的方向吗？

Gulp：Browsersync在任务“重新加载”完成后重新加载浏览器

0 个答案: