384 lines
17 KiB
Markdown
384 lines
17 KiB
Markdown
node-ff-assets
|
|
=========
|
|
|
|
A Node.js library providing automatic site assets aggregation and content modifiers.
|
|
|
|
## Installation
|
|
|
|
npm install node-ff-assets --save
|
|
|
|
## Target/Source locations
|
|
|
|
The asset target file location is a derived value.
|
|
Its created by mapping the buildConfig.linkTarget in the buildConfig.linkMapping keys
|
|
to get a prefix for the local file system location.
|
|
The same is also true for the buildConfig.linkSources list which are url paths
|
|
which need to be mapped to the file system files by the buildConfig.linkMapping data.
|
|
|
|
linkTarget: '/static/js/ffa/assets.js',
|
|
linkMapping: ['/static/':'www_static/',],
|
|
linkSources: ['/static/js/site.js','/static/js/ffa/jquery-2.1.3/jquery.js@http://code.jquery.com/jquery-2.1.3.js'],
|
|
Gives;
|
|
public js file: http://localhost:8080/static/js/site.js
|
|
public js file: http://localhost:8080/static/js/ffa/assets.js
|
|
public js file: http://localhost:8080/static/js/ffa/jquery-2.1.3/jquery.js
|
|
filesystem file: www_static/js/site.js
|
|
filesystem file: www_static/js/ffa/assets.js
|
|
filesystem file: www_static/js/ffa/jquery-2.1.3/jquery.js
|
|
.gitignore line: www_static/js/ffa
|
|
|
|
if buildConfig.linkTargetSingleResult = true render
|
|
static/js/ffa/assets.js
|
|
else
|
|
static/js/site.js
|
|
static/js/ffa/jquery-2.1.3/jquery.js
|
|
|
|
## Usage
|
|
|
|
// Create config object
|
|
var buildConfig = {
|
|
downloadStartDelay: null,
|
|
downloadForce: false,
|
|
downloadOptions: {
|
|
timeout: 10000,
|
|
maxResponseLength: 10000000,
|
|
agent: 'node-ff-assets asset fetcher'
|
|
},
|
|
|
|
linkTargetSingleResult: true,
|
|
linkTarget: '/static-uri/js/assets.js',
|
|
linkSources: [
|
|
'/static/js/lib/jquery-2.1.3/jquery.js@http://code.jquery.com/jquery-2.1.3.js',
|
|
'/static/js/lib/foobar/dyna.js@@http://localhost/force-download-on-every-build-for-this-file.js',
|
|
'/static/js/site.js'
|
|
],
|
|
linkMapping: ['/static-uri/':'www_static/',],
|
|
|
|
assetHeader: '\n/* node-ff-assets: begin */\n\n',
|
|
assetFooter: '\n/* node-ff-assets: end */\n\n',
|
|
assetSeperator: '\n/* node-ff-assets: next */\n',
|
|
}
|
|
|
|
// Development override, targets still gets build but result is full list of assets.
|
|
buildConfig.linkTargetSingleResult = false;
|
|
|
|
// Push local js/css files as uri sources into config
|
|
NodeFFAssets.pushLinkSourcesSync(buildConfig, '/static-uri/js/', 'www_public/js/');
|
|
NodeFFAssets.pushLinkSourcesSync(buildConfig, '/static-uri/js/model/', 'www_public/js/model/');
|
|
NodeFFAssets.pushLinkSourcesSync(buildConfig, '/static-uri/js/model/meta', 'www_public/js/model/meta');
|
|
|
|
// Require library
|
|
var NodeFFAssets = require('node-ff-assets');
|
|
|
|
// Create simpel builder
|
|
var assetBuilderA = new NodeFFAssets.ResourceBuilder(buildConfig);
|
|
|
|
// Same as default, plain inclusion of content.
|
|
var assetBuilderB = new NodeFFAssets.ResourceBuilder(buildConfig,NodeFFAssets.FunctionFactory.Constructor.readFile());
|
|
|
|
// Minify content, with optional Minify config options.
|
|
var assetBuilderC = new NodeFFAssets.ResourceBuilder(buildConfig,NodeFFAssets.FunctionFactory.Constructor.readFileMinify());
|
|
var assetBuilderD = new NodeFFAssets.ResourceBuilder(buildConfig,NodeFFAssets.FunctionFactory.Constructor.readFileMinify(minifyOptions));
|
|
|
|
// Third party content modifiers, with readFile function
|
|
var assetBuilderE = new NodeFFAssets.ResourceBuilder(buildConfig,function(file,callback) {
|
|
// should return file data to callback(err,data);
|
|
);
|
|
|
|
// Hook events
|
|
assetBuilderA.on('begin', function() { });
|
|
assetBuilderA.on('end', function() { });
|
|
assetBuilderA.on('log', function(logLevel, logMessage) { });
|
|
assetBuilderA.on('error', function(err) { });
|
|
assetBuilderA.on('result', function(resultValue) { });
|
|
assetBuilderA.on('file-download-pre', function(remoteUrl) { });
|
|
assetBuilderA.on('file-download-post', function(localFile) { });
|
|
assetBuilderA.on('file-read-pre', function(localFile) { });
|
|
assetBuilderA.on('file-read-post', function(localFile) { });
|
|
assetBuilderA.on('file-write-pre', function(targetFile) { });
|
|
assetBuilderA.on('file-write-post', function(targetFile) { });
|
|
|
|
// Use build in event functions
|
|
assetBuilderB.on('log', NodeFFAssets.FunctionFactory.Event.log.console('css'));
|
|
assetBuilderB.on('result', NodeFFAssets.FunctionFactory.Event.result.objectSet(server,'includeCssFiles'));
|
|
|
|
// Run builder
|
|
assetBuilderC.run(function(err) {
|
|
//done
|
|
});
|
|
|
|
// Run all builders
|
|
NodeFFAssets.runAll([
|
|
assetBuilderA,
|
|
assetBuilderB,
|
|
assetBuilderC,
|
|
], function(err) {
|
|
// all done
|
|
});
|
|
|
|
// Render result
|
|
function renderIndex(app) {
|
|
return function (req, res, next) {
|
|
res.render('index', {
|
|
includeCssFiles: app.get('includeCssFiles'),
|
|
includeJsFiles: app.get('includeJsFiles'),
|
|
});
|
|
}
|
|
};
|
|
app.get('/',renderIndex(app));
|
|
|
|
// Template
|
|
index.jade
|
|
doctype html
|
|
html(lang='en',ng-app='ffUI')
|
|
head
|
|
base(href='/ui')
|
|
title=title
|
|
meta(charset='UTF-8')
|
|
meta(http-equiv='X-UA-Compatible' content='IE=edge')
|
|
meta(name='viewport' content='width=device-width, initial-scale=1')
|
|
meta(name='keywords' content=keywords)
|
|
each cssFile in includeCssFiles
|
|
link(rel='stylesheet' href='#{cssFile}')
|
|
body
|
|
div(id='wrapper')
|
|
div(ng-include='\'/ui/include/html/layout/header\'')
|
|
div(id='page-wrapper')
|
|
div(id='container-fluid')
|
|
div(ng-view)
|
|
div(ng-include='\'/ui/include/html/layout/footer\'')
|
|
each jsFile in includeJsFiles
|
|
script(src='#{jsFile}')
|
|
|
|
|
|
## Example mapping node_modules
|
|
|
|
Some js libraries can be directly served from node_packages and thus also be
|
|
included the node-ff-assets output, but these required there own reverse mapping;
|
|
|
|
'/static/module/bootstrap/': 'node_modules/bootstrap/dist/',
|
|
|
|
This will let the parse find the /static/module/bootstrap/css/bootstrap.css resource and
|
|
maps it the local file; node_modules/bootstrap/dist/css/bootstrap.css
|
|
|
|
// note1: www_static/[js/css]/lib is versioned ingored.
|
|
// note2: server routes;
|
|
// app.use('/static',express.static(path.join(__dirname,'www_static')));
|
|
// app.use('/static/module/bootstrap',express.static(path.join(__dirname,'node_modules/bootstrap/dist')));
|
|
|
|
var NodeFFAssets = require('node-ff-assets');
|
|
var buildCss = new NodeFFAssets.ResourceBuilder({
|
|
linkMapping: {
|
|
'/static/module/bootstrap/': 'node_modules/bootstrap/dist/',
|
|
'/static/': 'www_static/',
|
|
},
|
|
linkTarget: '/static/css/lib/assets.css',
|
|
linkSources: [
|
|
'/static/module/bootstrap/css/bootstrap.css',
|
|
'/static/css/site.css',
|
|
],
|
|
});
|
|
buildCss.on('log', NodeFFAssets.FunctionFactory.Event.log.console('css'));
|
|
buildCss.on('result', NodeFFAssets.FunctionFactory.Event.result.objectSet(server,'includeCssFiles'));
|
|
buildCss.run(function(err) {
|
|
// done
|
|
})
|
|
|
|
// Render result as in usage example.
|
|
|
|
|
|
## Example complex
|
|
|
|
var LogWinston = require('winston');
|
|
var Log = LogWinston.loggers.get('main');
|
|
var Mongoose = require('mongoose');
|
|
var NodeFFAssets = require('node-ff-assets');
|
|
|
|
function createBuildConfig(type) {
|
|
var singleResult = 'false' != process.env.DEV_ASSETS_SINGLE_RESULT;
|
|
var linkMapping = {
|
|
'/static/module/bootstrap/': 'node_modules/bootstrap/dist/',
|
|
'/static/module/flot/': 'node_modules/flot/',
|
|
'/static/': 'www_static/',
|
|
}
|
|
if (type == 'css') {
|
|
return {
|
|
linkMapping: linkMapping,
|
|
linkTargetSingleResult: singleResult,
|
|
linkTarget: '/static/css/lib/assets.css',
|
|
linkSources: [
|
|
'/static/module/bootstrap/css/bootstrap.css',
|
|
],
|
|
};
|
|
} else {
|
|
return {
|
|
downloadStartDelay: 200,
|
|
linkTargetSingleResult: singleResult,
|
|
linkMapping: linkMapping,
|
|
linkTarget: '/static/js/lib/assets.js',
|
|
linkSources: [
|
|
'/static/js/lib/jquery-2.1.3/jquery.js@http://code.jquery.com/jquery-2.1.3.js',
|
|
'/static/module/bootstrap/js/bootstrap.js',
|
|
'/static/module/flot/jquery.flot.js',
|
|
'/static/module/flot/jquery.flot.resize.js',
|
|
'/static/module/flot/jquery.flot.pie.js',
|
|
'/static/js/lib/angularjs-1.4.0-b4/angular.js@https://code.angularjs.org/1.4.0-beta.4/angular.js',
|
|
'/static/js/lib/angularjs-1.4.0-b4/angular-route.js@https://code.angularjs.org/1.4.0-beta.4/angular-route.js',
|
|
'/static/js/lib/angularjs-1.4.0-b4/angular-resource.js@https://code.angularjs.org/1.4.0-beta.4/angular-resource.js',
|
|
'/static/js/lib/angularjs-1.4.0-b4/angular-touch.js@https://code.angularjs.org/1.4.0-beta.4/angular-touch.js',
|
|
],
|
|
};
|
|
}
|
|
}
|
|
|
|
function createBuildLogger(logType) {
|
|
return function(logLevel, logMessage) {
|
|
Log.log(logLevel, 'node-ff-assets-'+logType+' '+logMessage);
|
|
}
|
|
};
|
|
|
|
function buildAssets(server,callback) {
|
|
// Create asset config
|
|
var buildJsConfig = createBuildConfig('js');
|
|
var buildCssConfig = createBuildConfig('css');
|
|
|
|
// Extends js/css lists with local folders
|
|
NodeFFAssets.pushLinkSourcesSync(buildJsConfig, '/static/js/', 'www_static/js/');
|
|
NodeFFAssets.pushLinkSourcesSync(buildJsConfig, '/static/js/controller/', 'www_static/js/controller/');
|
|
NodeFFAssets.pushLinkSourcesSync(buildCssConfig, '/static/css/', 'www_static/css/');
|
|
|
|
// Extend js list with crud entries
|
|
var localPort = server.get('server config').options.http.port;
|
|
var modelNames = Mongoose.connection.modelNames();
|
|
for (i = 0; i < modelNames.length; i++) {
|
|
var modelName = modelNames[i];
|
|
var assetLink = '/static/js/lib/xcrud/'+modelName+'.js@@http://localhost:'+localPort+'/ui/include/js/controller/'+modelName;
|
|
buildJsConfig.linkSources.push(assetLink);
|
|
}
|
|
|
|
// Create builders
|
|
var buildJs = new NodeFFAssets.ResourceBuilder(buildJsConfig); // note: Minify fails here on some js.
|
|
var buildCss = new NodeFFAssets.ResourceBuilder(buildCssConfig,NodeFFAssets.FunctionFactory.Constructor.readFileMinify());
|
|
|
|
// Config build events
|
|
buildJs.on ('log', createBuildLogger('js'));
|
|
buildCss.on('log', createBuildLogger('css'));
|
|
buildJs.on ('result', NodeFFAssets.FunctionFactory.Event.result.objectSet(server,'includeJsFiles'));
|
|
buildCss.on('result', NodeFFAssets.FunctionFactory.Event.result.objectSet(server,'includeCssFiles'));
|
|
|
|
// Run builders
|
|
NodeFFAssets.runAll([buildCss,buildJs],callback);
|
|
}
|
|
|
|
exports.build = function(server) {
|
|
buildAssets(server,function() {
|
|
Log.info('Server init done.');
|
|
});
|
|
}
|
|
|
|
// Result First run
|
|
info: node-ff-assets-css build begin for: /static/css/lib/assets.css
|
|
debug: node-ff-assets-css readFile: node_modules/bootstrap/dist/css/bootstrap.css size: 285496
|
|
debug: node-ff-assets-css readFile: www_static/css/boot.css size: 1606
|
|
debug: node-ff-assets-css readFile: www_static/css/flot.css size: 82
|
|
debug: node-ff-assets-css readFile: www_static/css/panel.css size: 545
|
|
debug: node-ff-assets-css readFile: www_static/css/style.css size: 10419
|
|
debug: node-ff-assets-css target size: 298318
|
|
info: node-ff-assets-css build result size: 1 from: 5
|
|
info: node-ff-assets-css build done in: 33 ms.
|
|
info: node-ff-assets-js build begin for: /static/js/lib/assets.js
|
|
debug: node-ff-assets-js downloadFile: http://code.jquery.com/jquery-2.1.3.js
|
|
debug: node-ff-assets-js downloadFile: https://code.angularjs.org/1.4.0-beta.4/angular.js
|
|
debug: node-ff-assets-js downloadFile: https://code.angularjs.org/1.4.0-beta.4/angular-route.js
|
|
debug: node-ff-assets-js downloadFile: https://code.angularjs.org/1.4.0-beta.4/angular-resource.js
|
|
debug: node-ff-assets-js downloadFile: https://code.angularjs.org/1.4.0-beta.4/angular-touch.js
|
|
debug: node-ff-assets-js downloadFile: http://localhost:8008/ui/include/js/controller/test1
|
|
GET /ui/include/js/controller/test1 200 7.931 ms - -
|
|
debug: node-ff-assets-js downloadFile: http://localhost:8008/ui/include/js/controller/test2
|
|
GET /ui/include/js/controller/test2 200 5.215 ms - -
|
|
debug: node-ff-assets-js downloadFile: http://localhost:8008/ui/include/js/controller/test3
|
|
GET /ui/include/js/controller/test3 200 1.583 ms - -
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/jquery-2.1.3/jquery.js size: 247387
|
|
debug: node-ff-assets-js readFile: node_modules/bootstrap/dist/js/bootstrap.js size: 66732
|
|
debug: node-ff-assets-js readFile: node_modules/flot/jquery.flot.js size: 110008
|
|
debug: node-ff-assets-js readFile: node_modules/flot/jquery.flot.resize.js size: 2504
|
|
debug: node-ff-assets-js readFile: node_modules/flot/jquery.flot.pie.js size: 23405
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/angularjs-1.4.0-b4/angular.js size: 988198
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/angularjs-1.4.0-b4/angular-route.js size: 35796
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/angularjs-1.4.0-b4/angular-resource.js size: 26780
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/angularjs-1.4.0-b4/angular-touch.js size: 22887
|
|
debug: node-ff-assets-js readFile: www_static/js/app-directives.js size: 185
|
|
debug: node-ff-assets-js readFile: www_static/js/app-filters.js size: 202
|
|
debug: node-ff-assets-js readFile: www_static/js/app-services.js size: 80
|
|
debug: node-ff-assets-js readFile: www_static/js/app.js size: 766
|
|
debug: node-ff-assets-js readFile: www_static/js/controller/page-about.js size: 364
|
|
debug: node-ff-assets-js readFile: www_static/js/controller/page-foobar.js size: 361
|
|
debug: node-ff-assets-js readFile: www_static/js/controller/page-index.js size: 351
|
|
debug: node-ff-assets-js readFile: www_static/js/controller/page-help.js size: 376
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/xcrud/test1.js size: 2010
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/xcrud/test2.js size: 2138
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/xcrud/test3.js size: 2218
|
|
debug: node-ff-assets-js target size: 1540945
|
|
info: node-ff-assets-js build result size: 1 from: 24
|
|
info: node-ff-assets-js build done in: 3497 ms.
|
|
info: Server init done.
|
|
|
|
// Result Next runs
|
|
info: node-ff-assets-css build begin for: /static/css/lib/assets.css
|
|
debug: node-ff-assets-css readFile: node_modules/bootstrap/dist/css/bootstrap.css size: 285496
|
|
debug: node-ff-assets-css readFile: www_static/css/boot.css size: 1606
|
|
debug: node-ff-assets-css readFile: www_static/css/flot.css size: 82
|
|
debug: node-ff-assets-css readFile: www_static/css/panel.css size: 545
|
|
debug: node-ff-assets-css readFile: www_static/css/style.css size: 10419
|
|
debug: node-ff-assets-css target size: 298318
|
|
info: node-ff-assets-css build result size: 1 from: 5
|
|
info: node-ff-assets-css build done in: 36 ms.
|
|
info: node-ff-assets-js build begin for: /static/js/lib/assets.js
|
|
debug: node-ff-assets-js downloadFile: http://localhost:8008/ui/include/js/controller/test1
|
|
GET /ui/include/js/controller/test1 200 7.931 ms - -
|
|
debug: node-ff-assets-js downloadFile: http://localhost:8008/ui/include/js/controller/test2
|
|
GET /ui/include/js/controller/test2 200 5.215 ms - -
|
|
debug: node-ff-assets-js downloadFile: http://localhost:8008/ui/include/js/controller/test3
|
|
GET /ui/include/js/controller/test3 200 1.583 ms - -
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/jquery-2.1.3/jquery.js size: 247387
|
|
debug: node-ff-assets-js readFile: node_modules/bootstrap/dist/js/bootstrap.js size: 66732
|
|
debug: node-ff-assets-js readFile: node_modules/flot/jquery.flot.js size: 110008
|
|
debug: node-ff-assets-js readFile: node_modules/flot/jquery.flot.resize.js size: 2504
|
|
debug: node-ff-assets-js readFile: node_modules/flot/jquery.flot.pie.js size: 23405
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/angularjs-1.4.0-b4/angular.js size: 988198
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/angularjs-1.4.0-b4/angular-route.js size: 35796
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/angularjs-1.4.0-b4/angular-resource.js size: 26780
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/angularjs-1.4.0-b4/angular-touch.js size: 22887
|
|
debug: node-ff-assets-js readFile: www_static/js/app-directives.js size: 185
|
|
debug: node-ff-assets-js readFile: www_static/js/app-filters.js size: 202
|
|
debug: node-ff-assets-js readFile: www_static/js/app-services.js size: 80
|
|
debug: node-ff-assets-js readFile: www_static/js/app.js size: 766
|
|
debug: node-ff-assets-js readFile: www_static/js/controller/page-about.js size: 364
|
|
debug: node-ff-assets-js readFile: www_static/js/controller/page-foobar.js size: 361
|
|
debug: node-ff-assets-js readFile: www_static/js/controller/page-index.js size: 351
|
|
debug: node-ff-assets-js readFile: www_static/js/controller/page-help.js size: 376
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/xcrud/test1.js size: 2010
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/xcrud/test2.js size: 2138
|
|
debug: node-ff-assets-js readFile: www_static/js/lib/xcrud/test3.js size: 2218
|
|
debug: node-ff-assets-js target size: 1540945
|
|
info: node-ff-assets-js build result size: 1 from: 24
|
|
info: node-ff-assets-js build done in: 105 ms.
|
|
info: Server init done.
|
|
|
|
## Tests
|
|
|
|
npm test (TODO)
|
|
|
|
## Contributing
|
|
|
|
In lieu of a formal styleguide, take care to maintain the existing coding style.
|
|
Add unit tests for any new or changed functionality. Lint and test your code.
|
|
|
|
## Release History
|
|
|
|
* 0.1.2 added objectAdd
|
|
|
|
* 0.1.1 Doc updates
|
|
|
|
* 0.1.0 Initial release
|