grunt-include-source
Advanced tools
Include your sources into your HTML files automatically. Also supports including Bower components that expose their source files via the sources property in the
bower.jsonfile.
This plugin requires Grunt ~0.4.1
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-include-source --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-include-source');
In your project's Gruntfile, add a section named includeSource to the data object passed into grunt.initConfig().
grunt.initConfig({
includeSource: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
})
Type: String
Default value: ''
The base path to use when expanding files.
Type: String
Default value: ''
The base URL to use for included files in the final result.
For example, setting baseUrl to public/ will result in files being included from public/path/to/your/file.
Type: Object
The templates for sources included in html, scss, less files. Definition of single template overrides its default equivalent only.
Example:
includeSource: {
options: {
basePath: 'app',
baseUrl: 'public/',
template: {
html: {
js: '<script src="{filePath}"></script>',
css: '<link rel="stylesheet" type="text/css" th:href="@{{filePath}}}" />',
},
scss: {
scss: '@import "{filePath}";',
css: '@import "{filePath}";',
},
less: {
less: '@import "{filePath}";',
css: '@import "{filePath}";',
}
}
},
myTarget: {
files: {
'dist/index.html': 'app/index.tpl.html'
}
}
}
As it was mentioned above, it is possible to override only necessary templates.
Example (using Thymeleaf template engine):
includeSource: {
options: {
basePath: 'app',
baseUrl: 'public/',
template: {
html: {
js: '<script type="text/javascript" th:src="@{{filePath}}}"></script>'
// or css: '<link rel="stylesheet" type="text/css" th:href="@{{filePath}}}" />'
}
}
},
myTarget: {
files: {
'dist/index.html': 'app/index.tpl.html'
}
}
}
Currently supported: html, scss and less
<!-- include: options_go_here_as_json -->
// include: options_go_here_as_json
The type of files that are being included.
Currently supported: html, css, scss, less
Include files of the specified Bower component. The component should have a bower.json meta data with a property called sources.
This property should contain the files grouped by type, which are passed through the grunt.file.expand method.
Example:
{
"name": "package.name",
...
"sources": {
"js": [
"src/scripts/**/*.js",
"lib/compiled-templates.js"
],
"css": "src/styles/**/*.css"
}
}
Include the given files. Files are passed through the grunt.file.expand method.
Set to override the basePath set in the options.
Set to override the baseUrl set in the options.
Configure your task like this:
grunt.initConfig({
includeSource: {
options: {
basePath: 'app',
baseUrl: 'public/'
},
myTarget: {
files: {
'dist/index.html': 'app/index.tpl.html'
}
}
}
})
The file index.tpl.html could contain, for example:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Index</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!--
Automatically include Bower components. Use the "sources" object in your bower.json
to specify which source files are which.
-->
<!-- include: "type": "css", "bower": "yourComponent" -->
<!--
Include CSS files from a "tmp" directory, put there by another task.
This shows how to override the default "basePath" set in the options.
-->
<!-- include: "type": "css", "basePath": "tmp", "files": "styles/**/*.css" -->
</head>
<body>
<!-- include: "type": "js", "bower": "yourComponent" -->
<!-- include: "type": "js", "files": "scripts/**/*.js" -->
</body>
</html>
And the resulting file index.html will look something like:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Index</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!--
Automatically include Bower components. Use the "sources" object in your bower.json
to specify which source files are which.
-->
<!-- include: "type": "css", "bower": "yourComponent" -->
<!--
Include CSS files from a "tmp" directory, put there by another task.
This shows how to override the default "basePath" set in the options.
-->
<link href="public/styles/main.css" rel="stylesheet" type="text/css" />
<link href="public/styles/anotherFile.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="public/bower_components/yourComponent/main.js"></script>
<script src="public/scripts/app.js"></script>
<script src="public/scripts/anotherFile.js"></script>
<script src="public/scripts/controllers/evenMore.js"></script>
</body>
</html>
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.
(Nothing yet)
FAQs
Include your sources into your HTML files automatically.
The npm package grunt-include-source receives a total of 3,305 weekly downloads. As such, grunt-include-source popularity was classified as popular.
We found that grunt-include-source demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.
Security News
Socket CEO Feross Aboukhadijeh discusses the open web, open source security, and how Socket tackles software supply chain attacks on The Pair Program podcast.