Added support for verbose option that returns filenames of each inlined file alongside inlined html.

This commit is contained in:
Alexandre Gigliotti
2015-07-24 15:51:46 -07:00
parent dd4f03257c
commit 3cfd4f2b86
6 changed files with 73 additions and 37 deletions

View File

@@ -2,28 +2,42 @@ var _ = require('lodash');
var co = require('co');
var cheerio = require('cheerio');
var fs = require('mz/fs');
var inlineCss = require('./inline-css');
var inlineStyle = require('./inline-style');
var inlineImg = require('./inline-img');
var inlineLinkLess = require('./inline-link-less');
var inline = co.wrap(function * (filename, options) {
options = _.defaults(options || {}, {
less: {}
less: {},
verbose: false
});
var html = yield fs.readFile(filename, 'utf8');
var files = [filename];
// Inline links
html = yield inlineLinkLess(html, filename, options.less);
var lessResult = yield inlineLinkLess(html, filename, options.less);
html = lessResult.html;
files.push(lessResult.files);
// TODO inline links: css
// TODO inline scripts
// browserify js? => scriptify
// Inline paths -> datauris
html = inlineCss(html, filename);
html = inlineImg(html, filename);
var styleResult = inlineStyle(html, filename); // Inline styles
html = styleResult.html;
files.push(styleResult.files);
return html;
var imgResult = inlineImg(html, filename); // Inline images
html = imgResult.html;
files.push(imgResult.files);
var result = {
html: html,
files: _.unique(_.flatten(files, true))
};
return (options.verbose ? result : result.html);
});
module.exports = inline;

View File

@@ -4,18 +4,23 @@ var path = require('path');
var rework = require('rework');
var url = require('rework-plugin-url');
var inline = function (css, filePath) {
var basePath = path.dirname(filePath);
var inline = function (css, filename) {
var files = [];
var basePath = path.dirname(filename);
css = rework(css)
.use(url(function (url) {
if (isLocalPath(url)) {
url = path.resolve(basePath, url);
files.push(url);
url = datauri(url);
}
return url;
}))
.toString();
return css;
return {
css: css,
files: files
};
};
module.exports = inline;

View File

@@ -3,19 +3,24 @@ var datauri = require('datauri');
var isLocalPath = require('is-local-path');
var path = require('path');
var inline = function (html, filePath) {
var basedir = path.dirname(filePath);
var inline = function (html, filename) {
var files = [];
var basedir = path.dirname(filename);
var $ = cheerio.load(html, {decodeEntities: false});
var images = $('img').filter(function (index, element) {
return isLocalPath($(element).attr('src'));
});
images.each(function (index, element) {
var src = $(element).attr('src');
var filePath = path.resolve(basedir, src);
src = datauri(filePath);
var filename = path.resolve(basedir, src);
files.push(filename);
src = datauri(filename);
$(element).attr('src', src);
});
return $.html();
return {
html: $.html(),
files: files
};
};
module.exports = inline;

View File

@@ -7,13 +7,12 @@ var less = require('less');
var path = require('path');
var url = require('url');
var render = co.wrap(function * (filepath, options) {
var render = co.wrap(function * (filename, options) {
options = _.assign(options || {}, {
filename: filepath
filename: filename
});
var contents = yield fs.readFile(filepath, 'utf8');
var output = yield less.render(contents, options);
return output.css;
var contents = yield fs.readFile(filename, 'utf8');
return yield less.render(contents, options);
});
/**
* @params html
@@ -21,8 +20,9 @@ var render = co.wrap(function * (filepath, options) {
* @params options
* LESS compiler options
*/
var inline = co.wrap(function * (html, filepath, options) {
var basedir = path.dirname(filepath);
var inline = co.wrap(function * (html, filename, options) {
var files = [];
var basedir = path.dirname(filename);
options = _.defaults(options || {}, {
relativeUrls: true
});
@@ -36,23 +36,29 @@ var inline = co.wrap(function * (html, filepath, options) {
});
// render stylesheets
var contents = [];
var outputs = [];
links.each(function (index, element) {
var href = $(element).attr('href');
var filepath = path.resolve(basedir, href);
contents.push(render(filepath, options));
var filename = path.resolve(basedir, href);
files.push(filename);
outputs.push(render(filename, options));
});
contents = yield contents;
// TODO for each content: convert css url path -> datauri
// can use inline-css-url
outputs = yield outputs;
// replace links
links.each(function (index, element) {
var style = $('<style>').html(contents[index]);
var style = $('<style>').html(outputs[index].css);
$(element).replaceWith(style);
});
return $.html();
// create list of imported files from all outputs, unique listing
files.push(_.map(outputs, function (output) {
return output.imports;
}));
return {
html: $.html(),
files: files
};
});
module.exports = inline;

View File

@@ -11,15 +11,17 @@ var unwrap = function (value) {
var regexp = new RegExp('^' + prefix + '\\s*(.*)\\s+' + suffix + '$');
return value.replace(regexp, '$1');
};
var inline = function (html, filePath) {
var inline = function (html, filename) {
var files = [];
var $ = cheerio.load(html, {decodeEntities: false});
// style elements
var styles = $('style');
styles.each(function (index, element) {
var css = $(element).html();
css = inlineUrl(css, filePath);
$(element).html(css);
result = inlineUrl(css, filename);
files.push(result.files);
$(element).html(result.css);
});
// style attributes
@@ -27,13 +29,17 @@ var inline = function (html, filePath) {
attributes.each(function (index, element) {
var css = $(element).attr('style');
css = wrap(css);
css = inlineUrl(css, filePath);
css = string(css).collapseWhitespace().toString();
result = inlineUrl(css, filename);
files.push(result.files);
css = string(result.css).collapseWhitespace().toString();
css = unwrap(css);
$(element).attr('style', css);
});
return $.html();
return {
html: $.html(),
files: files
};
};
module.exports = inline;

View File

@@ -3,7 +3,7 @@ var path = require('path');
var fs = require('fs');
var filepath = path.resolve(__dirname, './fixtures/index.html');
var options = {};
var options = {verbose: true};
inline(filepath, options)
.then(function (html) {