diff --git a/Gruntfile.js b/Gruntfile.js index 9821836..69c5ba3 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -39,6 +39,18 @@ module.exports = function(grunt) { }, }, + inlinecontent: { + default_options: { + files: [ + { + src: 'examples/in.html', + css: ['examples/file.css'], + dest: 'examples/out.html', + }, + ], + }, + }, + // Unit tests. nodeunit: { tests: ['test/*_test.js'], @@ -56,7 +68,7 @@ module.exports = function(grunt) { // Whenever the "test" task is run, first clean the "tmp" dir, then run this // plugin's task(s), then test the result. - grunt.registerTask('test', ['clean', 'inlinecss', 'nodeunit']); + grunt.registerTask('test', ['clean', 'inlinecss', 'inlinecontent', 'nodeunit']); // By default, lint and run all tests. grunt.registerTask('default', ['jshint', 'test']); diff --git a/README.md b/README.md index 1ac3a6e..3680c74 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # grunt-inline-css -> Takes an html file with css link and turns inline. Great for emails. +> Takes an html file with css link or separate css files and turns inline. Great for emails. ## Getting Started This plugin requires Grunt `~0.4.0` @@ -38,5 +38,24 @@ grunt.initConfig({ You can see available options [here](https://github.com/LearnBoost/juice) +## The "inlinecontent" task + +### Overview +In your project's Gruntfile, add a section named `inlinecontent` to the data object passed into `grunt.initConfig()`. + +```js +grunt.initConfig({ + inlinecontent: { + main: { + { + src: 'examples/in.html', + css: ['examples/file.css'], + dest: 'examples/out.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](http://gruntjs.com/). diff --git a/package.json b/package.json index 2802814..aae79a5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "grunt-inline-css", - "description": "Takes an html file with css link and turns inline. Great for emails.", + "description": "Takes an html file with css link or separate css files and turns inline. Great for emails.", "version": "0.1.3", "homepage": "https://github.com/jgallen23/grunt-inline-css", "author": { diff --git a/tasks/inline_css.js b/tasks/inline_css.js index 68f78f7..9a70921 100644 --- a/tasks/inline_css.js +++ b/tasks/inline_css.js @@ -56,4 +56,64 @@ module.exports = function(grunt) { }); }); + grunt.registerMultiTask('inlinecontent', 'Takes an html file and css files and turns inline. Great for emails.', function() { + // There are no options for juice.inlinecontent + var done = this.async(); + var index = 0; + var count = this.files.length; + + // Iterate over all specified file groups. + this.files.forEach(function(f) { + + var htmlpath = f.src.toString(); + var csspath = ''; + var html = ''; + var css = ''; + var error = false; + + if (typeof htmlpath !== 'string') { + grunt.log.error('src must be a single string'); + return false; + } + + if (!grunt.file.exists(htmlpath) || !htmlpath) { + grunt.log.error('Source file "' + htmlpath + '" not found.'); + return false; + } + + html = grunt.file.read(htmlpath).toString(); + + // Iterate over all css files + f.css.forEach(function(c) { + csspath = c.toString(); + + if (typeof csspath !== 'string') { + grunt.log.error('src must be a single string'); + error = true; + return false; + } + + if (!grunt.file.exists(csspath) || !csspath) { + grunt.log.error('CSS file "' + csspath + '" not found.'); + error = true; + return false; + } + + css += grunt.file.read(csspath).toString(); + }); + + if (!error) { + grunt.file.write(f.dest, juice.inlineContent(html, css)); + grunt.log.writeln('File "' + f.dest + '" created.'); + } + + + index++; + if (index === count) { + done(); + } + + }); + }); + };