Question

我正在尝试让gulp-cdnizer工作，但它所做的就是接收文件并将未处理的文件吐出到目标文件夹。也许我的选项设置错误或gulp任务无效。如何配置gulp-cdnizer以使用自定义bower_components路径？

Gulp任务：

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

});

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

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

文件夹结构：

Folder Structure

需要做些什么才能让gulp-cdnizer工作？

Answer 1

原来你的gulpfile中有一些拼写错误。你把所有东西包裹在第一个gulp.src().pipe()内，而不是被链接。

如果你删除参数和空格，你可以看到你拥有的是：

return gulp.src(...)
    .pipe(
        cdnizer(...).pipe(gulp.dest(...))
    );

应该是：

return gulp.src(...)
   .pipe(cdnizer(...))
   .pipe(gulp.dest('./dist/'));

老实说，我不确定为什么这样做会失败，但cdnizer()的结果被绕过了。

简单地修复你的嵌套/括号，就像这样，你就可以了。

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

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

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

    return gulp.src('./app/**/*.html')
        .pipe(cdnizer([
                    {
                        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/'));
});

Gulp-cdnizer - 不替换源链接

1 个答案: