Question

我遇到了gulp任务的问题（a）同步。以下是我的gulp文件。基本上，我想首先清理目录，然后将一些文件复制/生成一个新目录。问题是竞争条件。我需要执行clean和然后执行所有其余的（build内部任务）。

目前，由于竞争条件，执行要么按预期完成，要么因ENOENT目录而失败。

var gulp = require('gulp');
var concat = require('gulp-concat');
var clean = require('gulp-clean');
var cleanCSS = require('gulp-clean-css');

var cfg = {
  js: {
    vendor: [
      './node_modules/angular/angular.min.js',
      './node_modules/angular-translate/dist/angular-translate.min.js',
      './node_modules/angular-bootstrap/ui-bootstrap.min.js',
      './node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js'
    ],
    app: './app/js/*'
  },
  css: {
    vendor: [
      './node_modules/bootstrap/dist/css/bootstrap.css',
      './node_modules/font-awesome/css/font-awesome.css'
    ],
    app: './app/css/*'
  }
};

gulp.task('clean', function () {
  return gulp.src('./dist', {read: false})
    .pipe(clean());
});

gulp.task('vendor-js', function() {
  return gulp.src(cfg.js.vendor)
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('app-js', function() {
  return gulp.src(cfg.js.app)
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('vendor-css', function() {
  return gulp.src(cfg.css.vendor)
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(concat('vendor.css'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('app-css', function() {
  return gulp.src(cfg.css.app)
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(concat('app.css'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('fonts', function() {
  gulp.src('./app/fonts/**/*')
    .pipe(gulp.dest('./dist/fonts'));

  gulp.src('./node_modules/font-awesome/fonts/**/*')
    .pipe(gulp.dest('./dist/fonts'));
});

gulp.task('build', [
  'clean',
  'vendor-js',
  'app-js',
  'vendor-css',
  'app-css',
  'fonts'
]);

gulp.task('default', ['build']);

Answer 1

实际上，gulp对串行（同步）任务的支持有点蠢，需要克服，好像它是应用程序的非标准要求......

由于clean任务已经回归，所以工作是：

为每个需要它的单个任务定义clean的任务依赖性
之后，从clean

build

最终的解决方案是：

var gulp = require('gulp');
var concat = require('gulp-concat');
var clean = require('gulp-clean');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');

var cfg = {
  js: {
    vendor: [
      './node_modules/angular/angular.min.js',
      './node_modules/angular-translate/dist/angular-translate.min.js',
      './node_modules/angular-bootstrap/ui-bootstrap.min.js',
      './node_modules/angular-bootstrap/ui-bootstrap-tpls.min.js'
    ],
    app: './app/js/*'
  },
  css: {
    vendor: [
      './node_modules/bootstrap/dist/css/bootstrap.css',
      './node_modules/font-awesome/css/font-awesome.css'
    ],
    app: './app/css/*'
  },
  fonts: [
    './app/fonts/**/*',
    './node_modules/font-awesome/fonts/**/*',
    './node_modules/bootstrap/fonts/**/*'
  ]
};

gulp.task('clean', function () {
  return gulp.src('./dist', {read: false})
    .pipe(clean());
});

gulp.task('vendor-js', ['clean'], function() {
  return gulp.src(cfg.js.vendor)
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest('./dist/'));});

gulp.task('app-js', ['clean'], function() {
  return gulp.src(cfg.js.app)
    .pipe(uglify('app.js'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('vendor-css', ['clean'], function() {
  return gulp.src(cfg.css.vendor)
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(concat('vendor.css'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('app-css', ['clean'], function() {
  return gulp.src(cfg.css.app)
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(concat('app.css'))
    .pipe(gulp.dest('./dist/'));
});

gulp.task('fonts', function() {
  gulp.src(cfg.fonts)
    .pipe(gulp.dest('./fonts'));
});

gulp.task('build', [
  'vendor-js',
  'app-js',
  'vendor-css',
  'app-css',
  'fonts'
]);

gulp.task('default', ['build']);

gulp任务竞争条件

1 个答案: