Skip to content

Grunt task for inserting script tags based on a folder path or file pattern

License

Notifications You must be signed in to change notification settings

christianrondeau/grunt-unfold

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

grunt-unfold

Inserts script tags based on a folder path or file pattern

Build Status

Getting Started

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-unfold --save-dev

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

grunt.loadNpmTasks('grunt-unfold');

The "unfold" task

Overview

Run this task with the grunt unfold command.

This will detect <!-- unfold:TYPE PATH --> ... <!-- /unfold --> blocks in your html files and rebuild the list of script tags from the matching files.

  • PATH is a globbing pattern, such as *.js, scripts/**/*.js etc.
  • TYPE defines the tag template to insert;
    • js inserts a <script src="foo.js"></script>
    • css inserts a <link rel="stylesheet" href="foo.cs" />
    • img inserts a <img src="foo.png" />

Options

templates

You can define a custom template for existing and custom types. You need to define the $PATH$ variable in the template where you want the source path to be inserted.

grunt.initConfig({
  unfold: {
    options: {
      templates: {
        'async-js': {
		  template: '<script src="$PATH$" type="text/javascript" async></script>'
		}
      }
    },
    files: {
      src: 'index.html'
    }
  },
})

Usage Example

In "Gruntfile.js", to overwrite the file

grunt.initConfig({
  unfold: {
    files: {
      src: 'index.html'
	}
  },
})

In "Gruntfile.js", to write to another file

Keep in mind that you can also provide a globbing pattern as the source and a folder as the destination.

grunt.initConfig({
  unfold: {
    files: {
      src: 'src/index.html',
	  dest: 'dist/index.html'
	}
  },
})

In "index.html"

<html>
  <head>
    <!-- unfold:css {style,css}/*.css -->
	This will be overwritten by all css files in style/*.css and css/*.css
	<!-- /unfold -->
  </head>
  <body>
    <!-- unfold:js scripts/**/*.js -->
	This will be overwritten by all .js files in scripts/ and its subfolders
	<!-- /unfold -->
  </body>
</html>

License

Copyright (c) 2014 Christian Rondeau. Licensed under the MIT license.

Thanks

Thanks to Scott Laursen for grunt-scriptlinker, from which this project was greatly inspired.

About

Grunt task for inserting script tags based on a folder path or file pattern

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published