gulp-bundle-assets
gulp-bundle-assets copied to clipboard
Specify custom paths for the `copy` task
For copy, we can relativize the destination directory by specifying a base directory. For example,
copy: [
{
src: 'vendor/font-awesome-4.5.0/fonts/**/*',
base: 'vendor/font-awesome-4.5.0/'
}
]
will copy the files into myBaseDirectory/fonts/. However, what if I wanted to copy the files into myBaseDirectory/foo/ instead? I know I can set options.base in my gulpfile, but this is a global configuration parameter. In this case, we just want to specify the target directory for the fonts.
This is one of many copy feature requests. For now what I've been telling people is: if you need advanced copy functionality, use gulp ootb as a dependent task to your bundle task
gulp.task('bundle', ['copy'], function() {
return gulp.src('./bundle.config.js')
.pipe(bundle())
.pipe(gulp.dest('./public'));
});
gulp.task('copy', function () {
return gulp.src('vendor/font-awesome-4.5.0/fonts/**/*')
.pipe(gulp.dest('./public/foo'));
});
Does that work for you?
Yup, I'll give it a try. Will a dependent task like gulp-replace also work for modifying relative URLs in CSS (background images, @font-face sources, etc) before/after bundling?
@alexweissman yep! Running gulp-replace as a dependent task would work fine. However a cleaner approach would be to build it into your styles bundle as a custom transform, e.g.
// bundle.config.js
var lazypipe = require('lazypipe');
var replace = require('gulp-replace');
module.exports = {
bundle: {
main: {
styles: ...,
options: {
transforms: {
styles: lazypipe().pipe(replace('bar', 'foo'))
}
}
}
}
};
See this example for more details: https://github.com/dowjones/gulp-bundle-assets/tree/master/examples/custom-transforms
Let me know if that works for you.
Yes, I like this. I imagine I could assign lazypipe().pipe(replace('bar', 'foo')) to a variable, and that way be able to use the same transformation in different bundles?
Thanks again for all your help, I'm excited about incorporating npm and gulp-bundle-assets into my project!