Gulp cdnizer не работает с относительной ссылкой

Question

Я пишу задачу gulp, чтобы заменить локальные ссылки библиотек, используемых в разработке, для замены на общедоступные ссылки CDN. Это часть моего файла index.html.

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

Глоток задача, которую я пишу использует gulp-cdnizer

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

Он должен генерировать следующий вывод

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

Но это работает только тогда, когда я извлекаю ведущий «../» из ссылки добавлены в вход HTML-файл

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

Какие изменения необходимо внести в задачу gulp cdn для достижения желаемого результата с использованием предыдущего ввода HTML.

Редактировать

структура папок, как это.

Answer 1

Вы не дали подробной информации о макете проекта, поэтому я предполагаю, что это выглядит следующим образом:

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

Когда вы передаете 'cdnjs:jquery' к gulp-cdnizer он пытается найти все пути в вашем index.html которые соответствуют этому glob pattern: **/jquery?(-????????).?(min.)js.

Все пути к файлам, которые соответствуют, будут заменены соответствующими путями, указывающими на //cdnjs.com.

Однако картина ** Glob не соответствует каталогам, которые начинаются с . и так вашими путей начинается с ../bower_components, что не означает, что ни один из них заменяется gulp-cdnizer.

Вам необходимо сделать ваши пути абсолютными, предоставив relativeRoot option. Вы можете сделать это, передав __dirname глобальным.

Кроме того, необходимо указать местоположение папки bower_components с помощью 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')); 
});