vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

184 lines
5.1 KiB

  1. var fs = require('fs');
  2. var gulp = require('gulp');
  3. var gutil = require('gulp-util');
  4. var concat = require('gulp-concat');
  5. var minifyCSS = require('gulp-minify-css');
  6. var rename = require("gulp-rename");
  7. var webpack = require('webpack');
  8. var uglify = require('uglify-js');
  9. var rimraf = require('rimraf');
  10. var merge = require('merge-stream');
  11. var argv = require('yargs').argv;
  12. var ENTRY = './index.js';
  13. var HEADER = './lib/header.js';
  14. var DIST = './dist';
  15. var VIS_JS = 'vis.js';
  16. var VIS_MAP = 'vis.map';
  17. var VIS_MIN_JS = 'vis.min.js';
  18. var VIS_LIGHT_JS = 'vis-light.js';
  19. var VIS_LIGHT_MAP = 'vis-light.map';
  20. var VIS_LIGHT_MIN_JS = 'vis-light.min.js';
  21. var VIS_CSS = 'vis.css';
  22. var VIS_MIN_CSS = 'vis.min.css';
  23. // generate banner with today's date and correct version
  24. function createBanner() {
  25. var today = gutil.date(new Date(), 'yyyy-mm-dd'); // today, formatted as yyyy-mm-dd
  26. var version = require('./package.json').version;
  27. return String(fs.readFileSync(HEADER))
  28. .replace('@@date', today)
  29. .replace('@@version', version);
  30. }
  31. var bannerPlugin = new webpack.BannerPlugin(createBanner(), {
  32. entryOnly: true,
  33. raw: true
  34. });
  35. // TODO: the moment.js language files should be excluded by default (they are quite big)
  36. var webpackConfig = {
  37. entry: ENTRY,
  38. output: {
  39. library: 'vis',
  40. libraryTarget: 'umd',
  41. path: DIST,
  42. filename: VIS_JS,
  43. sourcePrefix: ' '
  44. },
  45. plugins: [ bannerPlugin ],
  46. cache: true
  47. };
  48. var webpackConfigLight = {
  49. entry: ENTRY,
  50. output: {
  51. library: 'vis',
  52. libraryTarget: 'umd',
  53. path: DIST,
  54. filename: VIS_LIGHT_JS,
  55. sourcePrefix: ' '
  56. },
  57. externals: [
  58. 'hammerjs',
  59. 'moment'
  60. ],
  61. plugins: [ bannerPlugin ],
  62. cache: true
  63. };
  64. var uglifyConfig = {
  65. outSourceMap: VIS_MAP,
  66. output: {
  67. comments: /@license/
  68. }
  69. };
  70. // create a single instance of the compiler to allow caching
  71. var compiler = webpack(webpackConfig);
  72. var compilerLight = webpack(webpackConfigLight);
  73. // clean the dist/img directory
  74. gulp.task('clean', function (cb) {
  75. rimraf(DIST + '/img', cb);
  76. });
  77. gulp.task('bundle-js', ['clean'], function (cb) {
  78. // update the banner contents (has a date in it which should stay up to date)
  79. bannerPlugin.banner = createBanner();
  80. compiler.run(function (err, stats) {
  81. if (err) gutil.log(err);
  82. cb();
  83. });
  84. });
  85. gulp.task('bundle-js-light', ['clean'], function (cb) {
  86. // update the banner contents (has a date in it which should stay up to date)
  87. bannerPlugin.banner = createBanner();
  88. compilerLight.run(function (err, stats) {
  89. if (err) gutil.log(err);
  90. cb();
  91. });
  92. });
  93. // bundle and minify css
  94. gulp.task('bundle-css', ['clean'], function () {
  95. var files = [
  96. './lib/timeline/component/css/timeline.css',
  97. './lib/timeline/component/css/panel.css',
  98. './lib/timeline/component/css/labelset.css',
  99. './lib/timeline/component/css/itemset.css',
  100. './lib/timeline/component/css/item.css',
  101. './lib/timeline/component/css/timeaxis.css',
  102. './lib/timeline/component/css/currenttime.css',
  103. './lib/timeline/component/css/customtime.css',
  104. './lib/timeline/component/css/animation.css',
  105. './lib/timeline/component/css/dataaxis.css',
  106. './lib/timeline/component/css/pathStyles.css',
  107. './lib/network/css/network-manipulation.css',
  108. './lib/network/css/network-navigation.css'
  109. ];
  110. return gulp.src(files)
  111. .pipe(concat(VIS_CSS))
  112. .pipe(gulp.dest(DIST))
  113. // TODO: nicer to put minifying css in a separate task?
  114. .pipe(minifyCSS())
  115. .pipe(rename(VIS_MIN_CSS))
  116. .pipe(gulp.dest(DIST));
  117. });
  118. gulp.task('copy', ['clean'], function () {
  119. var network = gulp.src('./lib/network/img/**/*')
  120. .pipe(gulp.dest(DIST + '/img/network'));
  121. var timeline = gulp.src('./lib/timeline/img/**/*')
  122. .pipe(gulp.dest(DIST + '/img/timeline'));
  123. return merge(network, timeline);
  124. });
  125. gulp.task('minify', ['bundle-js'], function (cb) {
  126. // minify full version of vis.js
  127. var result = uglify.minify([DIST + '/' + VIS_JS], uglifyConfig);
  128. fs.writeFileSync(DIST + '/' + VIS_MIN_JS, result.code);
  129. fs.writeFileSync(DIST + '/' + VIS_MAP, result.map);
  130. // minify light version of vis.js (external dependencies excluded)
  131. var result = uglify.minify([DIST + '/' + VIS_LIGHT_JS], uglifyConfig);
  132. fs.writeFileSync(DIST + '/' + VIS_LIGHT_MIN_JS, result.code);
  133. fs.writeFileSync(DIST + '/' + VIS_LIGHT_MAP, result.map);
  134. cb();
  135. });
  136. gulp.task('bundle', ['bundle-js', 'bundle-js-light', 'bundle-css', 'copy']);
  137. // read command line arguments --bundle and --minify
  138. var bundle = 'bundle' in argv;
  139. var minify = 'minify' in argv;
  140. var watchTasks = [];
  141. if (bundle || minify) {
  142. // do bundling and/or minifying only when specified on the command line
  143. watchTasks = [];
  144. if (bundle) watchTasks.push('bundle');
  145. if (minify) watchTasks.push('minify');
  146. }
  147. else {
  148. // by default, do both bundling and minifying
  149. watchTasks = ['bundle', 'minify'];
  150. }
  151. // The watch task (to automatically rebuild when the source code changes)
  152. gulp.task('watch', watchTasks, function () {
  153. gulp.watch(['index.js', 'lib/**/*'], watchTasks);
  154. });
  155. // The default task (called when you run `gulp`)
  156. gulp.task('default', ['clean', 'bundle', 'minify']);