github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

esbuild to rollup

pull/3891/head
Daniel 2021-06-23 23:19:10 +05:30
parent 8840c979e6
commit 7334c5e73f
3 changed files with 975 additions and 1573 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
gulpfile.js
View File

@ -1,4 +1,3 @@
/* eslint-disable no-console */
/* eslint-disable camelcase */ /* eslint-disable camelcase */
/* eslint-disable no-undef */ /* eslint-disable no-undef */
/* eslint-disable unicorn/prefer-module */ /* eslint-disable unicorn/prefer-module */
@ -6,7 +5,6 @@
const autoprefix = require('autoprefixer') const autoprefix = require('autoprefixer')
const browserSync = require('browser-sync').create() const browserSync = require('browser-sync').create()
const del = require('del') const del = require('del')
const esbuild = require('esbuild')
const { src, dest, lastRun, watch, series } = require('gulp') const { src, dest, lastRun, watch, series } = require('gulp')
const cleanCss = require('gulp-clean-css') const cleanCss = require('gulp-clean-css')
const eslint = require('gulp-eslint7') const eslint = require('gulp-eslint7')
@ -17,6 +15,8 @@ const postcss = require('gulp-postcss')
const rename = require('gulp-rename') const rename = require('gulp-rename')
const sass = require('gulp-sass') const sass = require('gulp-sass')
const gulpStylelint = require('gulp-stylelint') const gulpStylelint = require('gulp-stylelint')
const rollup = require('rollup')
const rollupTypescript = require('@rollup/plugin-typescript')
const rtlcss = require('rtlcss') const rtlcss = require('rtlcss')
sass.compiler = require('sass') sass.compiler = require('sass')
@ -39,11 +39,11 @@ const paths = {
html: './dist/pages', html: './dist/pages',
assets: './dist/assets', assets: './dist/assets',
img: './dist/assets/img', img: './dist/assets/img',
vendor: './dist/vendor' vendor: './dist/vendor',
}, },
base: { base: {
base: './', base: './',
node: './node_modules' node: './node_modules',
}, },
src: { src: {
base: './src/', base: './src/',
@ -54,7 +54,7 @@ const paths = {
scss: './src/scss', scss: './src/scss',
ts: './src/ts', ts: './src/ts',
node_modules: './node_modules/', node_modules: './node_modules/',
vendor: './vendor' vendor: './vendor',
}, },
temp: { temp: {
base: './.temp/', base: './.temp/',
@ -62,70 +62,64 @@ const paths = {
js: './.temp/js', js: './.temp/js',
html: './.temp/pages', html: './.temp/pages',
assets: './.temp/assets', assets: './.temp/assets',
vendor: './.temp/vendor' vendor: './.temp/vendor',
} },
} }
const sassOptions = { const sassOptions = {
outputStyle: 'expanded', outputStyle: 'expanded',
includePaths: ['./node_modules/'] includePaths: ['./node_modules/'],
} }
const postcssOptions = [ const postcssOptions = [
autoprefix({ cascade: false }) autoprefix({ cascade: false }),
] ]
const postcssRtlOptions = [ const postcssRtlOptions = [
autoprefix({ cascade: false }), autoprefix({ cascade: false }),
rtlcss({}) rtlcss({}),
] ]
// From here Dev mode will Start // From here Dev mode will Start
// Compile SCSS // Compile SCSS
const scss = () => { const scss = () => src(paths.src.scss + '/adminlte.scss', { sourcemaps: true })
return src(paths.src.scss + '/adminlte.scss', { sourcemaps: true })
.pipe(sass(sassOptions).on('error', sass.logError)) .pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(postcssOptions)) .pipe(postcss(postcssOptions))
.pipe(dest(paths.temp.css, { sourcemaps: '.' })) .pipe(dest(paths.temp.css, { sourcemaps: '.' }))
.pipe(browserSync.stream()) .pipe(browserSync.stream())
}
// Compile SCSS Dark // Compile SCSS Dark
const scssDark = () => { const scssDark = () => src(paths.src.scss + '/dark/adminlte-dark-addon.scss', { sourcemaps: true })
return src(paths.src.scss + '/dark/adminlte-dark-addon.scss', { sourcemaps: true })
.pipe(sass(sassOptions).on('error', sass.logError)) .pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(postcssOptions)) .pipe(postcss(postcssOptions))
.pipe(dest(paths.temp.css + '/dark', { sourcemaps: '.' })) .pipe(dest(paths.temp.css + '/dark', { sourcemaps: '.' }))
.pipe(browserSync.stream()) .pipe(browserSync.stream())
}
// Lint SCSS // Lint SCSS
const lintScss = () => { const lintScss = () => src([paths.src.scss + '/**/*.scss'], { since: lastRun(lintScss) })
return src([paths.src.scss + '/**/*.scss'], { since: lastRun(lintScss) })
.pipe(gulpStylelint({ .pipe(gulpStylelint({
failAfterError: false, failAfterError: false,
reporters: [ reporters: [
{ formatter: 'string', console: true } { formatter: 'string', console: true },
] ],
})) }))
}
const tsCompile = () => { const tsCompile = () =>
return esbuild.build({ rollup.rollup({
entryPoints: [paths.src.ts + '/adminlte.ts'], input: paths.src.ts + '/adminlte.ts',
banner: { output: {
js: banner banner,
}, },
bundle: true, plugins: [
format: 'iife', rollupTypescript(),
],
}).then(bundle => bundle.write({
file: paths.temp.js + '/adminlte.js',
format: 'umd',
name: 'adminlte',
sourcemap: true, sourcemap: true,
target: ['chrome60'], }))
outfile: paths.temp.js + '/adminlte.js'
}).catch(
error => console.error(error)
)
}
// Lint TS // Lint TS
function isFixed(file) { function isFixed(file) {
@ -133,54 +127,44 @@ function isFixed(file) {
return file.eslint !== null && file.eslint.fixed return file.eslint !== null && file.eslint.fixed
} }
const lintTs = () => { const lintTs = () => src([paths.src.ts + '/**/*.ts'], { since: lastRun(lintTs) })
return src([paths.src.ts + '/**/*.ts'], { since: lastRun(lintTs) })
.pipe(eslint({ fix: true })) .pipe(eslint({ fix: true }))
.pipe(eslint.format()) .pipe(eslint.format())
.pipe(gulpIf(isFixed, dest(paths.src.ts))) .pipe(gulpIf(isFixed, dest(paths.src.ts)))
.pipe(eslint.failAfterError()) .pipe(eslint.failAfterError())
}
const index = () => { const index = () => src([paths.src.base + '*.html'])
return src([paths.src.base + '*.html'])
.pipe(fileinclude({ .pipe(fileinclude({
prefix: '@@', prefix: '@@',
basepath: './src/partials/', basepath: './src/partials/',
context: { context: {
environment: 'development' environment: 'development',
} },
})) }))
.pipe(dest(paths.temp.base)) .pipe(dest(paths.temp.base))
.pipe(browserSync.stream()) .pipe(browserSync.stream())
}
const html = () => { const html = () => src([paths.src.html])
return src([paths.src.html])
.pipe(fileinclude({ .pipe(fileinclude({
prefix: '@@', prefix: '@@',
basepath: './src/partials/', basepath: './src/partials/',
context: { context: {
environment: 'development' environment: 'development',
} },
})) }))
.pipe(dest(paths.temp.html)) .pipe(dest(paths.temp.html))
.pipe(browserSync.stream()) .pipe(browserSync.stream())
}
const assets = () => { const assets = () => src([paths.src.assets])
return src([paths.src.assets])
.pipe(dest(paths.temp.assets)) .pipe(dest(paths.temp.assets))
.pipe(browserSync.stream()) .pipe(browserSync.stream())
}
const vendor = () => { const vendor = () => src(npmDist({ copyUnminified: true }), { base: paths.src.node_modules })
return src(npmDist({ copyUnminified: true }), { base: paths.src.node_modules })
.pipe(dest(paths.temp.vendor)) .pipe(dest(paths.temp.vendor))
}
const serve = () => { const serve = () => {
browserSync.init({ browserSync.init({
server: paths.temp.base server: paths.temp.base,
}) })
watch([paths.src.scss], series(lintScss)) watch([paths.src.scss], series(lintScss))
@ -194,107 +178,97 @@ const serve = () => {
// From here Dist will Start // From here Dist will Start
// Minify CSS // Minify CSS
const minifyDistCss = () => { const minifyDistCss = () => src([
return src([ paths.dist.css + '/**/*.css',
paths.dist.css + '/**/*.css' ], {
], { base: paths.dist.css,
base: paths.dist.css, sourcemaps: true,
sourcemaps: true })
})
.pipe(cleanCss({ format: { breakWith: 'lf' } })) .pipe(cleanCss({ format: { breakWith: 'lf' } }))
.pipe(rename({ suffix: '.min' })) .pipe(rename({ suffix: '.min' }))
.pipe(dest(paths.dist.css, { sourcemaps: '.' })) .pipe(dest(paths.dist.css, { sourcemaps: '.' }))
}
// Minify JS // Minify JS
const minifyDistJs = () => { // Need to add terser
return esbuild.build({ const minifyDistJs = () =>
entryPoints: [paths.dist.js + '/adminlte.js'], rollup.rollup({
format: 'iife', input: paths.src.ts + '/adminlte.ts',
minify: true, output: {
banner,
},
plugins: [
rollupTypescript(),
],
}).then(bundle => bundle.write({
file: paths.temp.js + '/adminlte.js',
format: 'umd',
name: 'adminlte',
sourcemap: true, sourcemap: true,
target: ['chrome60'], }))
outfile: paths.dist.js + '/adminlte.min.js'
}).catch(
error => console.error(error)
)
}
// Copy assets // Copy assets
const copyDistAssets = () => { const copyDistAssets = () => src(paths.src.assets)
return src(paths.src.assets)
.pipe(dest(paths.dist.assets)) .pipe(dest(paths.dist.assets))
}
// Clean // Clean
const cleanDist = () => del([paths.dist.base]) const cleanDist = () => del([paths.dist.base])
// Compile and copy all scss/css // Compile and copy all scss/css
const copyDistCssAll = () => { const copyDistCssAll = () => src([paths.src.scss + '/**/*.scss'], {
return src([paths.src.scss + '/**/*.scss'], { base: paths.src.scss,
base: paths.src.scss, sourcemaps: true,
sourcemaps: true })
})
.pipe(sass(sassOptions).on('error', sass.logError)) .pipe(sass(sassOptions).on('error', sass.logError))
.pipe(postcss(postcssOptions)) .pipe(postcss(postcssOptions))
.pipe(dest(paths.dist.css, { sourcemaps: '.' })) .pipe(dest(paths.dist.css, { sourcemaps: '.' }))
}
const copyDistCssRtl = () => { const copyDistCssRtl = () => src(paths.dist.css + '/*.css', { sourcemaps: true })
return src(paths.dist.css + '/*.css', { sourcemaps: true })
.pipe(postcss(postcssRtlOptions)) .pipe(postcss(postcssRtlOptions))
.pipe(rename({ suffix: '.rtl' })) .pipe(rename({ suffix: '.rtl' }))
.pipe(dest(paths.dist.css + '/rtl', { sourcemaps: '.' })) .pipe(dest(paths.dist.css + '/rtl', { sourcemaps: '.' }))
}
// Compile and copy ts/js // Compile and copy ts/js
const copyDistJs = () => { const copyDistJs = () =>
return esbuild.build({ rollup.rollup({
entryPoints: [paths.src.ts + '/adminlte.ts'], input: paths.src.ts + '/adminlte.ts',
banner: { output: {
js: banner banner,
}, },
bundle: true, plugins: [
format: 'iife', rollupTypescript(),
],
}).then(bundle => bundle.write({
file: paths.temp.js + '/adminlte.js',
format: 'umd',
name: 'adminlte',
sourcemap: true, sourcemap: true,
target: ['chrome60'], }))
outfile: paths.dist.js + '/adminlte.js'
}).catch(
error => console.error(error)
)
}
// Copy Html // Copy Html
const copyDistHtml = () => { const copyDistHtml = () => src([paths.src.html])
return src([paths.src.html])
.pipe(fileinclude({ .pipe(fileinclude({
prefix: '@@', prefix: '@@',
basepath: './src/partials/', basepath: './src/partials/',
context: { context: {
environment: 'production' environment: 'production',
} },
})) }))
.pipe(dest(paths.dist.html)) .pipe(dest(paths.dist.html))
}
// Copy index // Copy index
const copyDistHtmlIndex = () => { const copyDistHtmlIndex = () => src([paths.src.base + '*.html'])
return src([paths.src.base + '*.html'])
.pipe(fileinclude({ .pipe(fileinclude({
prefix: '@@', prefix: '@@',
basepath: './src/partials/', basepath: './src/partials/',
context: { context: {
environment: 'production' environment: 'production',
} },
})) }))
.pipe(dest(paths.dist.base)) .pipe(dest(paths.dist.base))
}
// Copy node_modules to vendor // Copy node_modules to vendor
const copyDistVendor = () => { const copyDistVendor = () => src(npmDist({ copyUnminified: true }), { base: paths.src.node_modules })
return src(npmDist({ copyUnminified: true }), { base: paths.src.node_modules })
.pipe(dest(paths.dist.vendor)) .pipe(dest(paths.dist.vendor))
}
// To Dist Before release // To Dist Before release
exports.build = series(lintScss, lintTs, cleanDist, copyDistCssAll, copyDistCssRtl, minifyDistCss, copyDistJs, minifyDistJs, copyDistHtml, copyDistHtmlIndex, copyDistAssets, copyDistVendor) exports.build = series(lintScss, lintTs, cleanDist, copyDistCssAll, copyDistCssRtl, minifyDistCss, copyDistJs, minifyDistJs, copyDistHtml, copyDistHtmlIndex, copyDistAssets, copyDistVendor)

2329
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

23
package.json
View File

@ -37,21 +37,21 @@
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^5.15.3", "@fortawesome/fontawesome-free": "^5.15.3",
"@popperjs/core": "^2.9.2", "@popperjs/core": "^2.9.2",
"bootstrap": "^5.0.1", "bootstrap": "^5.0.2",
"chart.js": "^3.3.2", "chart.js": "^3.3.2",
"overlayscrollbars": "^1.13.1" "overlayscrollbars": "^1.13.1"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.26.1", "@rollup/plugin-typescript": "^8.2.1",
"@typescript-eslint/parser": "^4.26.1", "@typescript-eslint/eslint-plugin": "^4.28.0",
"@typescript-eslint/parser": "^4.28.0",
"autoprefixer": "^10.2.6", "autoprefixer": "^10.2.6",
"browser-sync": "^2.26.14", "browser-sync": "^2.26.14",
"bundlewatch": "^0.3.2", "bundlewatch": "^0.3.2",
"del": "^6.0.0", "del": "^6.0.0",
"esbuild": "^0.12.8", "eslint": "^7.29.0",
"eslint": "^7.28.0", "eslint-config-xo": "^0.37.0",
"eslint-config-xo": "^0.36.0", "eslint-config-xo-typescript": "^0.42.0",
"eslint-config-xo-typescript": "^0.41.1",
"eslint-plugin-import": "^2.23.4", "eslint-plugin-import": "^2.23.4",
"eslint-plugin-unicorn": "^33.0.1", "eslint-plugin-unicorn": "^33.0.1",
"gulp": "^4.0.2", "gulp": "^4.0.2",
@ -66,11 +66,12 @@
"gulp-stylelint": "^13.0.0", "gulp-stylelint": "^13.0.0",
"lockfile-lint": "^4.6.2", "lockfile-lint": "^4.6.2",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.3.2", "postcss": "^8.3.5",
"rtlcss": "^3.2.0", "rollup": "^2.52.2",
"sass": "^1.32.13", "rtlcss": "^3.2.1",
"sass": "1.32.13",
"stylelint": "^13.13.1", "stylelint": "^13.13.1",
"stylelint-config-twbs-bootstrap": "^2.2.1", "stylelint-config-twbs-bootstrap": "^2.2.1",
"typescript": "^4.3.2" "typescript": "^4.3.4"
} }
} }