grunt-angular-file-loader2

v2.0.1

Published

2 years ago

Automatically sort and inject AngularJS app files depending on module definitions and usage. Based on grunt-angular-file-loader.

Downloads

0High
0Medium
0Low

noxi89

gruntplugin angular angularjs filesort inject injection

grunt-angular-file-loader2

Automatically sort and inject AngularJS app files depending on module definitions and usage based on grunt-angular-file-loader which seems no longer to be updated

Getting Started

This plugin requires Grunt ~0.4.5

It is based on gulp-angular-filesort and wiredep

It will sort and inject javascript angular files into files that you need (HTML and Jade are currently supported) if some javascript files are not for angular they will be added at the end of the files list.

/!\ Jade is recognised by the plugin but the injection don't handle right indent. HTML is preferred for inject

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-angular-file-loader --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-angular-file-loader');

The "angularFileLoader" task

Overview

In your project's Gruntfile, add a section named angularFileLoader to the data object passed into grunt.initConfig().

grunt.initConfig({
  angularFileLoader: {
    options: {
      scripts: ['*.js']
    },
    your_target: {
      src: ['index.html']
    },
  },
});

Before running task

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <!-- angular -->
    <!-- endangular -->
  </body>
</html>

doctype 
html(lang='en')
  head
    meta(charset='UTF-8')
    title Document
  body
    // angular
    // endangular

After task run

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <!-- angular -->
    <script src="app.js" type="text/javascript"></script>
    <script src="module.js" type="text/javascript"></script>
    <script src="module-controller.js" type="text/javascript"></script>
    <script src="..." type="text/javascript"></script>
    <!-- endangular -->
  </body>
</html>

doctype 
html(lang='en')
  head
    meta(charset='UTF-8')
    title Document
  body
    // angular
    script(src='app.js', type='text/javascript')
    script(src='module.js', type='text/javascript')
    script(src='module-controller.js', type='text/javascript')
    script(src='...', type='text/javascript')
    // endangular

Options

options.startTag

Type: String

Default value: 'angular'

Tag used to identify the block's beginning where files had to be injected.

options.endTag

Type: String

Default value: 'endangular'

Tag used to identify the block's ending where files had to be injected.

options.scripts

Type: String | Array | Object

Default value: 'null'

Script Files to inject into html/jade file.

options.relative

Type: Boolean | String

Default value: 'true'

When set to true path to script files will be rewritten to be relative to html/jade file. When set to false path to script files will be rewritten to be relative to Grunfile.js When set to a String path to script files will be rewritten to be relative to the specified file/directory

Usage Examples

For all examples below consider the following structure :

.
├───.tmp
│   └─── index.html
│
├─── app
│    └─── scripts
│         ├─── app
│         │    ├─── part1
│         │    │    ├─── part1.js
│         │    │    └─── part1.controller.js
│         │    ├─── part2
│         │    │    ├─── part2.js
│         │    │    └─── part2.controller.js
│         │    └─── part3
│         │         ├─── part3.js
│         │         └─── part3.controller.js
│         │
│         ├─── components
│         │    ├─── directive
│         │    │    ├─── directive1.js
│         │    │    └─── directive1.controller.js
│         │    ├─── service
│         │    │    └─── service.js
│         │    ├─── filter
│         │    │    └─── filter.js
│         │    └─── factory
│         │         └─── factory.js
│         │
│         └─── app.js
│     
└─── Gruntfile.js

Default Options

In this example, the default options are used, after ./app/scripts/**/*.js had been sorted they are injected into index.html between  and 

grunt.initConfig({
  angularFileLoader: {
    options: {
      scripts: ['app/scripts/**/*.js']
    },
    default_options: {
      src : '.tmp/index.html'
    },
  },
});

Before

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <!-- angular -->
    <!-- endangular -->
  </body>
</html>

