Added gulp and cleaned code and readme.
This commit is contained in:
parent
0fd0f026ec
commit
b63a9ca448
3
.gitignore
vendored
3
.gitignore
vendored
|
@ -2,6 +2,9 @@
|
||||||
# es5-ff-spa-loader git ignore rules
|
# es5-ff-spa-loader git ignore rules
|
||||||
#
|
#
|
||||||
|
|
||||||
|
# Ignore release files
|
||||||
|
dist
|
||||||
|
|
||||||
# Ignore npm files
|
# Ignore npm files
|
||||||
node_modules
|
node_modules
|
||||||
npm-debug.log
|
npm-debug.log
|
||||||
|
|
113
README.md
113
README.md
|
@ -1,50 +1,127 @@
|
||||||
es5-ff-spa-loader
|
es5-ff-spa-loader
|
||||||
=========
|
=========
|
||||||
|
|
||||||
A javascript library providing server defined loading of resources for a single page application.
|
A javascript library providing server defined loading of assets for a single page application.
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
npm --save install es5-ff-spa-loader (TODO)
|
npm --save install es5-ff-spa-loader
|
||||||
|
|
||||||
Then use the es5-ff-spa-loader.js in header as script resource or inline in body.
|
Then use the es5-ff-spa-loader.js in header as script resource or inline in body.
|
||||||
|
|
||||||
## Usage Mobile
|
## Features
|
||||||
|
|
||||||
Single index.html
|
* Assets caching for offline use.
|
||||||
|
* Assets hashing for fast syncing.
|
||||||
|
* Assets types: js,css,cssData
|
||||||
|
* Caching backends: null,localStorage,webSqlDB,sqllite
|
||||||
|
* Server url question ui.
|
||||||
|
* Loader error ui.
|
||||||
|
* Build-in Cordova booting.
|
||||||
|
* Build-in AngularJS booting.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
### Usage Multi Server (Minimal)
|
||||||
|
|
||||||
|
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
||||||
|
FFSpaLoader.start();
|
||||||
|
|
||||||
|
### Usage Single Server
|
||||||
|
|
||||||
FFSpaLoader.options.debug.enable = true;
|
|
||||||
FFSpaLoader.options.boot.angular.modules.push('exampleUI');
|
|
||||||
FFSpaLoader.options.server.url = 'http://myserver';
|
FFSpaLoader.options.server.url = 'http://myserver';
|
||||||
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
||||||
FFSpaLoader.start();
|
FFSpaLoader.start();
|
||||||
|
|
||||||
|
### Usage Angular
|
||||||
|
|
||||||
## Usage Web
|
|
||||||
|
|
||||||
Single index.html
|
|
||||||
|
|
||||||
FFSpaLoader.options.debug.enable = true;
|
FFSpaLoader.options.debug.enable = true;
|
||||||
FFSpaLoader.options.boot.angular.modules.push('exampleUI');
|
FFSpaLoader.options.boot.angular.modules.push('exampleUI');
|
||||||
FFSpaLoader.options.server.url = 'http://myserver';
|
FFSpaLoader.options.server.url = 'http://myserver';
|
||||||
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
||||||
FFSpaLoader.start(function() {
|
FFSpaLoader.start(function() {
|
||||||
console.log('FFExample.boot done');
|
console.log('FFExample.boot done');
|
||||||
});
|
});
|
||||||
|
|
||||||
## Usage Multi Server
|
## Assets format
|
||||||
|
|
||||||
|
{
|
||||||
|
"data": {
|
||||||
|
"resources": [
|
||||||
|
{
|
||||||
|
"url": "/static/js/assets.js",
|
||||||
|
"type": "js",
|
||||||
|
"hash": -164319899
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "/static/css/assets.css",
|
||||||
|
"type": "css",
|
||||||
|
"hash": 1391550981
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"url": "/static/css/assets-data.css",
|
||||||
|
"type": "cssData",
|
||||||
|
"hash": 1371811412
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
The hash key is required as only on hash change the resource will be downloaded again, so multiple small files makes updates faster.
|
||||||
|
|
||||||
Leave out the 'FFSpaLoader.options.server.url' option then the user will be promted to input
|
|
||||||
the server on first boot.
|
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
|
|
||||||
* options.debug.enable = Enable console debug output.
|
* debug.enable = Enable debug output. (default: false)
|
||||||
* TODO
|
* debug.handler = Prints/log debug message. (default: console.log)
|
||||||
|
* debug.prefix = Debug message prefix. (default: 'FFSpaLoader.')
|
||||||
|
* error.handler = The error handler. (default: internal error handler ui)
|
||||||
|
* error.title = The error title. (default: 'Loader Error');
|
||||||
|
* error.style = The error ui css style. (default: red border box)
|
||||||
|
* boot.cordova.enable = Use deviceready event to boot when cordova is detected. (default: true)
|
||||||
|
* boot.cordova.timeout = Boot after timeout when deviceready event is not received. (default: 4096)
|
||||||
|
* boot.cordova.flag = The window flag which is set when cordova is booted. (default: 'FFCordovaDevice')
|
||||||
|
* boot.angular.enable = Auto bootstrap angular modules. (default: true)
|
||||||
|
* boot.angular.modules = The angular modules to boot. (default: empty)
|
||||||
|
* server.url = The server url like 'https://myhost', when null the user will get promted to input it. (default: null)
|
||||||
|
* server.assets = The server path to the assets resources definition file, is required (default: null)
|
||||||
|
* server.timeout = The timeout to download the server resources.
|
||||||
|
* server.flag = The window flag which is set when the server.url is know. (default: 'FFServerUrl')
|
||||||
|
* server.question.transport = The transport to prefix the server.url with. (default: 'http://')
|
||||||
|
* server.question.title = The question ui title. (default: 'Server')
|
||||||
|
* server.question.text = The question ui text. (default: 'Please provide the server name;')
|
||||||
|
* server.question.style = The question ui css style.(note: pending change) (default: green border box)
|
||||||
|
* cache.meta = The cache backend for the meta information, null is auto select. (default: null)
|
||||||
|
* cache.js = The cache backend for for js, null is auto select. (default: null)
|
||||||
|
* cache.css = The cache backend for for css, null is auto select. (default: null)
|
||||||
|
* cache.cssData = The cache backend for for cssData, null is auto select. (default: null)
|
||||||
|
|
||||||
|
## Cache Config
|
||||||
|
|
||||||
|
Per default all cache type as in auto select mode which detect and used the following;
|
||||||
|
|
||||||
|
* sqlitePlugin
|
||||||
|
* openDatabase
|
||||||
|
* localStorage
|
||||||
|
* none
|
||||||
|
|
||||||
|
More custom types are possible like; (todo: needs testing)
|
||||||
|
|
||||||
|
FFSpaLoader.options.cache.meta = null; // use auto -> TODO: currently other cached need meta needs fixing.
|
||||||
|
FFSpaLoader.options.cache.js = false;
|
||||||
|
FFSpaLoader.options.cache.css = false;
|
||||||
|
FFSpaLoader.options.cache.cssData = false;
|
||||||
|
|
||||||
|
if (FFSpaLoader.factory.detect.localStorage()) {
|
||||||
|
FFSpaLoader.options.cache.css = FFSpaLoader.factory.cache.localStorage;
|
||||||
|
FFSpaLoader.options.cache.cssData = FFSpaLoader.factory.cache.localStorage;
|
||||||
|
}
|
||||||
|
FFSpaLoader.options.server.assets = '/api/path/to/spa/client/resources';
|
||||||
|
FFSpaLoader.start();
|
||||||
|
|
||||||
|
|
||||||
## Example Application
|
## Example Application
|
||||||
|
|
||||||
There is a fully working express example application in the example folder.
|
There is a fully working nodejs example application in the example folder.
|
||||||
|
|
||||||
## Tested Browsers
|
## Tested Browsers
|
||||||
|
|
||||||
|
@ -55,7 +132,7 @@ A javascript library providing server defined loading of resources for a single
|
||||||
|
|
||||||
## Todo
|
## Todo
|
||||||
|
|
||||||
* Auto cache cleanup code.
|
* Auto cache cleanup code. (!! required before production !!)
|
||||||
* test in production
|
* test in production
|
||||||
* Server header set+check support
|
* Server header set+check support
|
||||||
* Redo css(?divs) of server question
|
* Redo css(?divs) of server question
|
||||||
|
|
|
@ -27,16 +27,6 @@
|
||||||
* FFSpaLoader is an assets loader for single page applications.
|
* FFSpaLoader is an assets loader for single page applications.
|
||||||
* Its build around the concept the there is only a single static index.html which
|
* Its build around the concept the there is only a single static index.html which
|
||||||
* synces all its assets to local cache for offline and or fast page loads.
|
* synces all its assets to local cache for offline and or fast page loads.
|
||||||
*
|
|
||||||
* Features:
|
|
||||||
* - Assets caching for offline use.
|
|
||||||
* - Assets hashing for fast syncing.
|
|
||||||
* - Assets types: js,css,cssData
|
|
||||||
* - Caching backends: null,localStorage,webSqlDB,sqllite
|
|
||||||
* - Server url question ui.
|
|
||||||
* - Loader error ui.
|
|
||||||
* - Build-in Cordova booting.
|
|
||||||
* - Build-in AngularJS booting.
|
|
||||||
*
|
*
|
||||||
* @module FFSpaLoader
|
* @module FFSpaLoader
|
||||||
*/
|
*/
|
||||||
|
|
54
gulpfile.js
Normal file
54
gulpfile.js
Normal file
|
@ -0,0 +1,54 @@
|
||||||
|
|
||||||
|
var gulp = require('gulp');
|
||||||
|
var uglify = require('gulp-uglify');
|
||||||
|
var rename = require('gulp-rename');
|
||||||
|
var clean = require('gulp-clean');
|
||||||
|
var srcmaps = require('gulp-sourcemaps');
|
||||||
|
var mocha = require('gulp-mocha');
|
||||||
|
var jsdoc = require('gulp-jsdoc3');
|
||||||
|
|
||||||
|
var srcPath = './';
|
||||||
|
var srcFile = 'es5-ff-spa-loader.js';
|
||||||
|
var distPath = 'dist/';
|
||||||
|
var testSrc = 'test/*.js';
|
||||||
|
|
||||||
|
gulp.task('clean', function() {
|
||||||
|
return gulp.src(distPath).pipe(clean());
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('buildScript', ['test'], function() {
|
||||||
|
gulp.src(srcFile, {cwd: srcPath}).pipe(gulp.dest(distPath));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('buildScriptMin', ['buildScript'], function() {
|
||||||
|
gulp.src(srcFile, {cwd: srcPath})
|
||||||
|
.pipe(srcmaps.init())
|
||||||
|
.pipe(uglify({/*preserveComments: 'license'*/}))
|
||||||
|
.pipe(rename({ extname: '.min.js' }))
|
||||||
|
.pipe(srcmaps.write('.'))
|
||||||
|
.pipe(gulp.dest(distPath));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('testMocha',['clean'], function() {
|
||||||
|
process.env.JUNIT_REPORT_PATH = 'test/data/report.xml';
|
||||||
|
return gulp.src(testSrc, {read: false}).pipe(mocha({reporter: 'mocha-jenkins-reporter'}));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('buildJSDoc', function (cb) {
|
||||||
|
var jsdocConfig = {
|
||||||
|
opts: {
|
||||||
|
destination: 'dist/jsdoc'
|
||||||
|
},
|
||||||
|
templates: {
|
||||||
|
thema: 'cerulean',
|
||||||
|
navType: 'vertical',
|
||||||
|
linenums: true
|
||||||
|
}
|
||||||
|
};
|
||||||
|
gulp.src(srcFile, {read: false}).pipe(jsdoc(jsdocConfig, cb));
|
||||||
|
});
|
||||||
|
|
||||||
|
gulp.task('test', ['clean','testMocha']);
|
||||||
|
gulp.task('build', ['test','buildScript','buildScriptMin'/*,'buildJSDoc'*/]);
|
||||||
|
|
||||||
|
|
26
package.json
26
package.json
|
@ -3,11 +3,15 @@
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"description": "Javascript Single Page Application Loader",
|
"description": "Javascript Single Page Application Loader",
|
||||||
"main": "es5-ff-spa-loader.js",
|
"main": "es5-ff-spa-loader.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "export JUNIT_REPORT_PATH=test/data/report.xml;export JUNIT_REPORT_STACK=1;node_modules/mocha/bin/mocha --reporter mocha-jenkins-reporter"
|
"prepublish": "gulp build",
|
||||||
|
"clean": "gulp clean",
|
||||||
|
"build": "gulp build",
|
||||||
|
"test": "gulp test"
|
||||||
},
|
},
|
||||||
"author": "Willem <willem.git.2016@forwardfire.net> (http://forwardfire.net/)",
|
"author": "Willem <willem.git.2016@forwardfire.net> (http://forwardfire.net/)",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
|
"offline",
|
||||||
"website",
|
"website",
|
||||||
"assets",
|
"assets",
|
||||||
"js",
|
"js",
|
||||||
|
@ -27,16 +31,20 @@
|
||||||
"url": "https://bitbucket.org/im_ik/es5-ff-spa-loader.git"
|
"url": "https://bitbucket.org/im_ik/es5-ff-spa-loader.git"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"jsdoc": "^3.4.0",
|
"gulp": "^3.9.0",
|
||||||
"mocha": "2.2.x",
|
"gulp-clean": "^0.3.1",
|
||||||
|
"gulp-jsdoc3": "^0.1.0",
|
||||||
|
"gulp-mocha": "^2.2.0",
|
||||||
|
"gulp-rename": "^1.2.2",
|
||||||
|
"gulp-sourcemaps": "^1.6.0",
|
||||||
|
"gulp-uglify": "^1.5.1",
|
||||||
"mocha-jenkins-reporter": "0.1.x",
|
"mocha-jenkins-reporter": "0.1.x",
|
||||||
"mocha-jshint": "2.2.x"
|
"mocha-jshint": "2.2.x"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {},
|
||||||
},
|
|
||||||
"files": [
|
"files": [
|
||||||
"README.md",
|
"README.md",
|
||||||
"es5-ff-spa-loader.js",
|
"example/",
|
||||||
"example/"
|
"dist/"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue