Question

我正在尝试通过Gulp（gulp-google-cdn）运行google-cdn插件，将我的HTML文件中的bower引用转换为CDN等效文件。 Gulp-google-cdn没有做任何事情，启用DEBUG，显示：google-cdn Could not find satisfying version for angular-material ^1.0.5

我的任务（我使用每个文件包含任务的子目录）：

gulp.task('HTML:Release', function() {
    return gulp.src('../src/*.html')
        .pipe(googleCdn(require('../bower.json')))
        .pipe(gulp.dest('../dist/') )
    ;
});

HTML：

<!DOCTYPE html>
<html ng-app="OntarioDarts" ng-cloak lang="en">
<head>
</head>
<body layout="row" ng-cloak>
    <div layout="column" class="relative" layout-fill role="main">
        <md-content flex md-scroll-y>
            <ng-view></ng-view>
        </md-content>
    </div>
</body>


<!-- Load JavaScript Last for Speed. Load from CDN for cache speed -->
<!-- Angular JS -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-material/angular-material.min.js"></script>
<script src="bower_components/angular-material-icons/angular-material-icons.min.js"></script>

分发文件没有将Angular指向CDN，但仍尝试使用bower_components，即使它没有抱怨找不到文件。

我发现的一个问题是我的bower.json中的Angular设置为^ 1.5.0。但是，我只使用默认的Google CDN，目前没有1.5.0可用。我将bower.json文件中的版本更改为^ 1.4.0，然后将文件更改为使用版本为1.4.7的CDN。

但问题是引用没有更改为HTTPS：//，而只是保留为src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"

Answer 1

Gulp-google-cdn没有做任何事情，启用DEBUG，显示：google-cdn Could not find satisfying version for angular-material ^1.0.5

这是因为Google CDN is 1.0.4提供的最新版本。

但问题是引用没有更改为HTTPS：//，而只是保留为src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"

这不一定是个问题。那是protocol-relative URL。如果您的网页是通过HTTP提供的，则会通过HTTP获取angular.min.js。如果您的网页是通过HTTPS投放的，则会通过HTTPS获取angular.min.js。

除非您绝对需要始终通过HTTPS获取angular.min.js，否则您可以保留它。

编辑： ...除了您尝试在浏览器中打开本地HTML文件时。然后您的协议为file://，协议相对URL将引用您的本地文件系统。这当然无处可去。

解决此问题的一种方法是通过本地运行的网络服务器（例如gulp-webserver）提供html文件。当你的HTML页面来自例如http://localhost:8000/所有协议相对网址也将在http://上提供。

如果您只是希望所有CDN网址都以https://作为前缀，那么可以使用google-cdn-data对象来实现此目的：

var gulp = require('gulp');
var googleCdn = require('gulp-google-cdn');
var jp = require('jsonpath');

function protocol(proto, cdn) {
    jp.apply(cdn, '$.*.url', function(url) {
        return function(version) {
            return proto + url(version);
        };
    });
    return cdn;
}

gulp.task('HTML:Release', function() {
    return gulp.src('../src/*.html')
        .pipe(googleCdn(require('./bower.json'), {
             cdn: protocol('https:', require('google-cdn-data'))
         }))
        .pipe(gulp.dest('../dist/') );
});

您需要运行npm install --save-dev google-cdn-data jsonpath才能实现此目的。

Google-CDN不会改变CDN的路径，而是将其留在bower_components上

1 个答案: