yellow team mailing list archive
-
yellow team
-
Mailing list archive
-
Message #01807
[Merge] lp:~benji/juju-gui/bug-1078978 into lp:juju-gui
Benji York has proposed merging lp:~benji/juju-gui/bug-1078978 into lp:juju-gui.
Requested reviews:
Juju GUI Hackers (juju-gui)
For more details, see:
https://code.launchpad.net/~benji/juju-gui/bug-1078978/+merge/137650
Combine and minifiy CSS files.
--
https://code.launchpad.net/~benji/juju-gui/bug-1078978/+merge/137650
Your team Juju GUI Hackers is requested to review the proposed merge of lp:~benji/juju-gui/bug-1078978 into lp:juju-gui.
=== modified file 'Makefile'
--- Makefile 2012-11-20 15:10:30 +0000
+++ Makefile 2012-12-03 18:22:23 +0000
@@ -12,20 +12,30 @@
TEMPLATE_TARGETS=$(shell bzr ls -k file app/templates)
SPRITE_SOURCE_FILES=$(shell bzr ls -R -k file app/assets/images)
BUILD_ASSETS_DIR=build/juju-ui/assets
-SPRITE_GENERATED_FILES=$(BUILD_ASSETS_DIR)/stylesheets/sprite.css \
- $(BUILD_ASSETS_DIR)/stylesheets/sprite.png
+SPRITE_GENERATED_FILES=$(BUILD_ASSETS_DIR)/sprite.css \
+ $(BUILD_ASSETS_DIR)/sprite.png
PRODUCTION_FILES=$(BUILD_ASSETS_DIR)/modules.js \
$(BUILD_ASSETS_DIR)/config.js \
$(BUILD_ASSETS_DIR)/app.js \
- $(BUILD_ASSETS_DIR)/stylesheets/all-static.css
+ $(BUILD_ASSETS_DIR)/all-yui.js \
+ $(BUILD_ASSETS_DIR)/combined-css/all-static.css
DATE=$(shell date -u)
APPCACHE=$(BUILD_ASSETS_DIR)/manifest.appcache
+copied-assets: $(NODE_TARGETS)
+ # Copy each YUI module's assets into the build directory where they
+ # will be served.
+ mkdir -p "$(BUILD_ASSETS_DIR)/combined-css"
+ (cd node_modules/yui/ && \
+ cp -r --parents */assets "$(PWD)/$(BUILD_ASSETS_DIR)")
+ cp node_modules/yui/assets/skins/sam/rail-x.png \
+ "$(BUILD_ASSETS_DIR)/combined-css"
+
all: build
build/juju-ui/templates.js: $(TEMPLATE_TARGETS) bin/generateTemplates
- mkdir -p "$(BUILD_ASSETS_DIR)/stylesheets"
- ./bin/generateTemplates
+ mkdir -p "$(BUILD_ASSETS_DIR)"
+ bin/generateTemplates
yuidoc/index.html: node_modules/yuidocjs $(JSFILES)
node_modules/.bin/yuidoc -o yuidoc -x assets app
@@ -73,17 +83,17 @@
fi
app/assets/javascripts/yui: node_modules/yui
- ln -sf `pwd`/node_modules/yui ./app/assets/javascripts/
+ ln -sf `pwd`/node_modules/yui app/assets/javascripts/
node_modules/d3/d3.v2.js node_modules/d3/d3.v2.min.js: node_modules/d3
app/assets/javascripts/d3.v2.js: node_modules/d3/d3.v2.js
- ln -sf `pwd`/node_modules/d3/d3.v2.js ./app/assets/javascripts/d3.v2.js
+ ln -sf `pwd`/node_modules/d3/d3.v2.js app/assets/javascripts/d3.v2.js
app/assets/javascripts/d3.v2.min.js: node_modules/d3/d3.v2.min.js
- ln -sf `pwd`/node_modules/d3/d3.v2.min.js ./app/assets/javascripts/d3.v2.min.js
+ ln -sf `pwd`/node_modules/d3/d3.v2.min.js app/assets/javascripts/d3.v2.min.js
-javascript_libraries: app/assets/javascripts/yui \
+javascript-libraries: app/assets/javascripts/yui \
app/assets/javascripts/d3.v2.js app/assets/javascripts/d3.v2.min.js
gjslint: virtualenv/bin/gjslint
@@ -108,10 +118,10 @@
spritegen: $(SPRITE_GENERATED_FILES)
-$(PRODUCTION_FILES): node_modules/yui node_modules/d3/d3.v2.min.js $(JSFILES) ./bin/merge-files
+$(PRODUCTION_FILES): node_modules/yui node_modules/d3/d3.v2.min.js $(JSFILES) bin/merge-files
rm -f $(PRODUCTION_FILES)
- mkdir -p "$(BUILD_ASSETS_DIR)/stylesheets"
- ./bin/merge-files
+ mkdir -p "$(BUILD_ASSETS_DIR)/combined-css"
+ bin/merge-files
cp app/modules.js $(BUILD_ASSETS_DIR)/modules.js
cp app/config.js $(BUILD_ASSETS_DIR)/config.js
@@ -131,9 +141,8 @@
cd build && python -m SimpleHTTPServer 8888
clean:
- rm -rf node_modules virtualenv
+ rm -rf node_modules virtualenv build
make -C docs clean
- rm -Rf build/
build/index.html: app/index.html
cp -f app/index.html build/
@@ -147,12 +156,12 @@
$(BUILD_ASSETS_DIR)/svgs: $(shell bzr ls -R -k file app/assets/svgs)
cp -rf app/assets/svgs $(BUILD_ASSETS_DIR)/svgs
-build_images: build/favicon.ico $(BUILD_ASSETS_DIR)/images \
+build-images: build/favicon.ico $(BUILD_ASSETS_DIR)/images \
$(BUILD_ASSETS_DIR)/svgs
-build: appcache $(NODE_TARGETS) javascript_libraries \
+build: appcache $(NODE_TARGETS) javascript-libraries copied-assets \
build/juju-ui/templates.js yuidoc spritegen \
- combinejs build/index.html build_images
+ combinejs build/index.html build-images
$(APPCACHE): manifest.appcache.in
mkdir -p "build/juju-ui/assets"
@@ -169,6 +178,6 @@
# appcache, and this provides the correct order.
appcache-force: appcache-touch appcache
-.PHONY: test lint beautify server clean build_images prep jshint gjslint \
+.PHONY: test lint beautify server clean build-images prep jshint gjslint \
appcache appcache-touch appcache-force yuidoc spritegen yuidoc-lint \
- combinejs javascript_libraries
+ combinejs javascript-libraries copied-assets
=== modified file 'app/index.html'
--- app/index.html 2012-11-20 15:35:30 +0000
+++ app/index.html 2012-12-03 18:22:23 +0000
@@ -8,9 +8,9 @@
<meta name="author" content="Juju team">
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,400italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="/favicon.ico">
- <link rel="stylesheet" href="/juju-ui/assets/stylesheets/all-static.css">
- <link rel="stylesheet" href="/juju-ui/assets/stylesheets/juju-gui.css">
- <link rel="stylesheet" href="/juju-ui/assets/stylesheets/sprite.css">
+ <link rel="stylesheet" href="/juju-ui/assets/combined-css/all-static.css">
+ <link rel="stylesheet" href="/juju-ui/assets/juju-gui.css">
+ <link rel="stylesheet" href="/juju-ui/assets/sprite.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js";></script>
<![endif]-->
@@ -69,6 +69,7 @@
<div id="vp-right-border"></div>
</div>
<!-- javascript away -->
+ <script src="/juju-ui/assets/all-yui.js"></script>
<script src="/juju-ui/assets/app.js"></script>
<script src="/juju-ui/assets/modules.js"></script>
<script src="/juju-ui/assets/config.js"></script>
=== modified file 'app/modules.js'
--- app/modules.js 2012-11-15 13:07:29 +0000
+++ app/modules.js 2012-12-03 18:22:23 +0000
@@ -2,6 +2,7 @@
debug: false,
// YUI will not download the modules. They are supposed to be already loaded.
ignoreRegistered: true,
+ base: '/juju-ui/assets/',
// Please use this object only for defining new aliases.
// You can add the fullpath to the libraries in "modules-debug.js".
=== modified file 'bin/merge-files'
--- bin/merge-files 2012-11-16 16:39:59 +0000
+++ bin/merge-files 2012-12-03 18:22:23 +0000
@@ -1,23 +1,24 @@
#!/usr/bin/env node
-/**
- * We aggregate and minimize the js sources in order to improve the load speed
- * of the application.
+/*
+ * We aggregate and minimize the JavaScript sources in order to improve the
+ * load speed of the application.
*
- * We don't want to use the yui combo loader feature because we want to be able
+ * We don't want to use the YUI combo loader feature because we want to be able
* to run from only static files and we want to be able to run behind a
* firewall without access to the internet.
*
- * The final product will provide three js files: one for the YUI dependencies,
- * one for our custom js code and one for third party js like d3.
+ * The final product will provide three JavaScript files: one for the YUI
+ * dependencies, one for our custom JavaScript code and one for third party
+ * JavaScript like D3.
*
* Known issues:
- * (1) If we set "bootstrap=false" in the GlobalConfig object, yui disables the
+ * (1) If we set "bootstrap=false" in the GlobalConfig object, YUI disables the
* loader object. It means it wont even try to download modules. We cannot
* do it because the loader also manages the "use" property which defines
* aliases for some of your modules ('juju-views' and 'juju-controllers').
- * (2) During development, we've noticed that some of the yui modules weren't
- * included in the list of yui files (lang/datatype-date-format_en-US,
+ * (2) During development, we've noticed that some of the YUI modules weren't
+ * included in the list of YUI files (lang/datatype-date-format_en-US,
* parallel, app-transitions-native, gallery-markdown, loader-base). For
* some reason, the loader does not resolve the names of the files for
* these modules. We need to add them manually in this file.
@@ -26,26 +27,25 @@
'use strict';
require('yui').YUI().use(['yui'], function(Y) {
- var merge = require('../lib/merge-files.js'),
- syspath = require('path'),
- paths,
- reqs,
- filesToLoad;
+ var merge = require('../lib/merge-files.js');
+ var syspath = require('path');
// First we find all of the paths to our custom Javascript in the app
// directory. We need to tell the function to ignore the "assets" directory
// and the debug version of the modules file. I need to use
// "syspath.join(process.cwd(), ...)" or else I have... "Error: Cannot find
- // module './app/config.js'" from node's internal module.js file.
- paths = merge.readdir(syspath.join(process.cwd(), './app'),
- [syspath.join(process.cwd(), './app/assets'),
- syspath.join(process.cwd(), './app/modules-debug.js')]);
+ // module 'app/config.js'" from node's internal module.js file.
+ var paths = merge.readdir(syspath.join(process.cwd(), 'app'),
+ [syspath.join(process.cwd(), 'app/assets'),
+ syspath.join(process.cwd(), 'app/modules-debug.js')]);
// templates.js is a generated file. It is not part of the app directory.
- paths.push(syspath.join(process.cwd(), './build/juju-ui/templates.js'));
-
- // Get the name of all the YUI modules that our custom js files use directly.
- reqs = merge.loadRequires(paths);
+ paths.push(syspath.join(process.cwd(), 'build/juju-ui/templates.js'));
+
+ merge.combineJs(paths, 'build/juju-ui/assets/app.js');
+
+ // Get the paths to the YUI modules that we use.
+ var reqs = merge.loadRequires(paths);
// For some reason the loader does not get these requirements.
// (Known issue #2)
@@ -57,24 +57,22 @@
reqs.push('loader-base');
// Get all of the YUI files and their dependencies
- filesToLoad = merge.getYUIFiles(reqs);
+ var filesToLoad = merge.getYUIFiles(reqs);
// Merge third-party files to the filesToLoad list
filesToLoad.js.push.apply(filesToLoad.js, [
- './app/assets/javascripts/d3.v2.min.js',
- './app/assets/javascripts/d3-components.js',
- './app/assets/javascripts/reconnecting-websocket.js',
- './app/assets/javascripts/svg-layouts.js' ]);
+ 'app/assets/javascripts/d3.v2.min.js',
+ 'app/assets/javascripts/d3-components.js',
+ 'app/assets/javascripts/reconnecting-websocket.js',
+ 'app/assets/javascripts/svg-layouts.js' ]);
- // Merge our list of custom js files to the filesToLoad list
- filesToLoad.js.push.apply(filesToLoad.js, paths);
-
- // Combine YUI and our js files
- merge.combine(filesToLoad.js,
- './build/juju-ui/assets/app.js', 'uglifyjs');
-
- // Combine third party css files
- merge.combine([ './app/assets/stylesheets/bootstrap-2.0.4.css',
- './app/assets/stylesheets/bootstrap-responsive-2.0.4.css' ],
- './build/juju-ui/assets/stylesheets/all-static.css', 'yui-css');
+ merge.combineJs(filesToLoad.js,
+ 'build/juju-ui/assets/all-yui.js', 'uglifyjs');
+
+ var cssFiles = filesToLoad.css;
+ cssFiles.push('app/assets/stylesheets/bootstrap-2.0.4.css');
+ cssFiles.push('app/assets/stylesheets/bootstrap-responsive-2.0.4.css');
+ merge.combineCSS(cssFiles,
+ 'build/',
+ 'build/juju-ui/assets/combined-css/all-static.css', 'yui-css');
});
=== modified file 'grunt.js'
--- grunt.js 2012-11-15 21:53:49 +0000
+++ grunt.js 2012-12-03 18:22:23 +0000
@@ -5,8 +5,8 @@
spritesheet: {
compile: {
options: {
- outputImage: 'stylesheets/sprite.png',
- outputCss: 'stylesheets/sprite.css',
+ outputImage: 'sprite.png',
+ outputCss: 'sprite.css',
selector: '.sprite'
},
=== modified file 'lib/merge-files.js'
--- lib/merge-files.js 2012-11-13 15:04:19 +0000
+++ lib/merge-files.js 2012-12-03 18:22:23 +0000
@@ -4,6 +4,7 @@
// This only happens if we remove the 'var' keyword or add it to the "global"
// variable.
global.YUI = require('yui').YUI;
+var path = require('path');
YUI().use(['yui'], function(Y) {
var fs = require('fs'),
@@ -22,46 +23,64 @@
}});
}
- // It combines the files defined by "files" into a single (compressed or not)
- // js file.
- function combine(files, outputFile, compressorType) {
- var str = [];
- Y.Array.each(files, function(file) {
- console.log('file -> ' + file);
- str.push(fs.readFileSync(file, 'utf8'));
+ function extractRelativePaths(s) {
+ var regex = /\(["']?((\.\/|\.\.\/)[^)]*)["']\)/g;
+ var result;
+ var paths = [];
+ while (!!(result = regex.exec(s))) {
+ paths.push(result[1]);
+ }
+ return paths;
+ }
+
+ // Combine one or more files into a single, minified file.
+ function combine(files, outputFile) {
+ var chunks = [];
+ Y.Array.each(files, function(inputFile) {
+ chunks.push(fs.readFileSync(inputFile, 'utf8'));
});
- fs.writeFileSync(outputFile, str.join('\n'), 'utf8');
- if (compressorType) {
- minify(outputFile, compressorType);
- }
- }
- exports.combine = combine;
+ fs.writeFileSync(outputFile, chunks.join('\n'), 'utf8');
+ minify(outputFile, 'uglifyjs');
+ }
+
+ // Combine one or more CSS files.
+ function combineCSS(files, outputFile) {
+ combine(files, 'yui-css');
+ }
+ exports.combineCSS = combineCSS;
+
+ // Combine one or more JavaScript files.
+ function combineJs(files, outputFile) {
+ combine(files, 'uglifyjs');
+ }
+ exports.combineJs = combineJs;
// It gets the name of all the files under 'path', recursively. It ignores
// files and directories included in the "ignore" array. These will
// typically be set to ignore our assets and our module file.
function readdir(path, ignore) {
- var result = [], // These are the filenames we will return.
- dirs = [], // These are the directories into which we will recurse.
- files = fs.readdirSync(path);
+ var result = []; // These are the filenames we will return.
+ var dirs = []; // These are the directories into which we will recurse.
+ var files = fs.readdirSync(path);
+ ignore = ignore || [];
+
+ function shouldNotIgnore(fileName) {
+ return ignore.indexOf(fileName) === -1;
+ }
+
+ function isJavascriptFile(fileName) {
+ return syspath.extname(fileName).toLowerCase() === '.js';
+ }
Y.Array.each(files, function(value) {
var fileName, file;
fileName = path + '/' + value;
file = fs.statSync(fileName);
- if (file.isFile()) {
- if (syspath.extname(fileName).toLowerCase() === '.js') {
- if (ignore && ignore.indexOf(fileName) >= 0) {
- console.log('SKIPPING FILE -> ' + fileName);
- } else {
- result.push(fileName);
- }
+ if (shouldNotIgnore(fileName)) {
+ if (file.isFile() && isJavascriptFile(fileName)) {
+ result.push(fileName);
}
- } else if (file.isDirectory()) {
- console.log('DIRECTORY -> ' + fileName);
- if (ignore && ignore.indexOf(fileName) >= 0) {
- console.log('SKIPPING DIRECTORY -> ' + fileName);
- } else {
+ else if (file.isDirectory()) {
dirs.push(fileName);
}
}
@@ -69,9 +88,7 @@
// We have read all the filenames and all the directory names. Now
// it is time to recurse into the directories that we have collected.
Y.Array.each(dirs, function(directory) {
- // This is the best Javascript offers for appending one array to
- // another.
- result.push.apply(result, readdir(directory));
+ result.push.apply(result, readdir(directory, ignore));
});
return result;
}
=== modified file 'lib/server.js'
--- lib/server.js 2012-11-20 14:20:29 +0000
+++ lib/server.js 2012-12-03 18:22:23 +0000
@@ -63,11 +63,6 @@
res.sendfile('build/juju-ui/' + fileName);
});
-server.get('/juju-ui/assets/stylesheets/:file', function(req, res) {
- var fileName = req.params.file;
- res.sendfile('build/juju-ui/assets/stylesheets/' + fileName);
-});
-
server.get('/favicon.ico', function(req, res) {
res.sendfile('app/favicon.ico');
});
=== modified file 'lib/templates.js'
--- lib/templates.js 2012-11-28 19:47:10 +0000
+++ lib/templates.js 2012-12-03 18:22:23 +0000
@@ -157,7 +157,7 @@
},
stylesheet: {
- output: __dirname + '/../build/juju-ui/assets/stylesheets/juju-gui.css',
+ output: __dirname + '/../build/juju-ui/assets/juju-gui.css',
callback: function(strategy, name) {
var parser = new less.Parser({
paths: [config.server.view_dir],
Follow ups
