Added example demonstrating Js and CSS combining ... (#1200)

* Added example detailing how to optimize file delivery.
* Added Last-Modified header example.

samples/HttpServer_ConfigNetwork/.gitignore

@@ -0,0 +1 @@
+node_modules

samples/HttpServer_ConfigNetwork/Makefile

@@ -22,3 +22,10 @@ include $(SMING_HOME)/Makefile-rboot.mk
 else
 include $(SMING_HOME)/Makefile-project.mk
 endif
+
+web-pack:
+	$(Q) gulp
+	$(Q) date +'%a, %d %b %Y %H:%M:%S GMT' -u > web/build/.lastModified
+
+web-upload: web-pack spiff_update
+	$(ESPTOOL) -p $(COM_PORT) -b $(COM_SPEED_ESPTOOL) write_flash $(flashimageoptions) $(SPIFF_START_OFFSET) $(SPIFF_BIN_OUT)

samples/HttpServer_ConfigNetwork/Readme.md

@@ -0,0 +1,25 @@
+# Introduction
+
+The HTTP server coming with Sming is quite powerful but it is limited from the available resources of the underlining hardware (your favorite ESP8266 microcontroller). Serving multiple files at once can be problematic. It is not the size of the files that can cause problems, but the number of simultaneous files that need to be delivered. Therefore if you serve multiple CSS or JS files you can optimize your web application before uploading it into your ESP8266 using the advice below.
+
+# Optimizing File Delivery
+
+In this example you will see how to combine CSS and JS files, compress them and deliver the optimized content via the HTTP server.
+
+## Installation
+
+The file optimization uses `gulp`. To install it and the needed gulp packages you need to install first [npm](https://www.npmjs.com/). 
+Npm is the Node.JS package manager.  Once you are done with the installation you can run from the command line the following:
+
+  npm install
+
+ The command above will install gulp and its dependencies.
+
+## Usage
+
+During the development of your web application you should work only in the `web/dev/` folder. Once you are ready with the application you can `pack` the resources and `upload` them to your device. The commands are
+
+  make web-pack
+  make web-upload
+
+That should be it.

samples/HttpServer_ConfigNetwork/app/application.cpp

@@ -9,6 +9,8 @@ BssList networks;
 String network, password;
 Timer connectionTimer;
 
+String lastModified;
+
 void onIndex(HttpRequest &request, HttpResponse &response)
 {
 	TemplateFileStream *tmpl = new TemplateFileStream("index.html");
@@ -53,6 +55,11 @@ void onIpConfig(HttpRequest &request, HttpResponse &response)
 
 void onFile(HttpRequest &request, HttpResponse &response)
 {
+	if (lastModified.length() >0 && request.getHeader("If-Modified-Since").equals(lastModified)) {
+		response.code = HTTP_STATUS_NOT_MODIFIED;
+		return;
+	}
+
 	String file = request.getPath();
 	if (file[0] == '/')
 		file = file.substring(1);
@@ -61,6 +68,10 @@ void onFile(HttpRequest &request, HttpResponse &response)
 		response.forbidden();
 	else
 	{
+		if(lastModified.length() > 0) {
+			response.setHeader("Last-Modified", lastModified);
+		}
+
 		response.setCache(86400, true); // It's important to use cache for better performance.
 		response.sendFile(file);
 	}
@@ -193,6 +204,12 @@ void init()
 {
 	spiffs_mount(); // Mount file system, in order to work with files
 
+	if(fileExist(".lastModified")) {
+		// The last modification
+		lastModified = fileGetContent(".lastModified");
+		lastModified.trim();
+	}
+
 	Serial.begin(SERIAL_BAUD_RATE); // 115200 by default
 	Serial.systemDebugOutput(true); // Enable debug output to serial
 	AppSettings.load();

samples/HttpServer_ConfigNetwork/gulpfile.js

@@ -0,0 +1,89 @@
+/*
+ 
+ESP8266 file system builder with PlatformIO support
+ 
+Copyright (C) 2016 by Xose Pérez <xose dot perez at gmail dot com>
+ 
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+ 
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+ 
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ 
+*/
+
+// -----------------------------------------------------------------------------
+// File system builder
+// -----------------------------------------------------------------------------
+
+const gulp = require('gulp');
+const plumber = require('gulp-plumber');
+const htmlmin = require('gulp-htmlmin');
+const cleancss = require('gulp-clean-css');
+const uglify = require('gulp-uglify');
+const gzip = require('gulp-gzip');
+const del = require('del');
+const useref = require('gulp-useref');
+const gulpif = require('gulp-if');
+const inline = require('gulp-inline');
+
+/* Clean destination folder */
+gulp.task('clean', function() {
+    return del(['data/*']);
+});
+
+/* Copy static files */
+gulp.task('files', function() {
+    return gulp.src([
+            'web/dev/*.{jpg,jpeg,png,ico,gif}',
+        ])
+        .pipe(gulp.dest('web/build'));
+});
+
+/* Process HTML, CSS, JS  --- INLINE --- */
+gulp.task('inline', function() {
+    return gulp.src('web/dev/*.html')
+        .pipe(inline({
+            base: 'web/dev/',
+            js: uglify,
+            css: cleancss,
+            disabledTypes: ['svg', 'img']
+        }))
+        .pipe(htmlmin({
+            collapseWhitespace: true,
+            removeComments: true,
+            minifyCSS: true,
+            minifyJS: true
+        }))
+        .pipe(gzip())
+        .pipe(gulp.dest('web/build/'));
+})
+
+/* Process HTML, CSS, JS */
+gulp.task('html', function() {
+    return gulp.src('web/dev/*.html')
+        .pipe(useref())
+        .pipe(plumber())
+        .pipe(gulpif('*.css', cleancss()))
+        .pipe(gulpif('*.js', uglify()))
+        .pipe(gulpif('*.html', htmlmin({
+            collapseWhitespace: true,
+            removeComments: true,
+            minifyCSS: true,
+            minifyJS: true
+        })))
+        .pipe(gulpif(['*.css','*.js'], gzip()))
+        .pipe(gulp.dest('web/build/'));
+});
+
+/* Build file system */
+gulp.task('buildfs', ['clean', 'files', 'html']);
+gulp.task('buildfs2', ['clean', 'files', 'inline']);
+gulp.task('default', ['buildfs']);

samples/HttpServer_ConfigNetwork/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "esp8266-filesystem-builder",
+  "version": "0.1.0",
+  "description": "Gulp based build script for ESP8266 file system files",
+  "main": "gulpfile.js",
+  "author": "Xose Pérez <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "del": "^2.2.1",
+    "gulp": "^3.9.1",
+    "gulp-clean-css": "^2.0.10",
+    "gulp-gzip": "^1.4.0",
+    "gulp-htmlmin": "^2.0.0",
+    "gulp-if": "^2.0.1",
+    "gulp-inline": "^0.1.1",
+    "gulp-plumber": "^1.1.0",
+    "gulp-uglify": "^1.5.3",
+    "gulp-useref": "^3.1.2",
+    "yargs": "^5.0.0"
+  },
+  "dependencies": {}
+}

samples/HttpServer_ConfigNetwork/web/build/.lastModified

@@ -0,0 +1 @@
+Mon, 24 Jul 2017 17:20:31 GMT