How to include gulp-cdnizer in the generator

[joaocc]

I have tried several options and I cannot get it to use CDN for bower_components packages. I think the "inject" task is where this should run, and tried setting the relativeRoot and bowerComponents options, but to no avail. Any hints? Thx

[zckrs]

I don't know this plugin gulp.

Maybe run new task after inject and before HTML task.

But why you don't ask help to gulp-cdnizer repo ?

[joaocc]

I did :) https://github.com/OverZealous/cdnizer/issues/20. But, after facing a similar problem with gulp-google-cdn, my conclusion is that having bower_components in root seems to be too big of a hassle. So I moved it back inside "src", made what I think are the needed changes, and my life improved a bit :).

[0101adm]

heres my task. it runs off of the build task.

i had probs w/ the bower dir too until i added relativeRoot param.

gulp .task('cdnizer',function(){
    return gulp .src('dist/index.html')
        .pipe($.cdnizer({
          allowRev: true,
          allowMin:true,
          relativeRoot:'bower_components',
          fallbackTest:'<script>(function(){try{var lib="${ filepath }".split("../")[1];if(typeof ${ test } === "undefined"){cdnizerLoad(lib);}}catch(err){cdnizerLoad(lib);}})();</script>',
          files: []
        }))
        .pipe(gulp.dest("dist"));
  });

[mustela]

Hey @0101adm did that integration worked? Would you mind to tell me between what tasks did you put it?

Thanks

[0101adm]

you will have to modify the 'other' task with this...

gulp.task('other', function () {
  var fileFilter = $.filter(function (file) {
    return file.stat.isFile();
  });

  gulp.src('./bower_components/**/*.js')
      .pipe(gulp.dest('dist/bower_components'));

  return gulp.src([
    path.join(conf.paths.src, '/**/*'),
    path.join('!' + conf.paths.src, '/**/*.{html,css,js,scss,ts,jade}')
  ])
    .pipe(fileFilter)
    .pipe(gulp.dest(path.join(conf.paths.dist, '/')));
});

this will move bower_componenets into your dist root. you will need this for the cdnizer fallback.

then this is your 'cdnizer' task...

