Merge pull request #206 from andig/gulp

Merged and minimized files to reduce HTTP traffic

gulpfile.js

@@ -1,69 +1,180 @@
 // include plug-ins
 var gulp = require('gulp');
-var debug = require('gulp-debug');
-var gulpif = require("gulp-if");
+
+var del = require('del');
+var concat = require('gulp-concat');
+var rename = require('gulp-rename');
+var size = require('gulp-size');
 var replace = require('gulp-replace');
 var watch = require('gulp-watch');
-var rename = require('gulp-rename');
 
 var jshint = require('gulp-jshint');
 var uglify = require('gulp-uglify');
-var spritesmith = require("gulp-spritesmith");
+
+var spritesmith = require("gulp.spritesmith");
+var imagemin = require('gulp-imagemin');
+var uncss = require('gulp-uncss');
+var minifyCSS = require('gulp-minify-css');
 
 // settings
 var base = './htdocs/frontend/';
-var dest = './htdocs/frontend/';
+var build = base + 'build/';
+
+// styles
+var styles = base + 'stylesheets/';
+
+// images
+var images = base + 'images/';
+
+// js
+var vendor = base + 'vendor/';
+var javascripts = base + 'javascripts/';
+var flot = base + 'javascripts/flot/';
+var extensions = base + 'javascripts/jquery/';
 
 /**
  * Defaults
  */
-gulp.task('build', ['sprites'/*, 'scripts', 'styles', 'replace'*/]);
-
-// watch for JS changes
 gulp.task('default', function() {
+	// watch for JS changes
 	gulp.src(base + 'javascripts/**/*.js', { read: false })
 		.pipe(watch())
 		.pipe(jshint())
 		.pipe(jshint.reporter('default'));
 });
 
+
 /**
- * jsHint JS scripts
+ * Build
  */
+gulp.task('build', ['clean', 'jshint', 'scripts', 'sprites']);
+
+gulp.task('clean', function () {
+	del([
+		build + '**'
+	]);
+});
+
+
 gulp.task('jshint', function() {
-	gulp.src([base + 'javascripts/!(property)*.js'])
+	gulp.src([
+		base + 'javascripts/*.js',
+		'!**/*.min.js',							// omit minified files
+	])
 		.pipe(jshint())
 		.pipe(jshint.reporter('default'));
 });
 
+
 /**
- * Create CSS sprites for icons
+ * Scripts
+ */
+gulp.task('scripts', ['flot', 'jquery-ext', 'vz-scripts']);
+
+gulp.task('vz-scripts', function() {
+	return gulp.src([
+		javascripts + 'helper.js',	// in order of index.html
+		javascripts + 'init.js',
+		javascripts + 'functions.js',
+		javascripts + 'entities.js',
+		javascripts + 'wui.js',
+		javascripts + 'entity.js',
+		'!**/options.js',						// exclude options
+	])
+	.pipe(concat('scripts.js'))
+	.pipe(gulp.dest(build))				// for reference only
+	.pipe(size({showFiles: true}))
+	.pipe(uglify())
+	.pipe(rename('scripts.min.js'))
+	.pipe(gulp.dest(javascripts))
+	.pipe(size({showFiles: true}))
+});
+
+gulp.task('flot', function() {
+	return gulp.src([
+		flot + '**/jquery.flot.js',	// flot first
+		flot + '**.js',							// then flot modules
+		'!**/excanvas*.js',					// omit canvas helper
+		'!**/*.min.js',							// omit minified files
+	])
+	.pipe(concat('flot.js'))
+	.pipe(gulp.dest(build))				// for reference only
+	.pipe(size({showFiles: true}))
+	.pipe(uglify())
+	.pipe(rename('flot.min.js'))
+	.pipe(gulp.dest(flot))
+	.pipe(size({showFiles: true}))
+});
+
+gulp.task('jquery-ext', function() {
+	return gulp.src([
+		extensions + '**.js',
+		'!**/*.min.js',							// omit minified files
+	])
+	.pipe(concat('jquery-ext.js'))
+	.pipe(gulp.dest(build))				// for reference only
+	.pipe(size({showFiles: true}))
+	.pipe(uglify())
+	.pipe(rename('jquery-ext.min.js'))
+	.pipe(gulp.dest(extensions))
+	.pipe(size({showFiles: true}))
+});
+
+
+/**
+ * Sprites
  */
 gulp.task('sprites', ['sprites-combine', 'sprites-optimize']);
 
 // Combine images into sprite
 gulp.task('sprites-combine', function () {
-	var imgBase = base + 'images/';
-	var cssDst = 'stylesheets/sprites.max.css';
-
-	gulp.src([imgBase + '!(sprites|blank|ui-|style_|empty)*.png', imgBase + 'types/*!(32).png'])
+	var spriteData = gulp.src([
+		images + '!(sprites|blank|ui-|style_|empty)*.png',
+		images + 'types/*!(32).png'
+	])
 		.pipe(spritesmith({
-			imgName: 'images/sprites.png',
-			styleName: cssDst,
-			imgPath: '../images/sprites.png',
+			imgName: '../images/sprites.png',	// link to images folder
+			cssName: 'sprites.css',
 			algorithm: 'top-down'
-		}))
-		.pipe(gulpif('*.png', gulp.dest(dest)))
-		.pipe(gulpif('*.css', gulp.dest(dest)));
+		}));
+
+	spriteData.img
+		.pipe(imagemin())
+		.pipe(gulp.dest(images));
+
+	spriteData.css
+		.pipe(gulp.dest(build));
 });
 
 // Rewrite sprites.css
 gulp.task('sprites-optimize', function () {
-	var cssDst = 'stylesheets/sprites.max.css';
-
 	// remove dimensions and save as new css file
-	gulp.src(base + cssDst)
+	gulp.src(build + 'sprites.css')
 		.pipe(replace(/  width: 16px;\n  height: 16px;\n/g, ''))
-		.pipe(rename('sprites.css'))
-		.pipe(gulp.dest(dest + 'stylesheets/'));
+		.pipe(gulp.dest(styles));
+});
+
+
+/**
+ * CSS
+ */
+// not used
+gulp.task('css-minimize', function () {
+	gulp.src(styles + '*.css')
+		.pipe(concat('styles.css'))
+		.pipe(gulp.dest(build))
+		.pipe(minifyCSS({keepBreaks:true}))
+		.pipe(rename('styles.min.css'))
+		.pipe(gulp.dest(build));
+});
+
+// not used
+gulp.task('css-strip', function() {
+	gulp.src(styles + '*.css')
+		// gulp.src(build + 'styles.min.css')
+		.pipe(uncss({
+				html: [base + 'index.html']
+		}))
+		// .pipe(rename('styles.min.css'))
+		.pipe(gulp.dest(build));
 });

