зеркало из https://github.com/mozilla/commonplace.git
minify splash-screen stylesheet (bug 965925)
This commit is contained in:
Christopher Van
Родитель
91c4df9172
Коммит
0e1ddd72e6
|
|
@ -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
|
||||
|
|
|
|||
140
lib/build.js
140
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;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
|
||||
<title>Commonplace Sample App</title>
|
||||
<link rel="stylesheet" href="https://marketplace-dev-cdn.allizom.org/media/fireplace/css/splash.css">
|
||||
<link rel="stylesheet" href="https://marketplace-dev-cdn.allizom.org/media/fireplace/css/include.css">
|
||||
</head>
|
||||
<body class="home" data-media="">
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче