脚本文件未加载到 rev-manifest.json (gulp)

Question

我有这个 gulpfile.js，我正在缩小我的 js 文件，问题是当我执行 gulp build 时，此任务正在创建缩小的 js 文件，但没有在 rev-manifest.json 中输入键值对。

gulp.task('js', function (done) {
    console.log('minifying js...');
    gulp.src('./assets/**/*.js')
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('./public/assets'))
        .pipe(rev.manifest({
            cwd: 'public',
            merge: true
        }))
        .pipe(gulp.dest('./public/assets'));
    done()
});

我的 scss 文件有一个类似的任务，它将 scss 转换为 CSS，然后缩小它。在 rev-manifest.json 中添加适当的键值对，这工作得非常好

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

    gulp.src('./assets/**/*.css')
        .pipe(rev())
        .pipe(gulp.dest('./public/assets'))
        .pipe(rev.manifest({
            cwd: 'public',
            merge: true
        }))
        .pipe(gulp.dest('./public/assets'));
    done();
});

这就是 rev-manifest.json 的样子

看到这里只添加了css文件，没有添加js文件。 我的 rev-manifest.json 存在于 public/assets/

中

Answer 1

就我而言，清单没有合并，而是被覆盖。 gulp.dest() 导致文件被覆盖。如果我们希望合并工作，我们确实必须在选项之前将清单的路径作为参数传递，这是工作代码：

const gulp = require('gulp');

const sass = require('gulp-sass')(require('sass'));
const cssnano = require('gulp-cssnano');
const rev = require('gulp-rev');
const uglify = require('gulp-uglify-es').default;
const imagemin = require('gulp-imagemin');
const del = require('del');

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

    return gulp.src('./assets/**/*.css')
    .pipe(rev())
    .pipe(gulp.dest('./public/assets/'))
    .pipe(rev.manifest('public/assets/rev-manifest.json', {
        base: './public/assets',
        merge: true // merge with the existing manifest (if one exists)
     }))
    .pipe(gulp.dest('./public/assets/'));
    done();
});

gulp.task('js', function (done) {
    console.log('minifying js...');
    gulp.src('./assets/**/*.js')
        .pipe(uglify())
        .pipe(rev())
        .pipe(gulp.dest('./public/assets/'))
        .pipe(rev.manifest('public/assets/rev-manifest.json', {
            base: './public/assets',
            merge: true // merge with the existing manifest (if one exists)
        }))
        .pipe(gulp.dest('./public/assets/'));
    done()
});

gulp.task('images', function(done){
    console.log('compressing images...');
    gulp.src('./assets/**/*.+(png|jpg|gif|svg|jpeg)')
    .pipe(imagemin())
    .pipe(rev())
    .pipe(gulp.dest('./public/assets/'))
    .pipe(rev.manifest('public/assets/rev-manifest.json', {
        base: './public/assets',
        merge: true // merge with the existing manifest (if one exists)
     }))
    .pipe(gulp.dest('./public/assets/'));
    done();
});


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

gulp.task('build', gulp.series('clean:assets', 'css', 'js', 'images'), function(done){
    console.log('Building assets');
    done();
});

Answer 2

我刚刚删除了 rev-manifest.js 文件并再次构建它，它起作用了。我花了一天的时间来做这件事。 为什么上帝为什么。