Output JS and HTML to different locations using Gulp Usemin

Question

I'm using gulp-usemin to combine my JS files (with uglify)

I have a folder structure as follows:

Top
  |- Web
      |- Scripts
         |- App
             |- script1.js
             |- script2.js
         |- Vendor (folder)
         |- CompiledScripts
             |- useminFile1.js
      |- Areas
          |- Area1
              |- index.html

All the usecases for gulp-usemin designate copying everything to a dist folder, which I cannot do.

The goal is to rewrite the index.html file to it's current location, but to write the combined JS files to 'Top/Web/Scripts/CompiledScripts'. I've tried various combinations but I can only get JS OR html in the correct place, never both.

I've put the basic task below. This will output the re-written index file in the correct location, but not the compiled JS files (will be in same directory as the html file, put at the path in the html block).

gulp.src('./Top/Web/Areas/Area1/index.html')
    .pipe(usemin({
        path: './Top/Web/',
        assetsDir: './Top/Web/',
        js: [
            uglify()
        ]
    }))
    .pipe( gulp.dest( './Top/Web/Areas/Area1/' ) );

HTML Block. Needs to have absolute path to scripts

<!-- build:js /Scripts/CompiledModules/Libraries/test.js -->
    <script src="/Scripts/Vendor/Bower/lodash/dist/lodash.js"></script>
    <script src="/Scripts/Vendor/Bower/jquery/jquery.js"></script>
<!-- endbuild -->

Any help would be greatly appreciated. Trying more combinations as we speak

Answer 1

Since you have:

.pipe( gulp.dest( './Top/Web/Areas/Area1/' ) );

You need to use:

<!-- build:js ../../Scripts/CompiledScripts/vendor.min.js -->