Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-24 02:38:15 +04:00
Code Issues Projects Releases Wiki Activity

js bundling, tabler dist

Browse Source
This commit is contained in:
codecalm
2020-10-27 21:22:14 +01:00
parent cce71ee849
commit b7715d9b2e
5 changed files with 1454 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
gulpfile.js
View File

@@ -5,8 +5,13 @@ const gulp = require('gulp'),
postcss = require('gulp-postcss'), postcss = require('gulp-postcss'),
header = require('gulp-header'), header = require('gulp-header'),
cleanCSS = require('gulp-clean-css'), cleanCSS = require('gulp-clean-css'),
minifyJS = require('gulp-minify'),
rename = require('gulp-rename'), rename = require('gulp-rename'),
replace = require('gulp-string-replace'), 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'), browserSync = require('browser-sync'),
glob = require('glob'), glob = require('glob'),
fs = require('fs'), fs = require('fs'),
@@ -25,7 +30,7 @@ let BUILD = false,
/** /**
* Enable BUILD mode and set directories * Enable BUILD mode and set directories
*/ */
gulp.task('build-on', (cb) => { gulp.task('build-on', (cb) => {
BUILD = true; BUILD = true;
distDir = './dist'; distDir = './dist';
demoDir = './demo'; demoDir = './demo';
@@ -64,16 +69,16 @@ if (!Array.prototype.flat) {
/** /**
* Import tabler-icons form npm and other svg files from `/svg/brand/` directory and generate Jekyll `.yml` data files * Import tabler-icons form npm and other svg files from `/svg/brand/` directory and generate Jekyll `.yml` data files
*/ */
gulp.task('svg-icons', (cb) => { gulp.task('svg-icons', (cb) => {
const prepareSvgFile = (svg) => { const prepareSvgFile = (svg) => {
return svg.replace(/\n/g, '').replace(/>\s+</g, '><'); return svg.replace(/\n/g, '').replace(/>\s+</g, '><');
}; };
const generateIconsYml = (dir, filename) => { const generateIconsYml = (dir, filename) => {
const files = glob.sync(dir); const files = glob.sync(dir);
let svgList = {}; let svgList = {};
files.forEach( (file) => { files.forEach((file) => {
const basename = path.basename(file, '.svg'); const basename = path.basename(file, '.svg');
svgList[basename] = prepareSvgFile(fs.readFileSync(file).toString()); svgList[basename] = prepareSvgFile(fs.readFileSync(file).toString());
}); });
@@ -90,13 +95,13 @@ gulp.task('svg-icons', (cb) => {
/** /**
* Check unused Jekyll partials * Check unused Jekyll partials
*/ */
gulp.task('unused-files', (cb) => { gulp.task('unused-files', (cb) => {
let foundFiles = []; let foundFiles = [];
glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => { glob.sync(`${srcDir}/pages/**/*.{html,md}`).forEach((file) => {
let fileContent = fs.readFileSync(file); let fileContent = fs.readFileSync(file);
fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, (f, c, filename) => { fileContent.toString().replace(/\{% include(_cached)? ([a-z0-9\/_-]+\.html)/g, (f, c, filename) => {
filename = `${srcDir}/pages/_includes/${filename}`; filename = `${srcDir}/pages/_includes/${filename}`;
if (!foundFiles.includes(filename)) { if (!foundFiles.includes(filename)) {
@@ -107,7 +112,7 @@ gulp.task('unused-files', (cb) => {
let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`); let includeFiles = glob.sync(`${srcDir}/pages/_includes/**/*.html`);
includeFiles.forEach((file) => { includeFiles.forEach((file) => {
if (!foundFiles.includes(file)) { if (!foundFiles.includes(file)) {
console.log('file', file); console.log('file', file);
} }
@@ -119,7 +124,7 @@ gulp.task('unused-files', (cb) => {
/** /**
* Clean `dist` folder before build * Clean `dist` folder before build
*/ */
gulp.task('clean', () => { gulp.task('clean', () => {
return gulp return gulp
.src(`{${distDir}/*,${demoDir}/*}`, { read: false }) .src(`{${distDir}/*,${demoDir}/*}`, { read: false })
.pipe(clean()); .pipe(clean());
@@ -128,7 +133,7 @@ gulp.task('clean', () => {
/** /**
* Compile SASS to CSS and move it to dist directory * Compile SASS to CSS and move it to dist directory
*/ */
gulp.task('sass', () => { gulp.task('sass', () => {
const g = gulp const g = gulp
.src(`${srcDir}/scss/*.scss`) .src(`${srcDir}/scss/*.scss`)
.pipe(sass({ .pipe(sass({
@@ -151,7 +156,7 @@ gulp.task('sass', () => {
if (BUILD) { if (BUILD) {
g.pipe(cleanCSS()) g.pipe(cleanCSS())
.pipe(rename((path) => { .pipe(rename((path) => {
path.basename += '.min'; path.basename += '.min';
})) }))
.pipe(gulp.dest(`${distDir}/css/`)); .pipe(gulp.dest(`${distDir}/css/`));
@@ -163,14 +168,46 @@ gulp.task('sass', () => {
/** /**
* Compile JS files to dist directory * Compile JS files to dist directory
*/ */
gulp.task('js', (cb) => { gulp.task('js', () => {
cb(); 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;
}); });
/** /**
* Watch Jekyll files and build it to demo directory * Watch Jekyll files and build it to demo directory
*/ */
gulp.task('watch-jekyll', (cb) => { gulp.task('watch-jekyll', (cb) => {
browserSync.notify('Building Jekyll'); browserSync.notify('Building Jekyll');
return cp.spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--destination', demoDir], { stdio: 'inherit' }) return cp.spawn('bundle', ['exec', 'jekyll', 'build', '--watch', '--destination', demoDir], { stdio: 'inherit' })
.on('close', cb); .on('close', cb);
@@ -179,8 +216,8 @@ gulp.task('watch-jekyll', (cb) => {
/** /**
* Build Jekyll files do demo directory * Build Jekyll files do demo directory
*/ */
gulp.task('build-jekyll', (cb) => { gulp.task('build-jekyll', (cb) => {
var env = Object.create( process.env ); var env = Object.create(process.env);
env.JEKYLL_ENV = 'production'; env.JEKYLL_ENV = 'production';
return cp.spawn('bundle', ['exec', 'jekyll', 'build', '--destination', demoDir], { env: env, stdio: 'inherit' }) return cp.spawn('bundle', ['exec', 'jekyll', 'build', '--destination', demoDir], { env: env, stdio: 'inherit' })
@@ -190,7 +227,7 @@ gulp.task('build-jekyll', (cb) => {
/** /**
* Watch JS and SCSS files * Watch JS and SCSS files
*/ */
gulp.task('watch', (cb) => { gulp.task('watch', (cb) => {
gulp.watch('./src/scss/**/*.scss', gulp.series('sass')); gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
gulp.watch('./src/js/**/*.js', gulp.series('js')); gulp.watch('./src/js/**/*.js', gulp.series('js'));
cb(); cb();
@@ -199,7 +236,7 @@ gulp.task('watch', (cb) => {
/** /**
* Create BrowserSync server * Create BrowserSync server
*/ */
gulp.task('browser-sync',() => { gulp.task('browser-sync', () => {
browserSync({ browserSync({
watch: true, watch: true,
server: { server: {
@@ -228,18 +265,18 @@ gulp.task('copy-libs', (cb) => {
let files = []; let files = [];
Object.keys(allLibs.js).forEach((lib) => { Object.keys(allLibs.js).forEach((lib) => {
files.push(Array.isArray(allLibs.js[lib]) ? allLibs.js[lib] : [allLibs.js[lib]]); files.push(Array.isArray(allLibs.js[lib]) ? allLibs.js[lib] : [allLibs.js[lib]]);
}); });
Object.keys(allLibs.css).forEach((lib) => { Object.keys(allLibs.css).forEach((lib) => {
files.push(Array.isArray(allLibs.css[lib]) ? allLibs.css[lib] : [allLibs.css[lib]]); files.push(Array.isArray(allLibs.css[lib]) ? allLibs.css[lib] : [allLibs.css[lib]]);
}); });
files = files.flat(); files = files.flat();
files.forEach( (file) => { files.forEach((file) => {
if(! file.match(/^https?/)) { if (!file.match(/^https?/)) {
let dirname = path.dirname(file).replace('@', ''); let dirname = path.dirname(file).replace('@', '');
let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} ${distDir}/libs/${file.replace('@', '')}`; let cmd = `mkdir -p "dist/libs/${dirname}" && cp -r node_modules/${file} ${distDir}/libs/${file.replace('@', '')}`;
@@ -253,7 +290,7 @@ gulp.task('copy-libs', (cb) => {
/** /**
* Copy static files (flags, payments images, etc) to dist directory * Copy static files (flags, payments images, etc) to dist directory
*/ */
gulp.task('copy-images', () => { gulp.task('copy-images', () => {
return gulp return gulp
.src(`${srcDir}/img/**/*`) .src(`${srcDir}/img/**/*`)
.pipe(gulp.dest(`${distDir}/img`)); .pipe(gulp.dest(`${distDir}/img`));
@@ -262,7 +299,7 @@ gulp.task('copy-images', () => {
/** /**
* Copy static files (demo images, etc) to demo directory * Copy static files (demo images, etc) to demo directory
*/ */
gulp.task('copy-static', () => { gulp.task('copy-static', () => {
return gulp return gulp
.src(`${srcDir}/static/**/*`) .src(`${srcDir}/static/**/*`)
.pipe(gulp.dest(`${demoDir}/static`)); .pipe(gulp.dest(`${demoDir}/static`));
@@ -271,7 +308,7 @@ gulp.task('copy-static', () => {
/** /**
* Copy Tabler dist files to demo directory * Copy Tabler dist files to demo directory
*/ */
gulp.task('copy-dist', () => { gulp.task('copy-dist', () => {
return gulp return gulp
.src(`${distDir}/**/*`) .src(`${distDir}/**/*`)
.pipe(gulp.dest(`${demoDir}/dist/`)); .pipe(gulp.dest(`${demoDir}/dist/`));
@@ -294,10 +331,10 @@ gulp.task('update-version', () => {
newVersion = argv['new-version'] || `${pkg.version}`; newVersion = argv['new-version'] || `${pkg.version}`;
return gulp.src(['./_config.yml', './package.json']) return gulp.src(['./_config.yml', './package.json'])
.pipe(replace(/version: .*/, `version: ${newVersion}`)) .pipe(replace(/version: .*/, `version: ${newVersion}`))
.pipe(replace('"version": "' + oldVersion + '"', `"version": "${newVersion}"`)) .pipe(replace('"version": "' + oldVersion + '"', `"version": "${newVersion}"`))
.pipe(replace('"version_short": "' + oldVersion + '"', `"version_short": "${newVersion}"`)) .pipe(replace('"version_short": "' + oldVersion + '"', `"version_short": "${newVersion}"`))
.pipe(gulp.dest('.')); .pipe(gulp.dest('.'));
}); });
gulp.task('start', gulp.series('clean', 'sass', 'build-jekyll', /*'js',*/ gulp.parallel('watch-jekyll', 'watch', 'browser-sync'))); gulp.task('start', gulp.series('clean', 'sass', 'build-jekyll', /*'js',*/ gulp.parallel('watch-jekyll', 'watch', 'browser-sync')));

1372
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

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

1
src/js/demo.js Normal file
View File

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

7
src/js/tabler.js
View File

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