Gulp cdnizer-不替换源链接_Gulp

Gulp cdnizer-不替换源链接

gulp

Gulp cdnizer-不替换源链接,gulp,Gulp,我试图让gulp cdnizer工作，但它所做的只是接收文件并将未经处理的文件吐出到目标文件夹。可能是我的选项设置错误，或者“吞咽”任务不起作用。如何配置gulp Cdinizer以使用自定义bower_组件路径吞咽任务： gulp.task('makeCdn', function () { return gulp.src('./app/**/*.html') .pipe(cdnizer({ bowerComponents: './vendor

我试图让gulp cdnizer工作，但它所做的只是接收文件并将未经处理的文件吐出到目标文件夹。可能是我的选项设置错误，或者“吞咽”任务不起作用。如何配置gulp Cdinizer以使用自定义bower_组件路径

吞咽任务：

gulp.task('makeCdn', function () {

    return gulp.src('./app/**/*.html')
        .pipe(cdnizer({
            bowerComponents: './vendor/bower_components',
            allowRev: true,
            allowMin: true,
                files: [
                    {
                        file: '/vendor/bower_components/angular/angular.js',
                        package: 'angular',
                        // angular has a bizarre version string inside bower, with extra information.
                        // using major.minor.patch directly ensures it works with the CDN
                        cdn: '//ajax.googleapis.com/ajax/libs/angularjs/${ major }.${ minor }.${ patch }/angular.min.js'
                    }
                ]
            })
            .pipe(gulp.dest('./dist/'))
        );

});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>

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

    </body>
</html>

HTML文件
。/app/test/test.HTML'
：

gulp.task('makeCdn', function () {

    return gulp.src('./app/**/*.html')
        .pipe(cdnizer({
            bowerComponents: './vendor/bower_components',
            allowRev: true,
            allowMin: true,
                files: [
                    {
                        file: '/vendor/bower_components/angular/angular.js',
                        package: 'angular',
                        // angular has a bizarre version string inside bower, with extra information.
                        // using major.minor.patch directly ensures it works with the CDN
                        cdn: '//ajax.googleapis.com/ajax/libs/angularjs/${ major }.${ minor }.${ patch }/angular.min.js'
                    }
                ]
            })
            .pipe(gulp.dest('./dist/'))
        );

});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>

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

    </body>
</html>

文件夹结构：

gulp.task('makeCdn', function () {

    return gulp.src('./app/**/*.html')
        .pipe(cdnizer({
            bowerComponents: './vendor/bower_components',
            allowRev: true,
            allowMin: true,
                files: [
                    {
                        file: '/vendor/bower_components/angular/angular.js',
                        package: 'angular',
                        // angular has a bizarre version string inside bower, with extra information.
                        // using major.minor.patch directly ensures it works with the CDN
                        cdn: '//ajax.googleapis.com/ajax/libs/angularjs/${ major }.${ minor }.${ patch }/angular.min.js'
                    }
                ]
            })
            .pipe(gulp.dest('./dist/'))
        );

});

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>

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

    </body>
</html>

需要做些什么才能让gulp cdnizer正常工作

结果是你的gulpfile中有几个拼写错误。您将所有内容包装在第一个

gulp.src（）.pipe（）

中，而不是被链接

如果去掉参数和空格，您可以看到您拥有的是：

return gulp.src（…）
.烟斗(
洗涤塔（…）.管道（大口目的地（…））
);

何时应该：

return gulp.src（…）
.管道（cdnizer（…））
.管道（大口目的地（'./距离/'）；

老实说，我不知道为什么会这样失败，但是

cdnizer（）

的结果被忽略了

简单地修复嵌套/圆括号，就像这样，您就一切就绪了

gulp.task（'makeCdn'，function（）{
返回gulp.src（“./app/***.html”）
.管道（清洁剂）({
bower组件：'/供应商/bower_组件'，
阿洛夫：是的，
阿洛明：是的，
档案：[
{
文件：'/vendor/bower_components/angular/angular.js'，
包装：'角度'，
//angular在凉亭里有一个奇怪的版本字符串，带有额外的信息。
//直接使用major.minor.patch可确保它与CDN一起工作
cdn:“//ajax.googleapis.com/ajax/libs/angularjs/${major}.${minor}.${patch}/angular.min.js”
}
]
}))
.管道（大口目的地（'./距离/'）；
});

如果

.bowerrc

位于正确的位置，您还可以删除包装器对象和默认选项：

gulp.task（'makeCdn'，function（）{
返回gulp.src（“./app/***.html”）
.管道（清洁剂）([
{
文件：'/vendor/bower_components/angular/angular.js'，
包装：'角度'，
//angular在凉亭里有一个奇怪的版本字符串，带有额外的信息。
//直接使用major.minor.patch可确保它与CDN一起工作
cdn:“//ajax.googleapis.com/ajax/libs/angularjs/${major}.${minor}.${patch}/angular.min.js”
}
]))
.管道（大口目的地（'./距离/'）；
});

Author here:

bower\u组件

是使用

.bowerrc

自动确定的，如果设置正确的话。我不认为这有什么失败的理由。你测试过它了吗？我测试过了，它的.bowerrc文件内容是

{“directory”：“/bower\u components”}

。然后我尝试了一种更传统的bower安装，其中.bowerrc和bower.json安装在项目的根目录中，其中.bowercc文件包含：

{“directory”：“/vendor/bower_components”}

。仍然没有骰子。@Over热心我也尝试过在上面提到的两个场景中使用和不使用bowerComponents参数。感谢您的帮助。我看到的一件事是，

.bowerrc

文件位于错误的位置-它需要位于项目的根目录下，以及sige

gulpfile.js

。这可能解释了自动查找bower_组件失败的原因。不过，还有一点是错误的，因为bower只用于查找版本信息，它实际上并不是替换过程的一部分。@Over热心的Hmmm。不知道发生了什么。正如我在前面的评论中所描述的，我将

.bowerrc

和

bower.json

移动到我的项目的根目录下并进行了测试。因此，我认为还发生了其他事情。这应该更明显-我立即注意到文件中

.pipe（）

调用的奇怪对齐，但忽略了它。哦！但愿我早一点看到！我认为您在github上的

README.md

中的示例代码可能会让我误入歧途。它缺少一个

）

。感谢您注意到错误并提供解决方案。啊，谢谢，我更新了自述。我稍后也会重新发布npm模块，但这一分钟我很头疼。