grunt-combo-html-css-js

Combine css links and javscript files to html file with inline tags automatically

Getting Started

This plugin requires Grunt ~0.4.5

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-combo-html-css-js --save-dev

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

grunt.loadNpmTasks('grunt-combo-html-css-js');

The "comboall" task

Overview

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

grunt.initConfig({
  comboall: {
    options: {
      // Task-specific options go here.
    },
    your_target: {
      // Target-specific file lists and/or options go here.
    },
  },
});

Usage Examples

In this example, src/target.html is the source file which may has some <link> or <script> tags to use css / javascript file. And dest/combo.html is the will-built file which join all relative css / javascript files and the own html together.

Note: The absolute css or javascript link will not be joined, but still use the external way. And if the <link> or <script> has an ignore attribute it will be skipped (v0.1.2+).

Source File src/target.html:

<html>
...
<link rel="stylesheet" href="http://example.com/style.css">
<link rel="stylesheet" href="style.css">
...
<script src="http://example.com/script.js"></script>
<script src="script.js"></script>
...
</html>

Grunt File Gruntfile.js:

grunt.initConfig({
  comboall: {
      main:{
        files: [
            {'dest/combo.html': ['src/target.html']}
        ]
    }
  }

});

Generated File dest/combo.html

<html>
...
<link rel="stylesheet" href="http://example.com/style.css">
<style>
/* file content from `src/style.css` */
</style>
...
<script src="http://example.com/script.js"></script>
<script>
/* file content from `src/script.js` */
</script>
...
</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.

Release History

(Nothing yet)