klei / grunt-injector Goto Github PK

Hey, I'm trying to inject certain assets selectively, and this is what I've come up with;

Grunt configuration

    injector: {
        options: {
            template: '<%= project.app %>/index.html',
            destFile: '<%= injector.options.template %>',
            addRootSlash: false,
            ignorePath: ['<%= project.app %>', '<%= project.tmp %>']
        },

        defaults: {
            src: ['<%= project.tmp %>/styles/**/*.css']
        },

        ngControllers: {
            options: {
                starttag: '<!-- injector:js:ng:controllers -->'
            },
            src: ['<%= project.scripts %>/controllers/**/*.js']
        },

        ngModalControllers: {
            options: {
                starttag: '<!-- injector:js:ng:modal-controllers -->'
            },
            src: ['<%= project.scripts %>/modals/**/*.js']
        },

        ngDirectives: {
            options: {
                starttag: '<!-- injector:js:ng:directives -->'
            },
            src: ['<%= project.scripts %>/directives/**/*.js']
        },

        ngServices: {
            options: {
                starttag: '<!-- injector:js:ng:services -->'
            },
            src: ['<%= project.scripts %>/services/**/*.js']
        },

        ngFilters: {
            options: {
                starttag: '<!-- injector:js:ng:filters -->'
            },
            src: ['<%= project.scripts %>/filters/**/*.js']
        }
    }

index.html

    <!-- injector:js:ng:controllers -->
    <!-- endinjector -->

    <!-- injector:js:ng:modal-controllers -->
    <!-- endinjector -->

    <!-- injector:js:ng:directives -->
    <!-- endinjector -->

    <!-- injector:js:ng:services -->
    <!-- endinjector -->

    <!-- injector:js:ng:filters -->
    <!-- endinjector -->

I think it's pretty clear as to what I want to achieve from looking at index.html.

I feel like there has to be a better way of achieving this (e.g. a smaller Grunt configuration).

The verison of the lodash dependency in package.json should be updated to fix the following vunerability:

lodash <=4.17.20 Severity: high Prototype Pollution - https://npmjs.com/advisories/1065 Prototype Pollution - https://npmjs.com/advisories/1523 Command Injection - https://npmjs.com/advisories/1673 Prototype Pollution - https://npmjs.com/advisories/577 Prototype Pollution - https://npmjs.com/advisories/782

What changed between 0.6.1 and 1.0.0?

v0.6.1 OUTPUT
Running "injector:bower" (injector) task
Missing option template, using dest as template instead
Injecting js files (1 files)
Nothing changed

v1.0.0 OUTPUT
Running "injector:bower" (injector) task
Missing option template, using dest as template instead
Warning: Unable to read "undefined" file (Error code: ENOENT). Use --force to continue.

injector: {
      bower: {
        options: {
          template: null,
          starttag: '<!-- injector:bower:{{ext}} -->',
          endtag: '<!-- endinjector -->',
          ignorePath: 'public'
        },
        files: {
          './views/footer.ejs': ['<%= project.dest.folder %>/bundle.min.js']
        }
      }, ... 
}

project: {
      client: 'public',
      dest: {
        folder: '<%= project.client %>/dist'
      }
}

Because of behavior destFile option, destination path prefix can not be set anymore
for ex. I have app.js file under path:
/client/app/app.js
but I want to inject it under:
/public/app/app.js

Right now there is ignorePath option with one is equivalent to cwd but I would like to see something like prefixPath as well

options: {
    min: true,
    destFile : 'client/index.jade',
    ignorePath: 'client/',
    prefixPath: 'public/'
},
files: {
    cwd: 'client/',
    src: [
    'app/app.js'
    ]
}

P.S.
I would appreciate example in documentation how to properly use dynamically file building, because is not obvious

HELP WANTED!

I don't have enough time to maintain this plugin as I would want to, so I'm looking for people who want to help out and be contributors/repository admins.

Interested?

Contact me! See package.json for contact information.

Hi,

I wonder if it is possible to inject file paths relative to the destination file. Right now grunt-injector injects file paths relative to the gruntfile.js and there seems to be no option to control that. Except for the transform method. The problem with the transform method is that if I define it, then I'll also have to re-define how file path translates to the <script> or <link> reference. So it would be handy if there was a way to just tell grunt-injector to build paths relative to the destination file, or at least set the current working directory.

I also tried the dynamically built file objects with cwd option. The behavior has changed ('frontend/app.js' instead of './frontend/app.js') but still doesn't produce file paths relative to the cwd:

        injector: {
            js: {
                files: [{
                    expand: true,
                    cwd: 'frontend',
                    src: [
                        '**/*.js'
                    ]
                }],
                options: {
                    destFile: 'frontend/index.html'
                }
            }
        }

Please let me know if I'm missing something and I can build file references relative to the destination file. If not then I could suggest a pull request but need recommendation on how to do it:

• extend 'relative' option to accept sting with cwd path
• new boolean 'relativeToDestFile' or 'destFileRelative' option
• new 'cwd' option
• respect cwd option in dynamically built file objects (if feasible)

