gulp-sequence不工作

Posted 2021-04-20

我在项目中实现了gulp任务。我已经安装了gulp-assests-version-replace来制作css文件的版本控制文件。

现在我想在创建app.css后运行上面的任务。它在创建app.css之前运行，因此无法创建版本控制文件。

下面是运行gulp任务的gulp文件。

var gulp = require('gulp');

var autoprefixer = require('gulp-autoprefixer');
var changed      = require('gulp-changed');
var concat       = require('gulp-concat');
var del          = require('del');
var gulpif       = require('gulp-if');
var gutil        = require('gulp-util');
var imagemin     = require('gulp-imagemin');
var jshint       = require('gulp-jshint');
var notify       = require('gulp-notify');
var plumber      = require('gulp-plumber');
var rename       = require('gulp-rename');
var sass         = require('gulp-sass');
var assetsVersionReplace = require('gulp-assets-version-replace');
var uglify       = require('gulp-uglify');


var path = {
    assets: 'skin/frontend/custom_theme/default/'
};

var config = {
    tasks: {
        css: {
            autoprefixerOptions: {
                // For "browserslist" see "package.json"
                cascade: false,
                supports: false // See: https://github.com/filamentgroup/select-css/issues/17
            },
            dest: path.assets + 'css/build',
            sassOptions: {
                outputStyle: 'compressed'
            },
            src: path.assets + 'css/src/**/*.scss'
        },
        version: {
            autoprefixerOptions: {
                // For "browserslist" see "package.json"
                cascade: false,
                supports: false // See: https://github.com/filamentgroup/select-css/issues/17
            },
            dest: path.assets + 'css/build',
            sassOptions: {
                outputStyle: 'compressed'
            },
            src: path.assets + 'css/build/app.css'
        }
    }
}

gulp.task('default', ['clean'], function () {
    gulp.start('css');
    gulp.start('assetsVersionReplace');
});

    gulp.task('clean', function () {
    return del([
        path.assets + 'css/build',
        path.assets + 'js/build',
        path.assets + 'js/min',
        path.assets + 'img/build'
    ]);
});
gulp.task('css', function () {
    return gulp.src(config.tasks.css.src)
        .pipe(plumber({
            errorHandler: reportError
        }))
        .pipe(sass(config.tasks.css.sassOptions))
        .pipe(autoprefixer(config.tasks.css.autoprefixerOptions))
        .pipe(gulp.dest(config.tasks.css.dest));
});

gulp.task('assetsVersionReplace', function () {
  return gulp.src(config.tasks.version.src)
    .pipe(assetsVersionReplace({
      replaceTemplateList: [
        'app/design/frotend/custom_theme/default/template/page/head.phtml'
      ]
    }))
    .pipe(gulp.dest(config.tasks.version.dest))
});

gulp.task('watch', function () {
    // Run "default" immediately
    gulp.start('default');

    // CSS
    gulp.watch(config.tasks.css.src, ['css']);
    gulp.watch(config.tasks.version.src,              ['assetsVersionReplace']);
});

如何在创建css后运行资产版本替换任务（或运行'CSS'任务后）？

答案

要么改变

gulp.task('assetsVersionReplace', function () {

至

gulp.task('assetsVersionReplace', ['css'], function () {

或者，如果这不是一个选项，添加一个帮助程序任务

gulp.task('assetsVersionReplaceAfterCss', ['css'], function () {
    gulp.start('assetsVersionReplace');
}

并使用它

另一答案

你为什么不用gulp系列。

gulp.task('default',
    gulp.series(
       'css',
       'assetsVersionReplace'
    )
);