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

斯库贝

我似乎无法获得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,
  ),
);
斯库贝

我最终使用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')),
);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Gulp Rev在清单文件中不包含路径

来自分类Dev

Gulp-Rev-replace不用gulp-rev哈希替换我的文件路径

来自分类Dev

使用gulp-rev,gulp-rev-replace,gulp-rev-css-url进行Gulp修订

来自分类Dev

gulp-rev-replace不会更改master.blade.php中的修订文件名

来自分类Dev

Gulp-rev:第一次不起作用,但是之后

来自分类Dev

Gulp合并凉亭文件

来自分类Dev

Gulp:合并文件

来自分类Dev

ARM GCC是否对汇编“ REV”指令具有内置功能?

来自分类Dev

是否有git rev规范指定已暂存的文件?

来自分类Dev

Gulp为现有文件生成清单文件

来自分类Dev

Gulp Sourcemaps路径

来自分类Dev

Gulp Sourcemaps路径

来自分类Dev

JSON文件中的Broccoli Asset Rev指纹URL

来自分类Dev

“rev”在现实生活中有什么应用?

来自分类Dev

用gulp复制文件

来自分类Dev

wired gulp,文件顺序

来自分类Dev

如何查看gulp文件?

来自分类Dev

编译适当的 gulp 文件

来自分类Dev

gulp 文件 babelify 任务

来自分类Dev

Gulp: /usr/local/bin/gulp: 没有那个文件或目录

来自分类Dev

Gulp-sass - 删除文件路径

来自分类Dev

文件路径在gulp src中有效吗

来自分类Dev

gulp-wiredep替换路径

来自分类Dev

修改gulp.dest的路径

来自分类Dev

gulp.dest()不会导致文件更新

来自分类Dev

Gulp不会按预期复制所有文件

来自分类Dev

Gulp运行不正确

来自分类Dev

gulp管道(gulp.dest())不会产生任何结果

来自分类Dev

git p4 clone无法获取@ rev,#head的所有文件