Thanks,
Stas

I've been using injector for quite a bit now and appreciate the gap its filled in my grunt workflow.

I think there is some flexibility that could be added. My main scenario is... I have a multi page application. I have a bunch of common javascript, then I have page specific javascript. Right now, each page injects all of the javascript into the same injector block. I wrap that injector block with a usemin build:js block. It creates one JS file and I'm good to go.

I'd like to be able to have two different files served up, one global js file, and one page specific file. Usemin allows me to specify as many build blocks as I want. It would be great if I could do that with injector as well. Something like:

<!-- build:js index.js -->
<!-- injector:js index -->
<!-- endinjector -->
<!-- endbuild -->

<!-- build:js global.js -->
<!-- injector:js global -->
<!-- endinjector -->
<!-- endbuild -->

Thoughts?

I like to know if the ignorePath is to remove certain file. The ignorePath option not working for that because It generate a script tag empty. Maybe It remove a path in the script tag, but not the tag.

Hi, I wonder if there is some way of passing options like "exclude" to wiredep when injecting bower.json dependencies.

Thanks!

I get the following error Unable to read "src" file (Error code: EISDIR) with the following config:

target: {
       options: {
           relative: false,
           template: '<%= settings.target %>/<%= settings.app %>/index.html',
           destFile: '<%= settings.target %>/<%= settings.app %>/index.html',
        },
        files: {
                src : [
                    '<%= settings.app %>/modules/app.module.js'
                ]
            }
        }
}

There is a non handle case when trying to define lineEnding from destination file.
If options.destFile is defined, it gets overriden every time by src .
Error is in getDefaultLineEnding().

Hi, this plugin works really well with grunt, but I am not using grunt for one project and would like to have this plugin.

Could you break the code down for having a nodejs module standalone?

If it is too much, I will do it myself borrowing some code from yours if that is ok.

Thank you

The following warning message is displayed on npm install:

[email protected]: graceful-fs version 3 and before will fail on newer node releases. Please update to graceful-fs@^4.0.0 as soon as possible

I have a bower.json file that looks like this:

{
  "name": "project",
  "version": "0.0.0",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "~1.2.13",
    "angular-cardflow": "~0.3.2",
    "strapless": "~3.1.1",
    "angular-smoothscroll": "*",
    "angular-bootstrap": "~0.10.0",
    "prefixfree": "konsumer/prefixfree#~1.0.9"
  },
  "resolutions": {
    "angular": "~1.2.13"
  }
}

a .bowerrc file that looks like this:

{
  "directory": "app/bower_components"
}

My Gruntfile.js looks like this:

module.exports = function(grunt) {
    var wiredep=require('wiredep');
    var fs = require('fs');

    grunt.initConfig({
        'pkg': grunt.file.readJSON('package.json'),

        'cfg': {
            'dist': 'dist',
            'app': 'app',
            'tmp': '.grunt'
        },

        'clean': {
            'prod': { 
                'src': ['<%= cfg.tmp %>', '<%= cfg.dist %>'] 
            }
        },

        injector: {
            options: {
                addRootSlash:false,
                ignorePath:'app'
            },
            bower_dependencies: {
                files: {
                    '<%= cfg.app %>/index.html': ['bower.json'],
                }
            }
        }
    });
    require('load-grunt-tasks')(grunt);
    grunt.registerTask('default', ['clean:prod', 'injector']);
}

I do bower install and everything ends up in "app/bower_components".

When I run grunt it spits out this:

Running "clean:prod" (clean) task

Running "injector:bower_dependencies" (injector) task
Missing option `template`, using `dest` as template instead
Warning: Cannot read property 'main' of undefined Use --force to continue.

Aborted due to warnings.

endinjector comments of this form don't match correctly:

<!--endinjector -->

Note the lack of separating whitespace between <!-- and endinjector.

Is there the possibility to inject external js e.g. from http url?

Hello there, I have been reading through your documentation and am very impressed by this grunt plugin. I researched grunt-wiredep also but found that it seemed to lack the power to inject multiple files from the bower package. This was a problem for me as many of my packages have multiple files that are necessary for production. So when I stumbled upon this package I was really hoping that it would be the package to solve my problems. The strange thing I found was that this plugin as far as I am aware depends upon and uses wiredep but doesn't seem to support .jade and .scss injections. I would happily contribute to this project but I lack a place to start. I would appreciate if someone could help get me started or point out an already existing solution.

Thanks in advance,
Mooror

I have three cases to inject into index.html:

injector: {
      // in a dev environment, inject the right CSS and JS; also inject a live-reload server
      // in production, inject the right CSS and JS and do not inject the live-reload server
      dev: {
        options: {
          relative: true,
        },
        files: {
          'src/client/index.html': [
            'src/client/assets/scripts/app.js',
            'src/client/assets/styles/*.css',
          ]
        }
      },
      livereload: {
        options: {
          prefix: 'http://localhost:35729',
          ignorePath: 'node_modules/livereload-js/dist/',
          starttag: '<!-- injector:js:livereload -->'
        },
        files: {
          'src/client/index.html': [
            'node_modules/livereload-js/dist/livereload.js'
          ]
        }
      },
      dist: {
        files: {
          'src/client/index.html': [
            'dist/*.min.js',
            'dist/*.min.css'
          ]
        }
      }
    },