After

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <!-- angular -->
    <script src="../app/scripts/app/app.js" type="text/javascript"></script>
    <script src="../app/scripts/components/factory/factory.js" type="text/javascript"></script>
    <script src="../app/scripts/components/filter/filter.js" type="text/javascript"></script>
    <script src="../app/scripts/components/directive/directive.js" type="text/javascript"></script>
    <script src="../app/scripts/components/directive/directive.controller.js" type="text/javascript"></script>
    <script src="../app/scripts/components/service/service.js" type="text/javascript"></script>
    <script src="../app/scripts/app/part1/part1.js" type="text/javascript"></script>
    <script src="../app/scripts/app/part1/part1.controller.js" type="text/javascript"></script>
    <script src="../app/scripts/app/part2/part2.js" type="text/javascript"></script>
    <script src="../app/scripts/app/part2/part2.controller.js" type="text/javascript"></script>
    <script src="../app/scripts/app/part3/part3.js" type="text/javascript"></script>
    <script src="../app/scripts/app/part3/part3.controller.js" type="text/javascript"></script>
    <!-- endangular -->
  </body>
</html>

relative : false

In this example, the relative options is set to false, after ./app/scripts/**/*.js had been sorted they are injected into index.html between  and 

grunt.initConfig({
  angularFileLoader: {
    options: {
      scripts: ['app/scripts/**/*.js']
      relative: false
    },
    default_options: {
      src : '.tmp/index.html'
    },
  },
});

Before

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <!-- angular -->
    <!-- endangular -->
  </body>
</html>

After

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <!-- angular -->
    <script src="app/scripts/app/app.js" type="text/javascript"></script>
    <script src="app/scripts/components/factory/factory.js" type="text/javascript"></script>
    <script src="app/scripts/components/filter/filter.js" type="text/javascript"></script>
    <script src="app/scripts/components/directive/directive.js" type="text/javascript"></script>
    <script src="app/scripts/components/directive/directive.controller.js" type="text/javascript"></script>
    <script src="app/scripts/components/service/service.js" type="text/javascript"></script>
    <script src="app/scripts/app/part1/part1.js" type="text/javascript"></script>
    <script src="app/scripts/app/part1/part1.controller.js" type="text/javascript"></script>
    <script src="app/scripts/app/part2/part2.js" type="text/javascript"></script>
    <script src="app/scripts/app/part2/part2.controller.js" type="text/javascript"></script>
    <script src="app/scripts/app/part3/part3.js" type="text/javascript"></script>
    <script src="app/scripts/app/part3/part3.controller.js" type="text/javascript"></script>
    <!-- endangular -->
  </body>
</html>

relative : false

In this example, the relative options is set to app directory, after ./app/scripts/**/*.js had been sorted they are injected into index.html between  and 

grunt.initConfig({
  angularFileLoader: {
    options: {
      scripts: ['app/scripts/**/*.js']
      relative: 'app'
    },
    default_options: {
      src : '.tmp/index.html'
    },
  },
});

Before

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <!-- angular -->
    <!-- endangular -->
  </body>
</html>

After

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <!-- angular -->
    <script src="scripts/app/app.js" type="text/javascript"></script>
    <script src="scripts/components/factory/factory.js" type="text/javascript"></script>
    <script src="scripts/components/filter/filter.js" type="text/javascript"></script>
    <script src="scripts/components/directive/directive.js" type="text/javascript"></script>
    <script src="scripts/components/directive/directive.controller.js" type="text/javascript"></script>
    <script src="scripts/components/service/service.js" type="text/javascript"></script>
    <script src="scripts/app/part1/part1.js" type="text/javascript"></script>
    <script src="scripts/app/part1/part1.controller.js" type="text/javascript"></script>
    <script src="scripts/app/part2/part2.js" type="text/javascript"></script>
    <script src="scripts/app/part2/part2.controller.js" type="text/javascript"></script>
    <script src="scripts/app/part3/part3.js" type="text/javascript"></script>
    <script src="scripts/app/part3/part3.controller.js" type="text/javascript"></script>
    <!-- endangular -->
  </body>
</html>

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Upcoming improvement

Handle indentation when injecting

Release History

1.0 First Release
1.1 Reformat Code + Add relative and scripts options
1.1.1 Correct relative path when injecting in multiple files
1.1.2 Convert task name to camelCase, relative options can now be a folder
1.1.3 Path error in windows solve, rewrite unit test
1.1.4 Minor correction
1.1.5 Correct error with relative : "String"
1.2.0 Improvements from pull Request
2.0.0 Fork with updated dependencies

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

grunt-angular-file-loader2

Getting Started

The "angularFileLoader" task

Overview

Options

options.startTag

options.endTag

options.scripts

options.relative

Usage Examples

Default Options

relative : false

relative : false

Contributing

Upcoming improvement

Release History