Question

我似乎无法让gulp-rev拥有正确的路径。我已经尝试了所有我能想到的东西。

我有两个任务（其中一个）一个用于脚本，一个用于样式。我可以成功获得合并的manifest.json文件。但是，这些路径并没有通过。

这是合并后的manifest.json：

{
 ...
"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",
 ...
}

这是我的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

我最终使用gulp-rename来获取正确的路径：

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

... styles的类似内容，但没有合并每个的清单文件，选择将它们留在各自的文件夹中。

然后使用gulp-rev-collector实际更新清单中引用的文件映射。

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

Gulp-rev不会将清单文件与正确的路径合并

1 个答案: