【问题标题】:Running gulp commands one by one results in different output than running them in gulp.series. Why?一个接一个地运行 gulp 命令会产生与在 gulp.series 中运行它们不同的输出。为什么?
【发布时间】:2020-08-24 10:56:59
【问题描述】:

下面是我的 gulpfile。我正在尝试从 scss 生成缩小的 css,然后使用 gulp-rev 重命名它。运行 gulp clean:assets 然后 gulp scss 然后 gulp css 完美运行。但是运行 gulp build 并不能完成任务。缩小的 css 存储在 ./assets/css 中,但重命名的 css 没有存储在 ./public/assets 中

const gulp = require('gulp');
//gulp sass converts sass to css
const sass = require('gulp-sass');
//cssnano converts css to minified form
const cssnano = require('gulp-cssnano');
//rev renames the assets by appending content hash to filenames so that the browser treats it as a new asset if content is changed
const rev = require('gulp-rev');
const path = require('path');
const del = require('del');

gulp.task('clean:assets', function(done){
    del.sync('./public/assets');
    del.sync('./assets/css');
    done();
});

gulp.task('scss', function(done){
    gulp.src('./assets/scss/**/*.scss')
    .pipe(sass())
    .pipe(cssnano())
    .pipe(gulp.dest('./assets/css'))
    done();
});

gulp.task('css', function(done){
    gulp.src('./assets/css/**/*.css', {base: path.join(process.cwd(), 'assets')})
    .pipe(rev())
    .pipe(gulp.dest('./public/assets/'))
    .pipe(rev.manifest('public/assets/rev-manifest.json',{
        base: process.cwd()+'./public/assets',
        merge: true
    }))
    .pipe(gulp.dest('./public/assets'));
    done();
});

gulp.task('build', gulp.series('clean:assets', 'scss', 'css'), function(done){
    done(); 
})

【问题讨论】:

    标签: css sass gulp minify


    【解决方案1】:
    gulp.task('scss', ()=> {
        return new Promise((resolve, reject) => {
            return gulp.src('./assets/scss/**/*.scss')
                .pipe(sass())
                .pipe(cssnano())
                .pipe(gulp.dest('./assets/css'))
                .on('end', resolve)
                .on('error', reject);
        });
    });
    

    将 scss 任务更改为上述任务以使其正常工作。参考https://stackoverflow.com/a/53937286/7374508

    【讨论】:

      猜你喜欢
      • 2019-06-16
      • 2020-02-07
      • 1970-01-01
      • 1970-01-01
      • 2016-01-11
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-03-22
      相关资源
      最近更新 更多