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任务正在使用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>

但只有当我删除了领先的＆＃39; ../'时，它才有效。来自添加的链接 输入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全局。

来实现

您还需要使用bowerComponents option提供bower_components文件夹的位置：

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'));
});