scott-laursen / grunt-scriptlinker Goto Github PK

Grunt plugin for autoinsertion of script tags in an html file

License: MIT License

JavaScript 94.95% HTML 5.05%

grunt-scriptlinker's Introduction

grunt-sails-linker

Autoinsert script tags (or other filebased tags) in an html file

Looking for the version of this package included in the default asset pipeline in Sails apps? See https://github.com/sailsjs/grunt-sails-linker

Getting Started

This plugin requires Grunt ~0.4.x

When the task is run the destination file(s) is updated with script tags pointing to all the source files. The reason this plugin was built was to automate the process of inserting script tags when building large web apps.

npm install grunt-sails-linker --save-dev

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

grunt.loadNpmTasks('grunt-sails-linker');

The "sails-linker" task

Overview

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

grunt.initConfig({
  'sails-linker': {
    defaultOptions: {
      options: {
        startTag: '<!--SCRIPTS-->',
        endTag: '<!--SCRIPTS END-->',
        fileTmpl: '<script src="%s"></script>',
        appRoot: 'app/'
      },
      files: {
        // Target-specific file lists and/or options go here.
        'app/index.html': ['app/scripts/**/*.js']
      },
    },
  },
})

Options

options.startTag

Type: String Default value: ''

Script tags are places between the startTag and endTag

options.endTag

Type: String Default value: ''

Script tags are places between the startTag and endTag

options.fileTmpl

Type: String Default value: '<script src="%s"></script>'

The template used to insert the reference to the script files.

options.appRoot

Type: String Default value: ''

The root of the application. Script links are relative from this folder.

options.relative

Type: Boolean Default value: false

Reference files using a relative url.

grunt-scriptlinker's People

Contributors

Stargazers

Watchers

Forkers

sailshq gbabiars ribot web5design cristiangrojas felina levelap evergage

grunt-scriptlinker's Issues

Feature: add/remove file with grunt watch

Instead of creating whole block we could setup grunt watch and listen to added or deleted event and add/remove script.

grunt.event.on('watch', function(action, filepath) {
  if(action == 'added'){
   //add script
  }
  if( action == 'deleted'){
   //remove script
  }
});

Add an option to strip out start/end tags from resulting file

I always kind of wanted this when I was inserting js/css files into my HTML file, but now that I'm trying to conditionalize our chrome extension's build, the file I'm trying to replace in is manifest.json. JSON doesn't allow for comments, so I need those start/end comment lines to be removed as well once the files get inserted. Since the resulting JSON file isn't valid, I can't JSON parse it (which my build does later on) and the chrome extension store won't accept it (I would have to manually remove the comment tags).

I have a pull request coming that has an option added. Feel free to give the option a better name or something.

appRoot doesn't work correctly if src files are under the appRoot

Here's my config:

    var javascriptLoadOrder = [
        'src/main/resources/vendor/**/*.js',
        'src/main/resources/app/js/Constants.js',
        'src/main/resources/app/js/Random.js',
        'src/main/resources/app/js/Vector.js',
        'src/main/resources/app/js/Resources.js',
        'src/main/resources/app/js/StatsData.js',
        'src/main/resources/**/*.js'
    ];

//...

        scriptlinker: {
            app: {
                options: {
                    startTag: '<!--SCRIPTS-->',
                    endTag: '<!--SCRIPTS END-->',
                    fileTmpl: '<script src="%s"></script>\n',
                    appRoot: 'src/main/generated'
                },
                src: javascriptLoadOrder,
                dest: 'src/main/generated/foo.html',
                cwd: '.',
                flatten: true

            }
        }

In the destination file, the javascript files have this path:

<script src="src/main/resources/vendor/js/jquery-2.0.2.min.js"></script>
<script src="src/main/resources/vendor/js/jquery-ui.js"></script>
<script src="src/main/resources/vendor/js/jquery.hammer.min.js"></script>
<script src="src/main/resources/vendor/js/lodash.min.js"></script>
<script src="src/main/resources/app/js/Constants.js"></script>
<script src="src/main/resources/app/js/Random.js"></script>

This is correct relative to the gruntfile, but that's not what I asked for. It seems to have ignored what I set appRoot to. Instead, they should look like this:

<script src="../resources/vendor/js/jquery-2.0.2.min.js" type="text/javascript"></script>
...

Or , maybe I'm just misunderstanding how to use the tool.