0

I've written a gulp task to rename files so that they can be versioned. The problem is that the filenames of the files that the index.html scripts reference are not changed.

For example, in my index.html:

<script src=pub/main_v1.js"></script>

But if you actually navigate through the build folder to the subdirectory pub, you will find main.js.

Here is the custom gulp task:

const gulpConcat = require('gulp-concat');
const gulpReplace = require('gulp-replace');
const version = require('./package.json').version;

gulp.task('version', function () {
    var vsn = '_' + version + '.js';
    gulp.src('scripts/**/*.js')
        .pipe(gulpConcat(vsn))
        .pipe(gulp.dest('./prodBuild'));

    return gulp.src('./prodBuild/index.html', { base: './prodBuild' })
        .pipe(gulpReplace(/* some regex */, /* append vsn */))
        .pipe(gulp.dest('./prodBuild'));
});

What do I need to fix/add so that the original filename changes to match that in the script tag?

Note: According to the gulp-concat docs, I should be able to find the concated files at prodBuild/[vsn], where [vsn] is _v1.js. However, it is no where to be found.

Update: The files rename properly in index.html, but I can't seem to get the renaming of the original files to work. Here's a snapshot of my build directory:

prodBuild/
 pub/
   main.js
 someDir/
   subDirA/
     // unimportant stuff
   subDirB/
     file2.js
   file3.js
 // ...other files and folders...
TheRealFakeNews
  • 7,512
  • 16
  • 73
  • 114

1 Answers1

1

EDIT: The issue is that you return only one of the two tasks. The first task is simply ignored by gulp, since it is not returned. A simple solutions: Split it into two tasks, and reference the one from the other, like in this SO answer.

Old Answer

This looks like a perfect case for the gulp-rename. You could simply pipe your scripts through gulp-rename, like this:

.pipe(rename(function (path) {
    path.basename += vsn;
    path.extname = ".js"
  }))

Gulp concat is, AFAIK, made for the concatination of files, not particularly for the renaming of them.

gandreadis
  • 3,004
  • 2
  • 26
  • 38
  • where would this go in my gulp task? – TheRealFakeNews Jan 24 '17 at 02:07
  • Nvm, I see now that this *should* also just work with gulp-concat :) Could you add a full directory structure of what you're seeing before and after building with that gulp script to your question? Because I think we need more information to find the source of the problem causing this – gandreadis Jan 24 '17 at 07:40
  • Could you explain how it *should* be working with gulp-concat? My understanding is that gulp-concat should help with the renaming. However, that doesn't seem to be working for me. – TheRealFakeNews Jan 24 '17 at 18:03
  • See my updated answer - I think the issue lies completely elsewhere :) – gandreadis Jan 24 '17 at 18:39
  • thanks for your help so far! regarding your edit, should the concat task come first? – TheRealFakeNews Jan 25 '17 at 04:42
  • The order should not matter, as they touch different files. You can pick either one to go first, arbitrarily. – gandreadis Jan 25 '17 at 06:12