1

我已将我的 gulpfile.js 升级到 gulp 4。gulp dev工作正常。但是每当我编辑任何文件时reload，inject任务都会进入一个无限循环。

我的 gulpfile.js：

var gulp = require('gulp'),
  sass = require('gulp-sass'),
  symlink = require('gulp-symlink'),
  jshint = require('gulp-jshint'),
  browserSync = require('browser-sync').create(),
  concat = require('gulp-concat'),
  useref = require('gulp-useref'),
  replace = require('gulp-replace'),
  templateCache = require('gulp-angular-templatecache'),
  gulpif = require('gulp-if'),
  gulpUtil = require('gulp-util'),
  uglify = require('gulp-uglify'),
  minifyCss = require('gulp-clean-css'),
  merge = require('merge-stream'),
  clean = require('gulp-clean'),
  inject = require('gulp-inject'),
  svgSprite = require('gulp-svg-sprite'),
  postcss = require('gulp-postcss'),
  autoprefixer = require('autoprefixer');
  webfonts = require('gulp-font');

/* DEV */
gulp.task('dev-serve', function () {
  browserSync.init({
    server: './'
  });

  gulp.watch('app/**/*.scss', gulp.parallel('sass'));
  gulp.watch('app/**/*.html', gulp.series('inject', 'reload'));
  gulp.watch('app/**/*.js', gulp.parallel('inject', 'reload'));
  gulp.watch('app/images/svg-sprite/*', gulp.parallel('svg-sprite', 'reload'));
  gulp.watch('app/images/**/*', gulp.parallel('reload'));
  gulp.watch('app/fonts/*', gulp.parallel('reload'));
});

/* PROD */
gulp.task('prod-serve', function () {
  browserSync.init({
    server: './www'
  });

  gulp.watch('app/**/*.scss', gulp.parallel('sass', 'build-html'));
  gulp.watch('app/**/*.html', gulp.parallel('inject', 'minify-scripts', 'reload'));
  gulp.watch('app/**/*.js', gulp.parallel('inject', 'minify-scripts', 'reload'));
  gulp.watch('app/images/**/*', gulp.parallel('copy-images', 'reload'));
  gulp.watch('app/fonts/*', gulp.parallel('copy-fonts', 'reload'));
});

// SVG SPRITE
gulp.task('svg-sprite', function () {
  var svgPath = 'app/images/svg-sprite/*.svg';

  return gulp.src(svgPath)
    .pipe(svgSprite({
      shape: {
        spacing: {
          padding: 0
        }
      },
      mode: {
        css: {
          dest: './',
          layout: 'diagonal',
          sprite: 'app/images/sprite.svg',
          bust: false,
          render: {
            scss: {
              dest: 'app/styles/tools/_sprite.scss',
              template: 'app/styles/tools/_sprite-template.tpl'
            }
          }
        }
      },
      variables: {
        mapname: 'icons'
      }
    }))
    .pipe(gulp.dest('./'));
});

// SCSS
gulp.task('sass', function (done) {
  gulp.task('sass', function () {
    return gulp.src('app/**/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(concat('style.css'))
      .pipe(postcss([autoprefixer()]))
      .pipe(gulp.dest('app'))
      .pipe(browserSync.stream());
  });
  done();
});


// INJECT
gulp.task('inject', function () {
  return gulp.src('app/index.html')
    .pipe(inject(gulp.src(['app/**/*.module.js', 'app/**/*.js', '!app/vendor/**/*.js'], {read: false}), {relative: true}))
    .pipe(gulp.dest('./app'));
});


// HTML
gulp.task('build-html', function () {
  return gulp.src('app/index.html')
    .pipe(replace('href="/app/"', 'href="/"')) // replace base href
    .pipe(useref())
    .pipe(gulpif('*.js', uglify().on('error', gulpUtil.log)))
    .pipe(gulpif('*.css', minifyCss()))
    .pipe(gulp.dest('www'));
});


// IMAGES
gulp.task('copy-images', function () {
  return gulp.src(['app/images/*'])
    .pipe(gulp.dest('www/images'));
});

// FONTS
gulp.task('copy-fonts', function () {
  return gulp.src(['app/fonts/*'])
    .pipe(gulp.dest('www/fonts'));
});

// TEMPLATES
gulp.task('bundle-templates', function () {
  return gulp.src(['app/**/*.html', '!app/index.html'])
    .pipe(gulpif('*.html', templateCache({module: 'jibbar'})))
    .pipe(concat('templates.min.js'))
    .pipe(gulp.dest('www/tmp'));
});


// COMPONENTS
gulp.task('bundle-components', function () {
  return gulp.src(['app/**/*.module.js', 'app/**/*.js', '!app/vendor/**/*.js'])
    .pipe(concat('script.min.js'))
    .pipe(gulp.dest('www'));
});


// MERGE TEMPLATES AND COMPONENTS
gulp.task('merge-templates-and-components', gulp.parallel('bundle-templates', 'bundle-components'), function () {
  return gulp.src(['www/script.min.js', 'www/tmp/templates.min.js'])
    .pipe(concat('script.min.js'))
    .pipe(gulp.dest('www'))
});


// MINIFY SCRIPTS
gulp.task('minify-scripts', gulp.parallel('merge-templates-and-components', 'bundle-templates', 'bundle-components'), function () {
  return gulp.src('www/script.min.js')
    .pipe(uglify().on('error', gulpUtil.log))
    .pipe(gulp.dest('www'))
});


// CLEAN TEMP
gulp.task('clean', gulp.parallel('bundle-templates', 'bundle-components', 'merge-templates-and-components'), function () {
  return gulp.src('www/tmp', {read: false})
    .pipe(clean());
});


// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function () {
  browserSync.reload();
});

