我的 gulp 任务到 "concat" 和 "dest" 我的 .css 文件，如果我运行 2 次，则只有运行ning

Question

我的 public/assets/css 的串联和目标仅在我运行任务的两倍时才有效。即使我运行只是 app.css (npm 运行 dev app.css)，也只有当我运行两次时才有效。

const gulp = require('gulp')
const htmlmin = require('gulp-htmlmin')
const uglify = require('gulp-uglify')
const uglifycss = require('gulp-uglifycss')
const concat = require('gulp-concat')
const babel = require('gulp-babel')
const sass = require('gulp-sass')

gulp.task('app', ['app.html', 'app.sass', 'app.js', 'app.assets', 'app.css'])

gulp.task('app.html', function(){
    gulp.src(['app/**/*.html'])
        .pipe(htmlmin({ collapseWhitespace: true, removeComments: true}))
        .pipe(gulp.dest('public'))
})

gulp.task('app.sass', function () {
    gulp.src(['sass/main.scss'])
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(gulp.dest('app/css'))
});

gulp.task('app.css', function(){
    gulp.src(['app/**/*.css'])
        .pipe(uglifycss({ "uglyComments": true}))
        .pipe(concat('app.min.css'))
        .pipe(gulp.dest('public/assets/css'))
})

gulp.task('app.js', function(){
    gulp.src(['app/**/*.js'])
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(uglify())
        .pipe(concat('app.min.js'))
        .pipe(gulp.dest('public/assets/js'))
})

gulp.task('app.assets', function(){
    gulp.src(['assets/**/*.*'])
        .pipe(gulp.dest('public/assets'))

})

Answer 1

我认为您的任务应该等待上一个任务的结果。您不能一次运行多项任务。

尝试使用 gulp-sequence 插件。安装 gulp-sequence 并在 gulpfile.js 的顶部添加以下行：

const gulpSequence = require('gulp-sequence')

将您当前的 'app' 任务替换为：

gulp.task('app', gulpSequence('app.html', 'app.sass', 'app.js', 'app.assets', 'app.css'))

Answer 2

为了gulp遵守您定义的任务依赖项的顺序，您需要在任务完成时告诉它。

为此，您需要 return 一个 stream, a promise, or call the task function callback parameter。

由于您的任务非常基本，因此只需 return 播放流就足够了。

gulp.task('app.sass', function () {
    return gulp.src(['sass/main.scss']) // notice the return here
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(gulp.dest('app/css'));
});

// make the sass task a dependency of the CSS task
gulp.task('app.css', ['app.sass'], function(){
    return gulp.src(['app/**/*.css']) // notice the return here
        .pipe(uglifycss({ "uglyComments": true}))
        .pipe(concat('app.min.css'))
        .pipe(gulp.dest('public/assets/css'));
});

现在您不需要 app.sass，因为它会在 app.css 之前运行。

gulp.task('app', ['app.html', 'app.js', 'app.assets', 'app.css'])

我的 gulp 任务到 "concat" 和 "dest" 我的 .css 文件，如果我运行 2 次，则只有运行ning

My gulp task to "concat" and "dest" my .css file, is only running if I run 2 times

javascript

gulp

gulp-concat

gulp-uglify

我的 gulp 任务到 "concat" 和 "dest" 我的 .css 文件，如果我 运行 2 次，则只有 运行ning

My gulp task to "concat" and "dest" my .css file, is only running if I run 2 times

javascript

gulp

gulp-concat

gulp-uglify

我的 gulp 任务到 "concat" 和 "dest" 我的 .css 文件，如果我运行 2 次，则只有运行ning