js bundling, tabler dist

gulpfile.js

@@ -5,8 +5,13 @@ const gulp = require('gulp'),
 	postcss = require('gulp-postcss'),
 	header = require('gulp-header'),
 	cleanCSS = require('gulp-clean-css'),
+	minifyJS = require('gulp-minify'),
 	rename = require('gulp-rename'),
 	replace = require('gulp-string-replace'),
+	rollup = require('gulp-rollup'),
+	rollupMultiInput = require('rollup-plugin-multi-input'),
+	rollupBabel = require('rollup-plugin-babel'),
+	rollupCleanup = require('rollup-plugin-cleanup'),
 	browserSync = require('browser-sync'),
 	glob = require('glob'),
 	fs = require('fs'),
@@ -73,7 +78,7 @@ gulp.task('svg-icons',  (cb)  => {
 		const files = glob.sync(dir);
 		let svgList = {};
 
-		files.forEach( (file) =>  {
+		files.forEach((file) => {
 			const basename = path.basename(file, '.svg');
 			svgList[basename] = prepareSvgFile(fs.readFileSync(file).toString());
 		});
@@ -163,8 +168,40 @@ gulp.task('sass',  () =>  {
 /**
  * Compile JS files to dist directory
  */
-gulp.task('js', (cb) =>  {
-	cb();
+gulp.task('js', () => {
+	const g = gulp.src(`${srcDir}/**/*.js`)
+		.pipe(rollup({
+			input: [`${srcDir}/js/tabler.js`, `${srcDir}/js/demo.js`],
+			output: {
+				format: 'umd',
+				name: '[name].js'
+			},
+			plugins: [
+				rollupBabel({
+					exclude: 'node_modules/**'
+				}),
+				rollupCleanup()
+			]
+		}))
+		.pipe(rename((path) => {
+			path.dirname = '';
+		}))
+		.pipe(gulp.dest(`${distDir}/js/`))
+		.pipe(browserSync.reload({
+			stream: true,
+		}));
+
+	if (BUILD) {
+		g.pipe(minifyJS({
+			ext: {
+				src: '.js',
+				min: '.min.js'
+			},
+		}))
+			.pipe(gulp.dest(`${distDir}/js/`));
+	}
+
+	return g;
 });
 
 /**
@@ -180,7 +217,7 @@ gulp.task('watch-jekyll', (cb)  => {
  * Build Jekyll files do demo directory
  */
 gulp.task('build-jekyll', (cb) => {
-	var env = Object.create( process.env );
+	var env = Object.create(process.env);
 	env.JEKYLL_ENV = 'production';
 
 	return cp.spawn('bundle', ['exec', 'jekyll', 'build', '--destination', demoDir], { env: env, stdio: 'inherit' })
@@ -199,7 +236,7 @@ gulp.task('watch', (cb)  =>  {
 /**
  * Create BrowserSync server
  */
-gulp.task('browser-sync',()  => {
+gulp.task('browser-sync', () => {
 	browserSync({
 		watch: true,
 		server: {
@@ -238,8 +275,8 @@ gulp.task('copy-libs', (cb) => {
 
 	files = files.flat();
 
-	files.forEach( (file) =>  {
-		if(! file.match(/^https?/)) {
+	files.forEach((file) => {
+		if (!file.match(/^https?/)) {
 			let dirname = path.dirname(file).replace('@', '');
 			let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} ${distDir}/libs/${file.replace('@', '')}`;
 

package.json

@@ -45,6 +45,8 @@
   "main": "dist/js/tabler.js",
   "homepage": "https://tabler.io",
   "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
     "autoprefixer": "^10.0.1",
     "browser-sync": "^2.26.13",
     "gulp": "^4.0.2",
@@ -52,14 +54,18 @@
     "gulp-clean-css": "^4.3.0",
     "gulp-debug": "^4.0.0",
     "gulp-header": "^2.0.9",
+    "gulp-minify": "^3.1.0",
     "gulp-postcss": "^9.0.0",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.0.0",
+    "gulp-rollup": "^2.17.0",
     "gulp-sass": "^4.1.0",
     "gulp-string-replace": "^1.1.2",
     "minimist": "^1.2.5",
     "postcss": "^8.1.4",
     "release-it": "^14.2.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-multi-input": "^1.1.1",
     "yaml": "^1.10.0"
   },
   "dependencies": {
@@ -81,6 +87,7 @@
     "nouislider": "^14.6.2",
     "peity": "^3.3.0",
     "popper.js": "^1.16.1",
+    "rollup-plugin-cleanup": "^3.2.1",
     "selectize": "^0.12.6"
   },
   "resolutions": {

src/js/demo.js

@@ -0,0 +1 @@
+alert('ok');

src/js/tabler.js

@@ -29,3 +29,10 @@
 // 		return new bootstrap.Popover(popoverTriggerEl, options);
 // 	});
 // })();
+
+
+const sayHello = (element) => {
+	alert(element.index ?? -1);
+};
+
+export default sayHello;