From 0e1ddd72e6fd07a8fa2e5c4adbe9fdf485573967 Mon Sep 17 00:00:00 2001 From: Christopher Van Date: Thu, 30 Jan 2014 13:55:26 -0800 Subject: [PATCH] minify splash-screen stylesheet (bug 965925) --- lib/assets/gitignore | 1 + lib/build.js | 140 ++++++++++++++++++++++++++++--------------- lib/commonplace.js | 29 ++++++++- src/index.html | 1 + 4 files changed, 121 insertions(+), 50 deletions(-) diff --git a/lib/assets/gitignore b/lib/assets/gitignore index a6c7722..bf94f66 100644 --- a/lib/assets/gitignore +++ b/lib/assets/gitignore @@ -34,6 +34,7 @@ src/locales/* src/media/build_id.txt src/media/locales/* src/media/css/include.css +src/media/css/splash.css src/media/imgurls.txt src/media/include.css src/media/include.js diff --git a/lib/build.js b/lib/build.js index 8dd6769..e0ddb73 100644 --- a/lib/build.js +++ b/lib/build.js @@ -13,6 +13,7 @@ var blacklist = [ 'templates.js', // Generated dynamically. 'include.js', 'include.css', + 'splash.css' ]; function concatJS(src_dir, callback) { @@ -59,59 +60,101 @@ function compileStylus(source_path, callback) { }); } +function fix_urls(img_urls, css_dir, src_dir, url_pattern, data) { + var has_origin = false; + + return data.replace(url_pattern, function(match, url, offset, string) { + url = url.replace(/"|'/g, ''); + has_origin = false; + + if (url.substring(0, 5) === 'data:') { + return 'url(' + url + ')'; + } + + if (url.search(/(https?):|\/\//) === 0) { + // Do not cachebust `https:`, `http:`, and `//` URLs. + has_origin = true; + } else { + if (url[0] === '/') { + has_origin = true; + } + + var timestamp = new Date().getTime(); + + var chunks = url.split('#'); + if (chunks[1]) { + // If there was a hash, move it to the end of the URL + // after the `?timestamp`. + url = chunks[0] + '?' + timestamp + '#' + chunks[1]; + } else { + url += '?' + timestamp; + } + } + + if (img_urls.indexOf(url) === -1) { + if (has_origin) { + img_urls.push(url); + } else { + // Filename started with `../` or is a relative path. + var absolute_path = path.join(css_dir, url); + // Record the absolute URL, starting with `/media/`. + img_urls.push('/' + path.relative(src_dir, absolute_path)); + } + } + + return 'url(' + url + ')'; + }); +} + +function minifyCSS(src_dir, src, callback) { + var css_pattern = new RegExp('href=".+' + src + '"', 'g'); + var url_pattern = /url\(([^)]+)\)/g; + + var img_urls = []; + var css_dir = path.resolve(src_dir, 'media/css'); + var imgurls_fn = path.resolve(src_dir, 'media/imgurls.txt'); + + var index_html = fs.readFile(path.resolve(src_dir, 'index.html'), function(err, data) { + if (err) { + console.error('Could not read `index.html`.', err); + return; + } + var match; + var files = []; + data = data.toString(); + while (match = css_pattern.exec(data)) { + files.push(path.resolve(src_dir + match[1])); + } + + var output = ''; + + compileStylus(path.resolve(src_dir, src).replace('.styl.css', '.styl'), function(err, data) { + if (err) { + console.warn(err); + } else { + output = fix_urls(img_urls, css_dir, src_dir, url_pattern, data + '\n'); + } + fs.appendFile(imgurls_fn, img_urls.join('\n') + '\n', function(err) { + if (err) { + console.error('Error writing `imgurls.txt` to disk.'); + return; + } + console.log('Created ' + imgurls_fn); + }); + callback(output); + }); + }); +} + function concatCSS(src_dir, callback) { var css_pattern = /href="(\/media\/css\/.+\.styl\.css)"/g; var url_pattern = /url\(([^)]+)\)/g; var img_urls = []; - var css_dir = path.resolve(src_dir, 'media', 'css'); - var imgurls_fn = path.resolve(src_dir, 'media', 'imgurls.txt'); + var css_dir = path.resolve(src_dir, 'media/css'); + var imgurls_fn = path.resolve(src_dir, 'media/imgurls.txt'); var has_origin = false; - function fix_urls(data) { - return data.replace(url_pattern, function(match, url, offset, string) { - url = url.replace(/"|'/g, ''); - has_origin = false; - - if (url.substring(0, 5) === 'data:') { - return 'url(' + url + ')'; - } - - if (url.search(/(https?):|\/\//) === 0) { - // Do not cachebust `https:`, `http:`, and `//` URLs. - has_origin = true; - } else { - if (url[0] === '/') { - has_origin = true; - } - - var timestamp = new Date().getTime(); - - var chunks = url.split('#'); - if (chunks[1]) { - // If there was a hash, move it to the end of the URL - // after the `?timestamp`. - url = chunks[0] + '?' + timestamp + '#' + chunks[1]; - } else { - url += '?' + timestamp; - } - } - - if (img_urls.indexOf(url) === -1) { - if (has_origin) { - img_urls.push(url); - } else { - // Filename started with `../` or is a relative path. - var absolute_path = path.join(css_dir, url); - // Record the absolute URL, starting with `/media/`. - img_urls.push('/' + path.relative(src_dir, absolute_path)); - } - } - - return 'url(' + url + ')'; - }); - } - var index_html = fs.readFile(path.resolve(src_dir, 'index.html'), function(err, data) { if (err) { console.error('Could not read `index.html`.', err); @@ -134,13 +177,13 @@ function concatCSS(src_dir, callback) { if (err) { console.warn(err); } else { - output[index] = fix_urls(data + '\n'); + output[index] = fix_urls(img_urls, css_dir, src_dir, url_pattern, data + '\n'); } remaining--; if (!remaining) { fs.writeFile(imgurls_fn, img_urls.join('\n') + '\n', function(err) { if (err) { - console.error('Error writing `cssurls.txt` to disk.'); + console.error('Error writing `imgurls.txt` to disk.'); return; } console.log('Created ' + imgurls_fn); @@ -209,4 +252,5 @@ function compileHTML(src_dir, callback) { module.exports.js = concatJS; module.exports.stylus = compileStylus; module.exports.css = concatCSS; +module.exports.cssMinify = minifyCSS; module.exports.html = compileHTML; diff --git a/lib/commonplace.js b/lib/commonplace.js index 4adbdf2..83b8199 100644 --- a/lib/commonplace.js +++ b/lib/commonplace.js @@ -288,6 +288,7 @@ function clean(src_dir, callback) { 'templates.js', 'media/build_id.txt', 'media/imgurls.txt', + 'media/css/splash.css', 'media/css/include.css', 'media/js/include.js', 'media/locales/', @@ -569,9 +570,11 @@ function build_includes(src_dir, callback) { } ); + var cleancss = (new (require('clean-css'))); + build.css(src_dir, function(data) { if (!raw) { - data = (new (require('clean-css'))).minify(data); + data = cleancss.minify(data); } var include_css = path.resolve(src_dir, 'media', 'css', 'include.css'); fs.writeFile(include_css, data, function(err) { @@ -584,7 +587,29 @@ function build_includes(src_dir, callback) { }); }); - completed(); + // The stylesheet used for the splash screen needs to happen after the + // other files have been processed (because of the `imgurls.txt` file). + console.log( path.resolve(src_dir, 'media', 'css', 'splash.styl') ) + fs.exists(path.resolve(src_dir, 'media', 'css', 'splash.styl'), function (exists) { + if (!exists) { + return completed(); + } + + build.cssMinify(src_dir, 'media/css/splash.styl.css', function(data) { + if (!raw) { + data = cleancss.minify(data); + } + var splash_css = path.resolve(src_dir, 'media', 'css', 'splash.css'); + fs.writeFile(splash_css, data, function(err) { + if (err) { + console.error('Error writing `splash.css` to disk.'); + return; + } + console.log('Created ' + splash_css); + completed(); + }); + }); + }); } function lint() { diff --git a/src/index.html b/src/index.html index bc926c4..fe18470 100644 --- a/src/index.html +++ b/src/index.html @@ -4,6 +4,7 @@ Commonplace Sample App +