首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >gulp手表升级到gulp 4后导致无限循环

gulp手表升级到gulp 4后导致无限循环
EN

Stack Overflow用户
提问于 2019-01-13 21:29:20
回答 1查看 1.1K关注 0票数 1

我已经把我的gulpfile.js升级到了GUGP4,gulp dev运行得很好。但是,每当我编辑任何文件时,reloadinject任务都会进入一个无穷无尽的循环。

我的gulpfile.js:

代码语言:javascript
运行
复制
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'
));

下图显示了无限循环

有人能帮我找出我哪里做错了吗?

提前谢谢。

EN

回答 1

Stack Overflow用户

发布于 2019-01-14 12:04:20

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

代码语言:javascript
运行
复制
// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function () {
  browserSync.reload();
});

在你的watch语句中,你调用inject和reload,然后在reload任务中,你首先调用inject来更新你的html文件(如果没有时间戳),所以html手表被重新收集,它再次调用inject和reload,依此类推。

只需使用:

代码语言:javascript
运行
复制
// RELOAD BROWSER
gulp.task('reload',  function () {
  browserSync.reload();
});

把你所有的手表都换成gulp.series。由于您最后一次调用reload,因此不需要在reload任务中再次调用inject。

代码语言:javascript
运行
复制
/* 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'));
});

并对您的“dev-serve”任务执行相同的操作。

Edit to fix将仅运行一次对以下内容的更改:

代码语言:javascript
运行
复制
// RELOAD BROWSER
gulp.task('reload', gulp.series('inject'), function (done) {
  browserSync.reload();
  done();
});

此外,我非常确定您需要使用此表单:

代码语言:javascript
运行
复制
// RELOAD BROWSER
//--------------------------------------|
gulp.task('reload', gulp.series('inject', function (done) {
  browserSync.reload();
  done();
}));
// another ) at the end above too.

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54169333

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档