dowjones / gulp-bundle-assets

Create static asset (js, css) bundles from a config file: a common interface to combining, minifying, revisioning and more
MIT License
133 stars 36 forks source link

Specify custom paths for the `copy` task #77

Open alexweissman opened 8 years ago

alexweissman commented 8 years ago

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.

chmontgomery commented 8 years ago

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?

alexweissman commented 8 years ago

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?

chmontgomery commented 8 years ago

@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.

alexweissman commented 8 years ago

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!