htdocs/frontend/index.html

@@ -25,20 +25,24 @@
 	<!-- jQuery -->
 	<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
 	<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
+
+	<script type="text/javascript" src="javascripts/jquery/jquery-ext.min.js"></script>
+	<!-- debug: uncomment scripts below -->	<!--
 	<script type="text/javascript" src="javascripts/jquery/jquery.treeTable.js"></script>
 	<script type="text/javascript" src="javascripts/jquery/jquery-extensions.js"></script>
+	-->
 
 	<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="javascripts/flot/excanvas.min.js"></script><![endif]-->
+	<!-- for timezone support ensure timezone data from ftp://ftp.iana.org/tz/tzdata-latest.tar.gz is in frontend/tz -->
+	<script type="text/javascript" src="javascripts/flot/flot.min.js"></script>
+	<!-- debug: uncomment scripts below -->	<!--
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.js"></script>
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.crosshair.js"></script>
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.selection.js"></script>
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.time.js"></script>
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.canvas.js"></script>
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.axislabels.js"></script>
 	<script type="text/javascript" src="javascripts/flot/jquery.flot.xgap.js"></script>
-	<!-- uncomment the script below to enable timezone support is needed
-			 make sure timezone data from ftp://ftp.iana.org/tz/tzdata-latest.tar.gz is unpacked to frontend/tz -->
-	<!--
 	<script type="text/javascript" src="javascripts/flot/date.js"></script>
 	-->
 

htdocs/frontend/javascripts/entity.js

@@ -441,6 +441,7 @@ Entity.prototype.getDOMDetails = function(edit) {
 				var definition = vz.capabilities.definitions.get('properties', property);
 				var title = definition.translation[vz.options.language];
 				var value = this[property];
+				var prefix; // unit prefix
 
 				if (definition.type == 'boolean') {
 					// value = '<img src="images/' + ((value) ? 'tick' : 'cross') + '.png" alt="' + ((value) ? 'ja' : 'nein') + '" />';
@@ -449,12 +450,12 @@ Entity.prototype.getDOMDetails = function(edit) {
 
 				switch (property) {
 					case 'cost':
-						var prefix = (this.definition.scale == 1000) ? ' ct/k' : ' ct/'; // ct per Wh or kWh
+						prefix = (this.definition.scale == 1000) ? ' ct/k' : ' ct/'; // ct per Wh or kWh
 						value = Number(value * 100).toFixed(2) + prefix + vz.wui.formatConsumptionUnit(this.definition.unit);
 						break;
 
 					case 'resolution':
-						var prefix = (this.definition.scale == 1000) ? 'k' : ''; // per Wh or kWh
+						prefix = (this.definition.scale == 1000) ? 'k' : ''; // per Wh or kWh
 						value += '/' + prefix + vz.wui.formatConsumptionUnit(this.definition.unit);
 						break;
 

htdocs/frontend/javascripts/init.js

@@ -98,7 +98,7 @@ $(document).ready(function() {
 
 	// clear cookies and localStorage cache
 	var params = $.getUrlParams();
-	if (params.hasOwnProperty('reset') && params['reset']) {
+	if (params.hasOwnProperty('reset') && params.reset) {
 		$.setCookie('vz_entities', null);
 		try {
 			localStorage.removeItem('vz.capabilities');
@@ -114,16 +114,6 @@ $(document).ready(function() {
 	vz.options.plot.xaxis.max = new Date().getTime();
 	vz.options.plot.xaxis.min = vz.options.plot.xaxis.max - vz.options.interval;
 
-	// clear cookies and localStorage cache
-	var params = $.getUrlParams();
-	if (params.hasOwnProperty('reset') && params['reset']) {
-		$.setCookie('vz_entities', null);
-		try {
-			localStorage.removeItem('vz.capabilities');
-		}
-		catch (e) { }
-	}
-
 	// parse additional url params (new uuid etc e.g. for permalink) after loading defaults
 	vz.parseUrlParams();