gulp.task('cdnizer',function(){
  return gulp.src('dist/index.html')
      .pipe($.cdnizer({
        allowRev: true,
        allowMin:true,
        relativeRoot:'bower_components',
        fallbackTest:'<script>(function(){try{var lib="${ filepath }".split("../")[1];if(typeof ${ test } === "undefined"){cdnizerLoad(lib);}}catch(err){cdnizerLoad(lib);}})();</script>',
        files: [
          {
            file:'bower_components/Chart.js/Chart.min.js',
            cdn:'//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js',
            test:'Chart'
          }]
      }))
      .pipe(gulp.dest("dist"));

if you install https://github.com/shahata/cdnjs-cdn-data you can use paths like...

{
            file:'bower_components/angular/angular.js',
            cdn:'cdnjs:angular.js',
            test:'window.angular'
          }

then modify 'build' task with...

gulp.task('build', function(callback) {
    runSequence(['html','fonts','other'],'cdnizer',callback);
});

you will have to install https://www.npmjs.com/package/gulp-run-sequence to use runSequence.

this will run cdnizer lastly.

[mustela]

Thanks @0101adm! Wondering if you changed anything in your index.html too? Because its not working for me.

This is the cdnizer.js file

'use strict';

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');

var $ = require('gulp-load-plugins')();

gulp.task('cdnizer',function(){
  return gulp.src('dist/index.html')
      .pipe($.cdnizer({
        allowRev: true,
        allowMin:true,
        relativeRoot:'bower_components',
        fallbackTest:'<script>(function(){try{var lib="${ filepath }".split("../")[1];if(typeof ${ test } === "undefined"){cdnizerLoad(lib);}}catch(err){cdnizerLoad(lib);}})();</script>',
        files: [
          {
            file:'bower_components/angular/angular.min.js',
            cdn:'//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js',
            test:'window.angular'
          }]
      }))
      .pipe(gulp.dest("dist"));
});

And the other tasks

gulp.task('other', function ()
{
    var fileFilter = $.filter(function (file)
    {
        return file.stat.isFile();
    });

    gulp.src('./bower_components/**/*.js')
      .pipe(gulp.dest('dist/bower_components'));

    return gulp.src([
            path.join(conf.paths.src, '/**/*'),
            path.join('!' + conf.paths.src, '/**/*.{html,css,js,scss}')
        ])
        .pipe(fileFilter)
        .pipe(gulp.dest(path.join(conf.paths.dist, '/')));
});

gulp.task('build', function(callback) {
    runSequence(['environment_config', 'html', 'fonts', 'other'], 'cdnizer',callback);
});

It runs but I can't see the cdn in the index file.

[17:25:59] Using gulpfile ~/Sites/nocnoc/web_app/gulpfile.js
[17:25:59] Starting 'build'...
[17:25:59] Starting 'environment_config'...
[17:25:59] Starting 'scripts'...
[17:26:00] Starting 'styles'...
[17:26:00] Starting 'partials'...
[17:26:00] Starting 'fonts'...
[17:26:00] Starting 'other'...
[17:26:01] Finished 'environment_config' after 1.63 s
[17:26:01] gulp-inject 52 files into index.scss.
[17:26:05] Finished 'styles' after 5.23 s
[17:26:05] Finished 'fonts' after 5.11 s
[17:26:07] all files 276.75 kB
[17:26:07] Finished 'scripts' after 7.2 s
[17:26:07] Starting 'inject'...
[17:26:07] gulp-inject 1 files into index.html.
[17:26:07] gulp-inject 144 files into index.html.
[17:26:07] Finished 'inject' after 380 ms
[17:26:07] Finished 'partials' after 7.15 s
[17:26:07] Starting 'html'...
[17:26:08] gulp-inject 1 files into index.html.
[17:26:11] dist/ maps/styles/app-09c2b8d009.css.map 3.48 MB
[17:26:11] dist/ maps/styles/vendor-ce4c16be7c.css.map 41.24 kB
[17:26:31] dist/ maps/scripts/vendor-33ead11c85.js.map 7.93 MB
[17:26:32] dist/ maps/scripts/app-f69ef64cf2.js.map 529.16 kB
[17:26:32] dist/ styles/app-09c2b8d009.css 684.94 kB
[17:26:32] dist/ styles/vendor-ce4c16be7c.css 25.79 kB
[17:26:32] dist/ scripts/vendor-33ead11c85.js 1.61 MB
[17:26:32] dist/ scripts/app-f69ef64cf2.js 231.2 kB
[17:26:32] dist/ index.html 13.1 kB
[17:26:32] dist/ all files 14.54 MB
[17:26:32] Finished 'html' after 25 s
[17:26:32] Finished 'other' after 32 s
[17:26:32] Starting 'cdnizer'...
[17:26:32] Finished 'cdnizer' after 48 ms
[17:26:32] Finished 'build' after 33 s

Any clue?

Thanks!!!

[0101adm]

youre right.

here is a blank copy.

<!doctype html>

<html ng-app="appName">
    <head>
        <title>app name</title>

        <meta charset="utf-8">

        <!-- build:css({.tmp/serve,src}) styles/vendor.css -->
        <!-- bower:css -->
        <!-- run `gulp inject` to automatically populate bower styles dependencies -->
        <!-- endbower -->

        <!-- endbuild -->

        <!-- build:css({.tmp/serve,src}) styles/app.css -->
        <!-- inject:css -->
        <!-- css files will be automatically insert here -->
        <!-- endinject -->
        <!-- endbuild -->
    </head>

    <body>
        <!-- bower:js -->
        <!-- run `gulp inject` to automatically populate bower script dependencies -->
        <!-- endbower -->

        <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
        <!-- inject:js -->
        <!-- js files will be automatically insert here -->
        <!-- endinject -->

        <!-- inject:partials -->
        <!-- angular templates will be automatically converted in js and inserted here -->
        <!-- endinject -->
        <!-- endbuild -->
    </body>
</html>

[mustela]

mmm @0101adm is that the file you are using? because its not working.

The one I have is:

        <!-- build:js(src) scripts/vendor.js -->
        <!-- bower:js -->
        <!-- run `gulp inject` to automatically populate bower script dependencies -->
        <!-- endbower -->
        <!-- endbuild -->

        <!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
        <!-- inject:js -->
        <!-- js files will be automatically insert here -->
        <!-- endinject -->

        <!-- inject:partials -->
        <!-- angular templates will be automatically converted in js and inserted here -->
        <!-- endinject -->
        <!-- endbuild -->

The only different I have is: <!-- build:js(src) scripts/vendor.js --> if I remove that, all the bower components are placed, but not using the cdn.

[0101adm]

ill need more info / debug.

[mustela]

Ok, not sure what else do you need, so would you mind to tell me? And I'll give it to you.

Thanks!

[0101adm]

why isnt it working.

[clement-escolano]

I am very interested in this feature and would love to see it in vanilla generator. Working on a solution to make the cdnizer work right now, will make a PR if successful :)

[fuchao2012]

@zckrs @clement-escolano any new on this issue?

[clement-escolano]

@fuchao2012 No sorry I didn't manage to make it work and it was not a big issue for the project so I gave up. Still interested though.

[clement-escolano]

@joaocc May you close the issue as it will not be fixed (unmaintained project) ? Thanks !