Skip to content
/ grunt-angular-file-loader2 Public
forked from AntoineMary/grunt-angular-file-loader

Automatically sort and inject AngularJS app files depending on module definitions and usage

License

MIT license
2 stars 8 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

noXi89/grunt-angular-file-loader2

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
tasks
tasks
 
 
test
test
 
 
.gitignore
.gitignore
 
 
.jshintrc
.jshintrc
 
 
.travis.yml
.travis.yml
 
 
Gruntfile.js
Gruntfile.js
 
 
LICENSE-MIT
LICENSE-MIT
 
 
README.md
README.md
 
 
package.json
package.json
 
 

Repository files navigation

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

License Version Build Status Dependency Status npm

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 <!-- angular --> and <!-- endangular -->

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 <!-- angular --> and <!-- endangular -->

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 <!-- angular --> and <!-- endangular -->

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

About

Automatically sort and inject AngularJS app files depending on module definitions and usage

Resources

Readme

License

MIT license
Activity

Stars

2 stars

Watchers

2 watching

Forks

2 forks
Report repository

Releases

6 tags

Packages

No packages published

Languages

  • HTML 74.9%
  • JavaScript 25.1%