//COPY IFRAME
gulp.task('copy-iframe', function () {
  return gulp.src('app/components/builder/iframe/*')
    .pipe(gulp.dest('www/app/components/builder/iframe'));
});

//COPY TINYMCE
gulp.task('copy-tinymce', function () {
  return gulp.src('app/vendor/tinymce/**/*')
    .pipe(gulp.dest('www/app/vendor/tinymce'));
});

//COPY VENDOR FILES
gulp.task('copy-vendor-files', function () {
  return gulp.src(['app/vendor/angular.js','app/vendor/bootstrap.css','app/vendor/tooltip.css','app/vendor/jquery.js'])
    .pipe(gulp.dest('www/app/vendor'));
});

//COPY APP IMAGES
gulp.task('copy-app-images', function () {
  return gulp.src(['app/images/builder-image.svg','app/images/builder-dimensions.svg','app/images/info_icon.svg'])
    .pipe(gulp.dest('www/app/images'));
});

gulp.task('dev', gulp.series(
  'inject',
  'svg-sprite',
  'sass',
  'dev-serve'
));

gulp.task('prod', gulp.series(
  'inject',
  'sass',
  'copy-iframe',
  'copy-tinymce',
  'copy-vendor-files',
  'copy-app-images',
  'build-html',
  'copy-images',
  'copy-fonts',
  'minify-scripts',
  'clean',
  'prod-serve'
));

下图显示了无限循环 在此处输入图像描述

谁能帮我找出我在这里做错了什么。

提前致谢。

4

1 回答 1

1

除了我上面的评论，这可能是一个问题：

// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function () {
  browserSync.reload();
});

在您的监视语句中，您调用注入和重新加载，然后在重新加载任务中，您首先调用注入来更新您的 html 文件（如果没有别的，则为时间戳），因此重新触发 html 监视，再次调用注入和重新加载等。

只需使用：

// RELOAD BROWSER
gulp.task('reload',  function () {
  browserSync.reload();
});

并将所有手表更改为 gulp.series。由于您最后调用重新加载，因此无需再次在重新加载任务中调用注入。

/* PROD */
gulp.task('prod-serve', function () {
  browserSync.init({
    server: './www'
  });

  gulp.watch('app/**/*.scss', gulp.series('sass', 'build-html'));
  gulp.watch('app/**/*.html', gulp.series('inject', 'minify-scripts', 'reload'));
  gulp.watch('app/**/*.js', gulp.series('inject', 'minify-scripts', 'reload'));
  gulp.watch('app/images/**/*', gulp.series('copy-images', 'reload'));
  gulp.watch('app/fonts/*', gulp.series('copy-fonts', 'reload'));
});

并为您的“开发服务”任务做同样的事情。

[编辑修复将只运行一次] 更改为：

// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function (done) {
  browserSync.reload();
  done();
});

另外，我很确定您需要使用此表格：

// RELOAD BROWSER
//--------------------------------------|
gulp.task('reload', gulp.series('inject', function (done) {
  browserSync.reload();
  done();
}));
// another ) at the end above too.

查看最后一个匿名函数是如何包含在gulp.series调用中的。您需要在很多任务中进行更改。

于 2019-01-14T04:04:19.703 回答