Inserts script tags based on a folder path or file pattern
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-devOnce the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-unfold');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" />
- js inserts a
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'
}
},
})grunt.initConfig({
unfold: {
files: {
src: 'index.html'
}
},
})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'
}
},
})<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>Copyright (c) 2014 Christian Rondeau. Licensed under the MIT license.
Thanks to Scott Laursen for grunt-scriptlinker, from which this project was greatly inspired.