0

我正在编写一个 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>

但只有当我从输入 HTML 文件中添加的链接中删除前导 '../' 时它才有效

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

我需要在 gulp cdn 任务中进行哪些更改才能使用以前的 HTML 输入实现所需的结果。

编辑

文件夹结构是这样的。

项目布局

4

1 回答 1

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 模式匹配的所有路径：**/jquery?(-????????).?(min.)js。

所有匹配的文件路径都将替换为指向//cdnjs.com.

但是，**glob 模式与以 a 开头的目录不匹配，.并且由于您的路径都以这开头，../bower_components这意味着它们都不会被gulp-cdnizer.

您需要通过提供relativeRoot选项来使您的路径成为绝对路径。你可以通过传递__dirname全局来做到这一点。

您还需要使用以下选项bower_components提供文件夹的位置：bowerComponents

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'));
});
于 2016-09-04T14:21:26.647 回答