Question

我的public / assets / css的连接和目标只有在我运行2次任务时才有效。即使我只运行app.css（npm run 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尊重您定义的任务依赖关系的顺序，您需要在任务完成时告诉它。

为此，您需要返回stream，承诺或致电task function callback parameter。

由于您的任务非常基本，只需返回流即可。

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'])

Answer 2

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

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

const gulpSequence = require('gulp-sequence')

通过以下方式替换当前的“应用”任务：

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

我的gulp任务是“concat”和“dest”我的.css文件，只有在我运行2次时才会运行

2 个答案: