mirror of
https://github.com/KevinMidboe/inline-html.git
synced 2025-10-29 17:40:29 +00:00
Added support for verbose option that returns filenames of each inlined file alongside inlined html.
This commit is contained in:
26
lib/index.js
26
lib/index.js
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user