My index.html file looks like this:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>title</title>
  <!-- injector:css -->
  <!-- endinjector -->
  <!-- injector:js -->
  <!-- endinjector -->
  <!-- injector:js:livereload -->
  <!-- endinjector -->
</head>

How can I configure the livereload target to inject iff the dev target is injected?

I originally tried adding the livereload.js like this:

injector: {
      // in a dev environment, inject the right CSS and JS; also inject a live-reload server
      // in production, inject the right CSS and JS and do not inject the live-reload server
      dev: {
        files: {
          'src/client/index.html': [
            'src/client/assets/scripts/app.js',
            'src/client/assets/styles/*.css',
            'http://localhost:35729/livereload.js',
          ]
        }
      },

but livereload.js wasn't being injected. Hence, the three cases.

By using injection through 'bower.json' the result html will obtain invalid paths to dependencies as injector doesn't cover a case when html is not located in 'bower_components' parent directory

You should avoid using harcoded \n as line ending because it is not replaced by a CRLF on Windows and it currently causes a bug with Grunt Usemin.

I submitted a pull request.

It is not clear to me how to output relative file paths instead of absolute ones. I have disabled the root slash and ignored the top level app dir but that just outputs the stripped paths rather than the relative ones with '../' to the upper dirs. What would be the best approach here?

The master branch (version 1.1.1) has updated lodash to address security vulnerabilities. Would you please create a tag for this?

I would like to specify a folder to look for any .html file and inject into that properly. Is this possible? The only way I can make grunt-injector work properly right now is to specific exact file name i.e. file/path/index.html file/path/*.html isn't working for me, and the README documentation only provides examples for index.html files.

When I run the unit tests on windows I get the following error:

>> injector - customSort
>> Message: should inject files ordered with a custom sorting function.
>> Error: '\r\nvar files = [\r\n/** tagstart /\n  {ext: \'html\', file: \'/component.html\'},\n  {ext: \'js\', file: \'/script.js\'},\n  {ext: \'css\', file: \'/style.css\'},\n/* tagend /\r
\n];\r\n' == '\r\nvar files = [\r\n/* tagstart /\r\n  {ext: \'html\', file: \'/component.html\'},\r\n  {ext: \'js\', file: \'/script.js\'},\r\n  {ext: \'css\', file: \'/style.css\'},\r\n/*
tagend */\r\n];\r\n'
>> at Object.exports.injector.customSort (test\injector_test.js:179:10)
>> at Object.exports.injector.setUp (test\injector_test.js:28:5)

The issue appears to be all the baseline files were created where the lineEnding is set to '\n'. This should default to grunt.util.linefeed to persist OS settings for linefeed and allow the unit tests to pass on Windows.

I am having following order in my gruntFile.js:

  bower_dependencies: {
   files: {
     'index.html': ['bower.json'],
   }
 },
  local_dependencies: {
    files: {
      'index.html': ['build/**/*.min.js', 'css/**/*.css'],
    }
  }

Whatever comes first will be override by the next one. In this case my bower_dependencies in index.html will be replaced by main.css which is caught by local_dependencies.

Any Idea?

Hi guys, with this config

injector: {
  options: {
    relative: true
  }
}

It should set addRootSlash to !options.relative so, addRootSlash in this case should be false but it still compiling with absolute paths. ref https://github.com/klei/grunt-injector/blob/master/tasks/injector.js#L30

So the only way to use relative paths, is to explicitly set addRootSlash to false

injector: {
  options: {
    addRootSlash: false
  }
},

npm version out put

{ npm: '2.9.0',
  http_parser: '2.3',
  modules: '14',
  node: '0.12.2',
  openssl: '1.0.1m',
  uv: '1.4.2-node1',
  v8: '3.28.73',
  zlib: '1.2.8' }

My task is :

 injector: {
            options: {
                template:'app/index.html',
                min:true,
                ignorePath:'app/'
            },
            defaults: {
                files: {
                    'app/index.html': ['app/css/bootstrap.min.css']
                }
            }

    }

After I run command grunt injector, I got next result in my html file:

 <!-- injector:css -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- endinjector -->

How I can remove " / " before css/bootstrap.min.css.

        injector: {
            options: {
            destFile : 'app/static/index.html',
            addRootSlash: false,
            ignorePath: 'app/static'
            }, 
                files: {
                    expand: true,
                    cwd: 'app/static/css',
                    src: ['*.css'],
                    dest: '../',
                    ext: '.css'
                    }
        }, 

There will be a root slash prefix when there should not be

Is it possible to inject the contents of a file, and not just the reference? I have a JSON file that I would to inject. The json is build by grunt-tree when I run my grunt file.

Add a travis badge to notify user about the current build status.