Gulp-rev ne fusionnera pas les fichiers manifestes avec les chemins corrects

Question

Je n'arrive pas à obtenir gulp-rev pour avoir les bons chemins. J'ai essayé tout ce que je pouvais penser.

J'ai deux tâches (entre autres) une pour les scripts et une pour les styles. Je peux obtenir un fichier fusionné manifest.json avec succès. Cependant, les chemins ne passent pas.

Voici le manifest.json fusionné:

{ 
... 
"main.css": "main-b7877c7599.css", 
"main.css.map": "main-b58100898e.css.map", 
"main.min.js": "main-00da8f7f74.min.js", 
"main.min.js.map": "main-206550c510.min.js.map", 
... 
} 

Voici mon fichier gulpfile.babel.js:

import gulp from 'gulp'; 
import del from 'del'; 
import runSequence from 'run-sequence'; 
import browserSync from 'browser-sync'; 
import gulpLoadPlugins from 'gulp-load-plugins'; 
import { output as pagespeed } from 'psi'; 
import browserify from 'browserify'; 
import babelify from 'babelify'; 
import buffer from 'vinyl-buffer'; 
import source from 'vinyl-source-stream'; 

const $ = gulpLoadPlugins(); 
const reload = browserSync.reload; 

// Lint JavaScript 
gulp.task('lint',() => 
    gulp.src(['app/scripts/**/*.js', '!node_modules/**']) 
    .pipe($.eslint()) 
    .pipe($.eslint.format()) 
    .pipe($.if(!browserSync.active, $.eslint.failAfterError())), 
); 

// Optimize images 
gulp.task('images',() => 
    gulp.src('app/images/**/*') 
    .pipe($.cache($.imagemin({ 
     progressive: true, 
     interlaced: true, 
    }))) 
    .pipe(gulp.dest('build/images')) 
    .pipe($.size({ title: 'images' })), 
); 

// copy fonts 
gulp.task('fonts',() => 
    gulp.src('app/fonts/**/*') 
    .pipe(gulp.dest('build/fonts')) 
    .pipe($.size({ title: 'fonts' })), 
); 

// Copy all files at the root level (app) 
gulp.task('copy',() => 
    gulp.src([ 
    'app/*', 
    '!app/*.html', 
    '!app/imports/', 
    // 'node_modules/apache-server-configs/build/.htaccess', 
    ], { 
    dot: true, 
    }).pipe(gulp.dest('build')) 
    .pipe($.size({ title: 'copy' })), 
); 

// Compile and automatically prefix stylesheets 
gulp.task('styles',() => { 
    const AUTOPREFIXER_BROWSERS = [ 
    'ie >= 10', 
    'ie_mob >= 10', 
    'ff >= 30', 
    'chrome >= 34', 
    'safari >= 7', 
    'opera >= 23', 
    'ios >= 7', 
    'android >= 4.4', 
    'bb >= 10', 
    ]; 

    // For best performance, don't add Sass partials to `gulp.src` 
    return gulp.src([ 
    'app/styles/**/*.scss', 
    'app/styles/**/*.css', 
    ]) 
    .pipe($.newer('.tmp/styles')) 
    .pipe($.sourcemaps.init()) 
    .pipe($.sass({ 
     precision: 10, 
     includePaths: ['node_modules/susy/sass'], 
    }).on('error', $.sass.logError)) 
    .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS)) 
    .pipe(gulp.dest('.tmp/styles')) 
    // Concatenate and minify styles 
    .pipe($.if('*.css', $.cssnano())) 
    .pipe($.size({ title: 'styles' })) 
    .pipe($.sourcemaps.write('./')) 
    .pipe($.rev()) 
    .pipe(gulp.dest('build/styles')) 
    .pipe($.rev.manifest('manifest.json', { 
     cwd: './build', 
     merge: true, 
    })) 
    .pipe(gulp.dest('build/styles')) 
    .pipe(gulp.dest('.tmp/styles')); 
}); 

