I can't seem to get gulp-rev
to have the correct paths. I've tried everything I can think of.
I have two tasks (among others) one for scripts and one for styles. I can get a merged manifest.json
file successfully. However, the paths are not coming through.
Here's the merged 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",
...
}
Here is my gulpfile.babel.js
file:
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,
),
);
I ended up using gulp-rename
to get the correct paths:
.pipe($.rename({
dirname: 'scripts',
}))
.pipe($.rev())
...Similar thing for styles
but not merging the manifest files for each, opting to leave them in their respective folders.
And then used gulp-rev-collector
to actually update the file mappings referenced in the manifest.
// Revision static asset files
gulp.task('rev', () =>
gulp.src(['build/**/rev-manifest.json', 'build/*.html'])
.pipe($.revCollector())
.pipe(gulp.dest('build')),
);