Gulp cdnizer not working with relative link

Question

I am writing a gulp task to replace the local links of libraries used in development to be replaced with public CDN links. This is the part of my index.html file.

<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../bower_components/angular/angular.js"></script>

Gulp task that I am writing is using gulp-cdnizer

gulp.task('cdn', function () {
  return gulp.src('.tmp/serve/index.html')
    .pipe(cdnizer([
            'google:angular',
            'cdnjs:jquery'
         ]))
    .pipe(gulp.dest('dist'));
});

It should generate following output

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script><script>if(!(window.jQuery)) cdnizerLoad("bower_components/jquery/dist/jquery.js");</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script><script>if(!(window.angular)) cdnizerLoad("bower_components/angular/angular.js");</script>

But it work's only when I remove the leading '../' from the links added in input HTML file

 <script src="bower_components/jquery/dist/jquery.js"></script>
 <script src="bower_components/angular/angular.js"></script>

What changes do I need to make in gulp cdn task to achieve the desired result with previous HTML input.

Edit

Folder structure is like this.

Answer 1

You didn't give details on your project layout so I'll assume it looks like this:

project/someOtherDirectory/gulpfile.js
project/someOtherDirectory/index.html
project/bower_components/jquery/dist/jquery.js
project/bower_components/angular/angular.js

When you pass 'cdnjs:jquery' to gulp-cdnizer it tries to find all paths in your index.html that match this glob pattern: **/jquery?(-????????).?(min.)js.

All file paths that match will be replaced with the corresponding paths pointing to //cdnjs.com.

However the ** glob pattern does not match directories that start with a . and since your paths all start with ../bower_components that means none of them are replaced by gulp-cdnizer.

You need to make your paths absolute by providing the relativeRoot option. You can do that by passing the __dirname global.

You also need to provide the location of your bower_components folder using the bowerComponents option:

gulp.task('cdn', function () {
  return gulp.src('/index.html')
    .pipe(cdnizer({
      relativeRoot: __dirname,
      bowerComponents: '../bower_components',
      files: [
        'google:angular',
        'cdnjs:jquery'
      ]
    }))
    .pipe(gulp.dest('dist'));
});