jonkemp / gulp-useref

Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
MIT License
705 stars 93 forks source link

base option not working as expected #208

Open mozmorris opened 8 years ago

mozmorris commented 8 years ago

Thanks for this plugin, it's been very useful to me.

My understanding is that the base option provides a mechanism to output assets to the given directory. Perhaps it's just that I'm misunderstanding how the base option works.

I've created a test repos that hopefully demonstrates the problem: https://github.com/MozMorris/gulp-useref-example

I set the base option like so:

.pipe(useref({
    searchPath: 'static',
    base: 'dist/some/other/directory'
}))

HTML:

<!-- build:css /css/build/style.css -->
<link rel="stylesheet" href="/css/style.css">
<!-- endbuild -->

My expectation is that assets in my static folder get written to dist/some/other/directory with the final html looking like:

<link rel="stylesheet" href="/css/build/style.css">

The actual result is my assets are written to dist without the base option folder structure.

marcandrews commented 8 years ago

I too cannot get the option.base to work as expected.

gulpfile.js:

gulp.task('default', function() {
  return gulp.src('src/client/*.html', { base: 'src' })
    .pipe(useref({ base: 'client' }))
    .pipe(gulpif('*.js', ngAnnotate()))
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', cleanCss()))
    .pipe(gulp.dest('build'));
});

*.html:

    <!-- build:css css/style.css -->
    <link rel="stylesheet" href="css/layout.css">
    <link rel="stylesheet" href="css/overlay.css">
    <!-- endbuild -->

For example, I expect style.css to be in build/client/css/, but it ends up in build/css/ with the rest of the assets instead.

asabhaney commented 8 years ago

My hunch is that the base is being overwritten by the gulp.dest at the end of the gulp task pipeline. A workaround for now is to control the output of the assets using gulp-if to pipe to different destinations depending of the extension of the files in the pipeline. For example:

gulp.task('default', function() {
   return gulp.src('src/client/*.html')
      .pipe(useref())
      .pipe(gulpif('**/*.html', gulp.dest('build')))
      .pipe(gulpif('**/*.js', gulp.dest('client')))
});
leenxyz commented 8 years ago

+1

mgazelle commented 8 years ago

Unfortunately not working with me as well. Even the workaround does not work

TM4RT commented 7 years ago

Same here, I am using Craft CMS and need the final concatenated script to output to my assets folder which is 3 directories up from the template files where the links to the scripts are, base does not appear to be working how I expected.

Dizzzy commented 7 years ago

Not working for me either - @asabhaney 's solution works, thanks!