Added build script for minimalist version

This commit is contained in:
jos 2016-01-12 11:38:38 +01:00
parent 9daffa857d
commit 30eea90614
5 changed files with 203 additions and 24 deletions

View File

@ -3,6 +3,13 @@
https://github.com/josdejong/jsoneditor
## not yet released, version 5.1.0
- Implemented support for JSON schema validation, powered by `ajv`.
- Added a minimalist bundle to the `dist` folder, excluding `ace` and `ajv`.
- Fixed an error throw when switching to mode "code" via the menu.
## 2015-12-31, version 5.0.1
- Fixed a bug in positioning of the context menu for multiple selected nodes.

View File

@ -9,9 +9,11 @@ var webpack = require('webpack');
var uglify = require('uglify-js');
var NAME = 'jsoneditor';
var NAME_MINIMALIST = 'jsoneditor-minimalist';
var ENTRY = './src/js/JSONEditor.js';
var HEADER = './src/js/header.js';
var IMAGE = './src/css/img/jsoneditor-icons.svg';
var DOCS = './src/docs/*';
var DIST = './dist';
// generate banner with today's date and correct version
@ -29,7 +31,8 @@ var bannerPlugin = new webpack.BannerPlugin(createBanner(), {
raw: true
});
var webpackConfig = {
// create a single instance of the compiler to allow caching
var compiler = webpack({
entry: ENTRY,
output: {
library: 'JSONEditor',
@ -39,17 +42,48 @@ var webpackConfig = {
},
plugins: [ bannerPlugin ],
cache: true
};
});
var uglifyConfig = {
outSourceMap: NAME + '.map',
// create a single instance of the compiler to allow caching
var compilerMinimalist = webpack({
entry: ENTRY,
output: {
library: 'JSONEditor',
libraryTarget: 'umd',
path: DIST,
filename: NAME_MINIMALIST + '.js'
},
plugins: [
bannerPlugin,
new webpack.IgnorePlugin(new RegExp('^brace')),
new webpack.IgnorePlugin(new RegExp('^ajv'))
],
//exclude: [
// 'brace',
// 'ajv/dist/ajv.bundle.js'
//],
cache: true
});
function minify(name) {
var result = uglify.minify([DIST + '/' + name + '.js'], {
outSourceMap: name + '.map',
output: {
comments: /@license/
}
};
});
// create a single instance of the compiler to allow caching
var compiler = webpack(webpackConfig);
var fileMin = DIST + '/' + name + '.min.js';
var fileMap = DIST + '/' + name + '.map';
fs.writeFileSync(fileMin, result.code);
fs.writeFileSync(fileMap, result.map);
gutil.log('Minified ' + fileMin);
gutil.log('Mapped ' + fileMap);
}
// make dist and dist/img folders
gulp.task('mkdir', function () {
@ -73,6 +107,22 @@ gulp.task('bundle', ['mkdir'], function (done) {
});
});
// bundle minimalist version of javascript
gulp.task('bundle-minimalist', ['mkdir'], function (done) {
// update the banner contents (has a date in it which should stay up to date)
bannerPlugin.banner = createBanner();
compilerMinimalist.run(function (err, stats) {
if (err) {
gutil.log(err);
}
gutil.log('bundled ' + NAME_MINIMALIST + '.js');
done();
});
});
// bundle css
gulp.task('bundle-css', ['mkdir'], function () {
gulp.src([
@ -98,18 +148,19 @@ gulp.task('copy-img', ['mkdir'], function () {
gutil.log('Copied images');
});
// create a folder img and copy the icons
gulp.task('copy-docs', ['mkdir'], function () {
gulp.src(DOCS)
.pipe(gulp.dest(DIST));
gutil.log('Copied doc');
});
gulp.task('minify', ['bundle'], function () {
var result = uglify.minify([DIST + '/' + NAME + '.js'], uglifyConfig);
var fileMin = DIST + '/' + NAME + '.min.js';
var fileMap = DIST + '/' + NAME + '.map';
fs.writeFileSync(fileMin, result.code);
fs.writeFileSync(fileMap, result.map);
gutil.log('Minified ' + fileMin);
gutil.log('Mapped ' + fileMap);
minify(NAME)
});
gulp.task('minify-minimalist', ['bundle-minimalist'], function () {
minify(NAME_MINIMALIST)
});
// TODO: zip file using archiver
@ -120,10 +171,18 @@ gulp.task('zip', shell.task([
// The watch task (to automatically rebuild when the source code changes)
// Does only generate jsoneditor.js and jsoneditor.css, and copy the image
// Does NOT minify the code
// Does NOT minify the code and does NOT generate the minimalist version
gulp.task('watch', ['bundle', 'bundle-css', 'copy-img'], function () {
gulp.watch(['src/**/*'], ['bundle', 'bundle-css', 'copy-img']);
});
// The default task (called when you run `gulp`)
gulp.task('default', ['bundle', 'bundle-css', 'copy-img', 'minify']);
gulp.task('default', [
'bundle',
'bundle-minimalist',
'bundle-css',
'copy-img',
'copy-docs',
'minify',
'minify-minimalist'
]);

View File

@ -0,0 +1,41 @@
# Which files do I need?
Ehhh, that's quite some files in this dist folder. Which files do I need?
## Full version
If you're not sure which version to use, use the full version.
Which files are needed when using the full version?
- jsoneditor.min.js
- jsoneditor.map (optional, for debugging purposes only)
- jsoneditor.min.css
- img/jsoneditor-icons.svg
## Minimalist version
The minimalist version has excluded the following libraries:
- `ace` (via `brace`), used for the code editor.
- `ajv`, used for JSON schema validation.
This reduces the the size of the minified and gzipped JavaScript file from
about 160 kB to just 25 kB.
When to use the minimalist version?
- If you don't need the mode "code" and don't need JSON schema validation.
- Or if you want to provide `ace` and/or `ajv` yourself via the configuration
options, for example when you already use Ace in other parts of your
web application too and don't want to bundle the library twice.
Which files are needed when using the minimalist version?
- jsoneditor-minimalist.min.js
- jsoneditor-minimalist.map (optional, for debugging purposes only)
- jsoneditor.min.css
- img/jsoneditor-icons.svg

View File

@ -1,4 +1,10 @@
var Ajv = require('ajv/dist/ajv.bundle.js');
var Ajv;
try {
Ajv = require('ajv/dist/ajv.bundle.js');
}
catch (err) {
// no problem... when we need Ajv we will throw a neat exception
}
var Highlighter = require('./Highlighter');
var History = require('./History');
var SearchBox = require('./SearchBox');
@ -601,8 +607,12 @@ treemode._createFrame = function () {
// create one global event listener to handle all events from all nodes
var editor = this;
function onEvent(event) {
// when switching to mode "code" or "text" via the menu, some events
// are still fired whilst the _onEvent methods is already removed.
if (editor._onEvent) {
editor._onEvent(event);
}
}
this.frame.onclick = function (event) {
var target = event.target;// || event.srcElement;

View File

@ -0,0 +1,62 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor-minimalist.min.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
Switch editor mode using the mode box.
Note that the mode can be changed programmatically as well using the method
<code>editor.setMode(mode)</code>, try it in the console of your browser.
</p>
<div id="jsoneditor"></div>
<script>
var container, options, json, editor;
container = document.getElementById('jsoneditor');
options = {
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
onError: function (err) {
alert(err.toString());
}
};
json = {
"array": [1, 2, 3],
"boolean": true,
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World"
};
editor = new JSONEditor(container, options, json);
</script>
</body>
</html>