gulp.task('scripts',() => { 
    const b = browserify({ 
    entries: 'app/scripts/main.js', 
    transform: babelify, 
    debug: true, 
    }); 

    return b.bundle() 
    .pipe(source('main.js')) 
    .pipe(buffer()) 
    .pipe($.sourcemaps.init({ loadMaps: true })) 
    .pipe($.sourcemaps.write()) 
    .pipe(gulp.dest('.tmp/scripts')) 
    .pipe($.concat({ path: 'main.min.js', cwd: '' })) 
    .pipe($.uglify({ preserveComments: 'some' })) 
    // Output files 
    .pipe($.size({ title: 'scripts' })) 
    .pipe($.sourcemaps.write('.')) 
    .pipe($.rev()) 
    .pipe(gulp.dest('build/scripts')) 
    .pipe($.rev.manifest('manifest.json', { 
     cwd: './build', 
     merge: true, 
    })) 
    .pipe(gulp.dest('build/scripts')) 
    .pipe(gulp.dest('.tmp/scripts')); 
}); 

// Scan your HTML for assets & optimize them 
gulp.task('html',() => 
    gulp.src(['app/**/*.html', '!app/imports/*.html']) 
    .pipe($.fileInclude({ 
     prefix: '@@', 
     basepath: '@file', 
    })) 
    .pipe($.useref({ 
     searchPath: '{.tmp,app}', 
     noAssets: true, 
    })) 
    .pipe(gulp.dest('.tmp/')) 


    // Minify any HTML 
    .pipe($.if('*.html', $.htmlmin({ 
     removeComments: true, 
     collapseWhitespace: false, 
     collapseBooleanAttributes: true, 
     removeAttributeQuotes: true, 
     removeRedundantAttributes: true, 
     removeEmptyAttributes: true, 
     removeScriptTypeAttributes: true, 
     removeStyleLinkTypeAttributes: true, 
     removeOptionalTags: true, 
    }))) 
    // Output files 
    .pipe($.if('*.html', $.size({ title: 'html', showFiles: true }))) 
    .pipe(gulp.dest('build')), 
); 

// Clean output directory 
gulp.task('clean',() => del(['.tmp', 'build/*', '!build/.git'], { dot: true })); 

// Watch files for changes & reload 
gulp.task('serve', ['scripts', 'styles', 'html'],() => { 
    browserSync({ 
    notify: false, 
    // Customize the Browsersync console logging prefix 
    logPrefix: 'WSK', 
    // Allow scroll syncing across breakpoints 
    scrollElementMapping: ['main', '.mdl-layout'], 
    // Run as an https by uncommenting 'https: true' 
    // Note: this uses an unsigned certificate which on first access 
    //  will present a certificate warning in the browser. 
    // https: true, 
    server: ['.tmp', 'app'], 
    port: 3000, 
    }); 

    gulp.watch(['app/**/*.html'], ['html', reload]); 
    gulp.watch(['app/styles/**/*.{scss,css}'], ['styles', reload]); 
    gulp.watch(['app/scripts/**/*.js'], ['lint', 'scripts', reload]); 
    gulp.watch(['app/images/**/*'], ['images', reload]); 
    gulp.watch(['app/fonts/**/*'], ['fonts', reload]); 
}); 

// Build and serve the output from the distribution build 
gulp.task('serve:build', ['default'],() => 
    browserSync({ 
    notify: false, 
    logPrefix: 'WSK', 
    // Allow scroll syncing across breakpoints 
    scrollElementMapping: ['main', '.mdl-layout'], 
    // Run as an https by uncommenting 'https: true' 
    // Note: this uses an unsigned certificate which on first access 
    //  will present a certificate warning in the browser. 
    // https: true, 
    server: 'build', 
    port: 3001, 
    }), 
); 

// Build production files, the default task 
gulp.task('default', ['clean'], cb => 
    runSequence(
    'copy', 
    'styles', 
    ['lint', 'html', 'scripts', 'images', 'fonts'], 
    cb, 
), 
); 

Answer 1

Je fini par utiliser gulp-rename pour obtenir les chemins corrects:

.pipe($.rename({ 
    dirname: 'scripts', 
})) 
.pipe($.rev()) 

... Une chose similaire pour styles mais pas la fusion les fichiers manifestes pour chacun, en choisissant de les laisser dans leurs dossiers respectifs.

Puis utilisé gulp-rev-collector pour mettre à jour les mappages de fichiers référencés dans le manifeste.

// Revision static asset files 
gulp.task('rev',() => 
    gulp.src(['build/**/rev-manifest.json', 'build/*.html']) 
    .pipe($.revCollector()) 
    .pipe(gulp.dest('build')), 
);