overzealous / cdnizer Goto Github PK

When installing cdnizer 2.0.0 (through another npm package, but that's not relevant), you get the following warning:

warning webpack-s3-plugin > cdnizer > [email protected]: Package no longer supported. Contact [email protected] for more info.

Also the security audit now includes two issues:

Here's the links to the advisories:

• https://nodesecurity.io/advisories/31
• https://nodesecurity.io/advisories/577

Hi @OverZealous!

Found that cdnizer doesn't process srcset attributes. I think it will be very useful feature.

Thx!

It would be cool if it was possible to use cdnizer from the command line, i.e.

cdnizer no-cdn.html > cdn.html

That way it could easily be integrated into non-js build systems.

I encountered this with a css link, but I presume the same would apply for matching other urls.

For readability I had the link spread over two lines.

        <link rel="stylesheet" type="text/css"
              href="/vendor/ng-grid/ng-grid.min.css"/>

Because the href and <link were not on the same line, it failed to match the url.

When I changed this to one line:

        <link rel="stylesheet" type="text/css" href="/vendor/ng-grid/ng-grid.min.css"/>

it did match the url.

I don't need to split the tag over two lines (it was needed before I used this plugin when I was hardcoding long CDN URLs). But, it's something that should probably be fixed or documented so that it doesn't catch other people out.

Hello,
Is there a way for cdnizer to not modify absolute urls? When I run cdnizer on a file that has below url, it removes one of the forward slash.

input
< link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

output
< link rel="stylesheet" href="/code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />

Thank you!

Input:

<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/lodash/lodash.js"></script>
<script src="/node_modules/backbone/backbone.js"></script>
<script src="/node_modules/handlebars/dist/handlebars.runtime.js"></script>

cdnizer call:

var cdnizer = require('gulp-cdnizer');

gulp.src('index.html')
    .pipe(cdnizer({ files: [{
        file: '**/jquery/**',
        package: 'jquery',
        cdn: 'https://cdnjs.cloudflare.com/ajax/libs/${package}/${version}/${filenameMin}' 
    }, {
        file: '**/lodash/**',
        package: 'lodash',
        cdn: 'https://cdn.jsdelivr.net/npm/${package}@${version}/${filenameMin}'
    }, {
        file: '**/backbone/**',
        package: 'backbone',
        cdn: 'https://cdnjs.cloudflare.com/ajax/libs/${package}/${version}/${filenameMin}'
    }, {
        file: '**/handlebars/**',
        package: 'handlebars',
        cdn: 'https://cdn.jsdelivr.net/npm/${package}@${version}/dist/handlebars.runtime.min.js'
    }]}))
    .pipe(gulp.dest('dist'));

Output (note the incoherent presence and absence of quotes):

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/backbone/1.3.3/backbone.min.js"></script>
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/handlebars.runtime.min.js></script>

Output after a second run:

<script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src=https://cdnjs.cloudflare.com/ajax/libs/backbone/1.3.3/backbone.min.js"></script>
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/handlebars.runtime.min.js></script>

My browser (Safari 11) attempts to load https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js%22, which fails with a 403 status, so the uneven quoting really breaks things.

Hi,

I have something like this in my app but it doesn't seems cdnizer replace path when I am using ng-src. Does cdnizer support ng-src? Thanks

<img ng-src="../../images/{{::employee.avatar}}" >

Since bower is recommends in his page migrating to " Yarn and Webpack or Parcel". You guys are looking forward to update the code to not try to find the bower_components folders anymore? Do you want any help on that?

hello there an thanks for the awesome lib ,
is there a way to replace a part from url like so:

  {
                file: '*googl.com/*',
                cdn: 'yahoo.com/'
            }

thanks in advance

dest file is being written to source but w/o any cdn links.

cdnizer 1.1.6
cdnjs-cdn-data 0.1.1

gulp .task('cdnizer',function(){
        gulp .src(".tmp/serve/*.html")
                .pipe($.cdnizer({
                    cdnDataLibraries:['cdnjs'],
                    bowerComponents:'bower_components',
                    files:[
                        'cdnjs:angular'
                    ]
                }))
                .pipe(gulp.dest("./dist"));
    });

source file

<!doctype html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8">
    <title>myapp</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <script src="../bower_components/angular/angular.js"></script>
  </head>
  <body>
    <div ui-view></div>
  </body>
</html>

dest file

<!doctype html>
<html ng-app="myapp">
  <head>
    <meta charset="utf-8">
    <title>myapp</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <script src="../bower_components/angular/angular.js"></script>
  </head>
  <body>
    <div ui-view></div>
  </body>
</html>

i have this manifest.json like this

<link rel="manifest" href="/assets/manifest.json">

after enable cdnizer, i got

<link rel="manifest" href="//mycdn.com/assets/manifest.json">

even though i already set files in cdnizer options to be like below: only css/js and images

{
              defaultCDNBase: '//mycdn.com',
              files: ['**/*.{css,js,svg,gif,png,jpg,jpeg}']
            },

Lodash versions lower than 4.17.12 are known to be vulnerable to prototypePollution. Further information can be seen in CVE-2019-10744.

Would it be possible to update the package.json to accomodate this patch?

I have been trying to get this to work with our project, but with no luck.

.tmp/serve/index.html

     <script src="../bower_components/angular/angular.js"></script>

cdnizer options

var cndizerOpts =
  {
    allowRev: false,
    allowMin: false,
    files: [
      'google:angular'
    ]
  };

folder structure

(root)
    packages.json
    bower.json
    .bowerrc
    gulpfile.js
    gulp
        cdnizer.js
    node_modules/
    bower_components/
    src/
        index.html    (not-injected)        
    .tmp/
        serve/
            index.html    (injected)

bower.json

{
  "dependencies": {
    "angular": "~1.4.5",

I added some console.log entries to try and troubleshoot the problem (./utils/findFileInfo()).
It seems that the parsing is done correctly but minimatch says they are not matching:

in lib/util.js:findFileInfo, minimatch is called with what seem to be the right parameters, but returns null/false.

    url ===>>  "../bower_components/angular/angular.js"
    fileInfo.file ===>> "**/angular.js"

I also tried adding {dot: true} to the call to minimatch, but it still fails.

Any hints?
Thx

It seems that cdnizer does not handle <link> tag. Is there a way to do it?

the cdnizer object init opts when its born;
but in some situation.the option may different.
so i think the main export function can add optional argument named opts.
when call the function.if opts coming in. the session opts can extend global opts.
if you agree with me.i can cook it :)

I'm having a strange behaviour trying to utilize this library and the package of angular-material. I have already tried in many ways but it keeps substituing the angular-material header to angularjs cdn.
Here's my gulp task:

.pipe(cdnizer({
          files: [
          'cdnjs:jquery',
          'google:angular:angular.min.js',
          'google:angular:angular-animate.min.js',
          'google:angular:angular-aria.min.js',
          'cdnjs:font-awesome',
          'cdnjs:angular-ui-router',
          'cdnjs:material-design-iconic-font',
          {
            file: 'bower_components/angular-material/angular-material.js',
            package: 'angular-material',
            cdn: 'cdnjs:angular-material'
          },
          {
            file: 'bower_components/store-js/store.min.js',
            package: 'store-js',
            cdn: 'cdnjs:store.js'
          }
        ]
      }))

and the result

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>if(!(window.jQuery)) cdnizerLoad("bower_components/jquery/dist/jquery.min.js");</script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script>if(!(window.angular)) cdnizerLoad("bower_components/angular/angular.min.js");</script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-animate.min.js"></script>
    <script>if(!(window.angular)) cdnizerLoad("bower_components/angular-animate/angular-animate.js");</script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-aria.min.js"></script>
    <script>if(!(window.angular)) cdnizerLoad("bower_components/angular-aria/angular-aria.js");</script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
    <script>if(!(window.angular)) cdnizerLoad("bower_components/angular-material/angular-material.js");</script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/store.js/1.3.17/store.min.js"></script>
    <script src="lib/ngDraggable/ngDraggable.js"></script>
    <script src="bower_components/angularjs-datepicker/dist/angular-datepicker.min.js"></script>
    <link rel="stylesheet" href="bower_components/angular-material/angular-material.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

I recently found this plugin and have been using it with gulp however I'm running into a lot of issues.
angular-sanitize and ngMessages both get completely ignored for options asides from initial recognition and the package is set to the angular.js package.

When using file manually as part of the object it seems to ignore the cdn option completely with the exception of js-data which it replaces completely with the content of cdn instead of the cdn url.

Cdnizer call

.pipe($.cdnizer({
  files: filePaths.CDNPossibilities
}))

Possibilities

CDNPossibilities: [
    {
      package: 'jquery',
      cdn: 'google:jquery'
    }, {
      package: 'angular',
      cdn: 'google:angular:angular.min.js'
    }, {
      package: 'angular-animate',
      cdn: 'google:angular:angular-animate.min.js'
    },{
      package: 'angular-cookies',
      cdn: 'google:angular:angular-cookies.min.js'
    }, {
      file: 'bower_components/angular-sanitize/**',
      package: 'angular-sanitize',
      cdn: 'google:angular:angular-sanitize.js'
    }, {
      file: 'bower_components/ng-messages/**',
      package: 'ng-messages',
      cdn: 'google:angular:angular-messages.js'
    }, {
      package: 'es5-shim',
      cdn: 'cdnjs:es5-shim'
    }, {
      package: 'json3',
      cdn: 'cdnjs:json3'
    }, {
      package: 'lodash',
      cdn: 'cdnjs:lodash.js'
    }, {
      package: 'angular-ui-router',
      cdn: 'cdnjs:angular-ui-router'
    }, {
      package: 'ng-tags-input',
      cdn: 'cdnjs:ng-tags-input'
    }, {
      file: '/bower_components/js-data/dist/js-data.js',
      package: 'js-data',
      cdn: 'cdnjs:js-data'
    }, {
      file: '/bower_components/js-data-angular/dist/js-data-angular.js',
      package: 'js-data-angular',
      cdn: 'cdnjs:js-data-angular'
    }, {
      file: 'bower_components/angular-ui-select/**',
      package: 'angular-ui-select',
      cdn: 'cdnjs:angular-ui-select'
    }, {
      file: 'bower_components/danialfarid-angular-file-upload/**',
      package: 'danialfarid-angular-file-upload',
      cdn: 'cdnjs:danialfarid-angular-file-upload'
    }, {
      file: 'bower_components/sweetalert/**',
      package: 'sweetalert',
      cdn: 'cdnjs:sweetalert'
    }, {
      file: 'bower_components/velocity/**',
      package: 'velocity',
      cdn: 'cdnjs:velocity'
    }, {
      file: 'bower_components/angular-bootstrap/**',
      package: 'angular-bootstrap',
      cdn: 'cdnjs:angular-ui-bootstrap'
    }, {
      file: 'bower_components/angular-ui-sortable/**',
      package: 'angular-ui-sortable',
      cdn: 'cdnjs:angular-ui-sortable'
    }
  ]

Resulting html file

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.6/es5-shim.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.8.0/lodash.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-cookies.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
    <script src="/bower_components/angular-ui-select/dist/select.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.3.0/ng-tags-input.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
    <script src="/bower_components/sweetalert/lib/sweet-alert.js"></script>
    <script src="/bower_components/velocity/velocity.js"></script>
    <script src="/bower_components/velocity/velocity.ui.js"></script>
    <script src="/bower_components/angular-ui-sortable/sortable.js"></script>
    <script src="cdnjs:js-data"></script>
    <script src="cdnjs:js-data-angular"></script>
    <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script src="/bower_components/danialfarid-angular-file-upload/dist/angular-file-upload-all.js"></script>

Some angular files are replaced with the wrong cdn files:

bower_components/angular-sanitize/angular-sanitize.js
bower_components/angular-messages/angular-messages.js
are being replaced with angular.min.js

when I use 'google:angular' in the options or 'jsdelivr:angularjs' the following files:

bower_components/angular-sanitize/angular-sanitize.js
bower_components/angular-messages/angular-messages.js
bower_components/angular-material/angular-material.js
will be replaced with angular.min.js

Hi,

In my .bower.json I have the following:

 "dependencies": {
  "angular": "1.5",
  "angular-resource": "1.5",
  "angular-sanitize": "1.5",
  "angular-route": "1.5"
}

In my index.html I have

  <script src="../bower_components/angular/angular.js"></script>
  <script src="../bower_components/angular-resource/angular-resource.js"></script>
  <script src="../bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="../bower_components/angular-route/angular-route.js"></script>

But after running cdnizer, I am left with the following:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script><script>if(!(window.angular)) cdnizerLoad("../bower_components/angular/angular.js");</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script><script>if(!(window.angular)) cdnizerLoad("../bower_components/angular-resource/angular-resource.js");</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script><script>if(!(window.angular)) cdnizerLoad("../bower_components/angular-sanitize/angular-sanitize.js");</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script><script>if(!(window.angular)) cdnizerLoad("../bower_components/angular-route/angular-route.js");</script>

In looking at the documentation it does not look like the resource, and sanitize packages are bundled, but here they are replaced with, and only checked with the larger angular.min script.

Furthermore, if they were bundled, having those three fallbacks seem redundant.

Is there a way that I can confirm if these packages should be bundled, and if they are not include the three script tags. Or, is this ideal for some reason?

File tree:

frontend/
    app/
    vendor/
        some/
            folder/
                my.css
                images/
                    image.png

My.css:

.some-class {
    background-image: url('./images/image.png');
}

Task:

gulp.task('vendor-css', [], function() {
    return gulp.src(config.vendor.css.src)
        .pipe(cdnizer({
            defaultCDNBase: config.cdn.defaultBase,
            files: ['**/*.{gif,png,jpg,jpeg,svg,ico}'],
            relativeRoot: 'frontend/'  // Also tried it with 'vendor/'
        }))
        .pipe(gulp.dest(config.vendor.buildDir))
});

Result:

.some-class {
    background-image: url('myCDN/frontend/images/image.png');
}

Expected result:

.some-class {
    background-image: url('myCDN/frontend/vendor/some/folder/images/image.png');
}

Reading the docs I would expect the path to be absolute after being cdnized, but perhaps the fault lies with me again. See anything wrong with my setup or is this really a bug?

PS. I was referred here by the maintainer of gulp-cdnizer.

Installing the package fails with error message

error Command failed.
Exit code: 128
Command: git
Arguments: ls-remote --tags --heads git://github.com/shahata/jsdelivr-cdn-data.git
Directory: /foo/bar/app
Output:
fatal: unable to connect to github.com:
github.com[0: 140.82.118.3]: errno=Operation timed out

There was an issue in the dependency package jsdelivr-cdn-data in which the package.json had incorrect format for the github url. This has been fixed with PR.

By looking at the package.json file of cdnizer, it seems to point directly to a specific commit of the dependency lib. To fix this issue, I would assume that changing the pointer to current HEAD of jsdelivr-cdn-data repo is enough.

Basically setting src or href indicates another domain, hence it's very unlikely to not be already CDNized if possible. My app is broken because I have links to CDN ready files and all of them have in common // in the beginning of the URL. I arrived to this through Gulp CDNizer and couldn't really use it because of this issue.

I'd like to add support for including both the relative file path AND the .min as I do not see a way to do this. currently. I know you mentioned you didn't expect to put out any new releases; I was hoping if I made the change and submitted a patch or a PR, you might be able to make an exception. :)

Thanks for the great library!

example:

background: url(../images/test.png) repeat;