Gulp-cdnizer - Not replacing source links

StackOverflow https://stackoverflow.com//questions/23033657

  •  21-12-2019
  •  | 
  •  

Frage

I'm trying to get gulp-cdnizer to work but all it does is take in the file and spits out the file unprocessed to the destination folder. Perhaps my option settings are wrong or the gulp task isn't working. How do you configure the gulp-cdnizer to work with a custom bower_components path?

Gulp task:

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 file './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:

Folder Structure

What needs to be done to get gulp-cdnizer to work?

War es hilfreich?

Lösung

Turns out you have a couple of typos in your gulpfile. You have everything wrapped inside the first gulp.src().pipe(), rather than being chained.

If you strip the arguments and whitespace, you can see what you have is this:

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

When it should be:

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

Honestly, I'm not sure why this failed the way it did, but the result of cdnizer() was being bypassed.

Simply fix your nesting / parentheses, like so, and you'll be all set.

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

You can also eliminate the wrapper object and default options, if your .bowerrc is in the right place:

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/'));
});
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top