From e90d2c133cfa2ad5ea851c189f2dea04bb331c90 Mon Sep 17 00:00:00 2001 From: Daniel <50356015+danny007in@users.noreply.github.com> Date: Mon, 17 May 2021 08:42:33 +0530 Subject: [PATCH] added gulp build --- gulpfile.js | 110 ++++++++++++++++++++++----- package-lock.json | 12 ++- package.json | 32 +------- src/partials/dashboard/_sidenav.html | 4 +- 4 files changed, 104 insertions(+), 54 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index fca9a6ab1..54d7de7ab 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -3,7 +3,6 @@ /* eslint-disable no-undef */ /* eslint-disable unicorn/prefer-module */ -// const autoprefixer = require('autoprefixer') const browserSync = require('browser-sync').create() const cleanCss = require('gulp-clean-css') const del = require('del') @@ -12,12 +11,12 @@ const npmDist = require('gulp-npm-dist') const sass = require('gulp-sass') const wait = require('gulp-wait') const postcss = require('gulp-postcss') -// const rtlcss = require('rtlcss') +const rename = require('gulp-rename') const sourcemaps = require('gulp-sourcemaps') const fileinclude = require('gulp-file-include') - const esbuild = require('esbuild') -// const { getTarget } = require('./get.browserslist.target') + +sass.compiler = require('sass') const pkg = require('./package') const year = new Date().getFullYear() @@ -64,7 +63,12 @@ const paths = { } } -function postcssCallback() { +const sassOptions = { + outputStyle: 'expanded', + includePaths: ['./node_modules/'] +} + +function postcssOptions() { return { map: { inline: false, @@ -79,16 +83,29 @@ function postcssCallback() { } } +function postcssRtlOptions() { + return { + map: { + inline: false, + annotation: true, + sourcesContent: true + }, + plugins: [ + require('autoprefixer')({ + cascade: false + }), + require('rtlcss')({}) + ] + } +} + // Compile SCSS gulp.task('scss', () => { return gulp.src(paths.src.scss + '/adminlte.scss') .pipe(wait(500)) .pipe(sourcemaps.init()) - .pipe(sass({ - outputStyle: 'expanded', - includePaths: ['./node_modules/'] - }).on('error', sass.logError)) - .pipe(postcss(postcssCallback)) + .pipe(sass(sassOptions).on('error', sass.logError)) + .pipe(postcss(postcssOptions)) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(paths.temp.css)) .pipe(browserSync.stream()) @@ -101,7 +118,6 @@ gulp.task('ts', () => { js: banner }, bundle: true, - color: true, format: 'iife', sourcemap: true, target: ['chrome60'], @@ -161,14 +177,31 @@ gulp.task('serve', gulp.series('scss', 'ts', 'html', 'index', 'assets', 'vendor' })) // Minify CSS -gulp.task('minify:css', () => { +gulp.task('minify:dist:css', () => { return gulp.src([ - paths.dist.css + '/adminlte.css' - ]) + paths.dist.css + '/**/*.css' + ], { base: paths.dist.css }) + .pipe(sourcemaps.init({ loadMaps: true })) .pipe(cleanCss()) + .pipe(rename({ suffix: '.min' })) + .pipe(sourcemaps.write('.')) .pipe(gulp.dest(paths.dist.css)) }) +// Minify JS +gulp.task('minify:dist:js', () => { + return esbuild.build({ + entryPoints: [paths.dist.js + '/adminlte.js'], + format: 'iife', + minify: true, + sourcemap: true, + target: ['chrome60'], + outfile: paths.dist.js + '/adminlte.min.js' + }).catch( + error => console.error(error) + ) +}) + // Copy assets gulp.task('copy:dist:assets', () => { return gulp.src(paths.src.assets) @@ -185,15 +218,52 @@ gulp.task('copy:dist:css', () => { return gulp.src([paths.src.scss + '/adminlte.scss']) .pipe(wait(500)) .pipe(sourcemaps.init()) - .pipe(sass({ - outputStyle: 'expanded', - includePaths: ['./node_modules/'] - }).on('error', sass.logError)) - .pipe(postcss(postcssCallback)) + .pipe(sass(sassOptions).on('error', sass.logError)) + .pipe(postcss(postcssOptions)) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(paths.dist.css)) }) +gulp.task('copy:dist:css:dark', () => { + return gulp.src([paths.src.scss + '/dark/*.scss']) + .pipe(wait(500)) + .pipe(sourcemaps.init()) + .pipe(sass(sassOptions).on('error', sass.logError)) + .pipe(postcss(postcssOptions)) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest(paths.dist.css + '/dark')) +}) + +gulp.task('copy:dist:css:rtl', () => { + return gulp.src([ + paths.dist.css + '/*.css', + paths.dist.css + '/dark/*.css' + ]) + .pipe(wait(500)) + .pipe(sourcemaps.init({ loadMaps: true })) + .pipe(postcss(postcssRtlOptions)) + .pipe(rename({ suffix: '.rtl' })) + .pipe(sourcemaps.write('.')) + .pipe(gulp.dest(paths.dist.css + '/rtl')) +}) + +// Compile and copy ts/js +gulp.task('copy:dist:js', () => { + return esbuild.build({ + entryPoints: [paths.src.ts + '/adminlte.ts'], + banner: { + js: banner + }, + bundle: true, + format: 'iife', + sourcemap: true, + target: ['chrome60'], + outfile: paths.dist.js + '/adminlte.js' + }).catch( + error => console.error(error) + ) +}) + // Copy Html gulp.task('copy:dist:html', () => { return gulp.src([paths.src.html]) @@ -226,7 +296,7 @@ gulp.task('copy:dist:vendor', () => { .pipe(gulp.dest(paths.dist.vendor)) }) -gulp.task('build', gulp.series('clean:dist', 'copy:dist:css', 'copy:dist:html', 'copy:dist:html:index', 'copy:dist:assets', 'copy:dist:vendor')) +gulp.task('build', gulp.series('clean:dist', 'copy:dist:css', 'copy:dist:css:dark', 'copy:dist:css:rtl', 'minify:dist:css', 'copy:dist:js', 'minify:dist:js', 'copy:dist:html', 'copy:dist:html:index', 'copy:dist:assets', 'copy:dist:vendor')) // Default gulp.task('default', gulp.series('serve')) diff --git a/package-lock.json b/package-lock.json index ddcde32be..d5a48252d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3021,9 +3021,9 @@ } }, "esbuild": { - "version": "0.11.21", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.11.21.tgz", - "integrity": "sha512-FqpYdJqiTeLDbj3vqxc/fG8UmHIEvQrDaUxSw1oJf4giLd/tnMDUUlXellCjOab7qGKQ5hUFD5eQgmO+tkZeow==", + "version": "0.11.23", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.11.23.tgz", + "integrity": "sha512-iaiZZ9vUF5wJV8ob1tl+5aJTrwDczlvGP0JoMmnpC2B0ppiMCu8n8gmy5ZTGl5bcG081XBVn+U+jP+mPFm5T5Q==", "dev": true }, "escalade": { @@ -5149,6 +5149,12 @@ } } }, + "gulp-rename": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/gulp-rename/-/gulp-rename-2.0.0.tgz", + "integrity": "sha512-97Vba4KBzbYmR5VBs9mWmK+HwIf5mj+/zioxfZhOKeXtx5ZjBk57KFlePf5nxq9QsTtFl0ejnHE3zTC9MHXqyQ==", + "dev": true + }, "gulp-sass": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/gulp-sass/-/gulp-sass-4.1.0.tgz", diff --git a/package.json b/package.json index 5cc903646..2bbd17ba4 100644 --- a/package.json +++ b/package.json @@ -7,38 +7,11 @@ "main": "dist/js/adminlte.min.js", "scripts": { "bundlewatch": "bundlewatch --config .bundlewatch.config.json", - "css-all": "npm-run-all css css-splits", - "css-splits": "npm-run-all css-compile-splits css-prefix-splits css-rtl-splits css-minify-splits", - "css": "npm-run-all css-compile css-prefix css-minify", - "css-compile-bash": "sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css", - "css-compile": "npm run css-compile-bash -- scss/adminlte.scss:dist/css/adminlte.css", - "css-compile-splits": "npm-run-all --parallel css-compile-dark-splits", - "css-compile-dark-splits": "npm run css-compile-bash -- scss/dark/:dist/css/dark/", - "css-prefix-bash": "postcss --config build/postcss.config.js --replace", - "css-prefix": "npm run css-prefix-bash -- \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/dark/*.css\" \"!dist/css/rtl/*.css\"", - "css-prefix-splits": "npm run css-prefix-bash -- \"dist/css/**/*.css\" \"!dist/css/rtl/*.css\" \"!dist/css/**/*.min.css\"", - "css-rtl-splits": "cross-env NODE_ENV=RTL postcss --config build/postcss.config.js --dir \"dist/css/rtl\" --ext \".rtl.css\" \"dist/css/*.css\" \"dist/css/**/*.css\" \"!dist/css/**/*.rtl.css\" \"!dist/css/*.min.css\" \"!dist/css/**/*.min.css\"", - "css-minify-bash": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output ", - "css-minify": "npm run css-minify-bash -- dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\"", - "css-minify-splits": "npm-run-all --parallel css-minify-split:dark css-minify-split:rtl", - "css-minify-split:dark": "npm run css-minify-bash -- dist/css/dark/ --batch --batch-suffix \".min\" \"dist/css/dark/*.css\" \"!dist/css/dark/*.min.css\"", - "css-minify-split:rtl": "npm run css-minify-bash -- dist/css/rtl/ --batch --batch-suffix \".min\" \"dist/css/rtl/*.css\" \"!dist/css/rtl/*.min.css\"", "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache", - "dev": "npm-run-all --parallel watch sync", "lockfile-lint": "lockfile-lint --allowed-hosts npm --allowed-schemes https: --empty-hostname false --type npm --path package-lock.json", - "js": "npm-run-all js-compile js-minify", - "js-compile": "npm-run-all --parallel ts:build ts:type-check", - "ts:build": "node build/esbuild.config.js", "ts:type-check": "tsc --noEmit", - "js-minify": "esbuild dist/js/adminlte.js --minify --sourcemap --outfile=dist/js/adminlte.min.js", "js-lint": "eslint --ext=js,ts --cache --cache-location .cache/.eslintcache --report-unused-disable-directives .", - "lint": "npm-run-all --continue-on-error --parallel css-lint js-lint lockfile-lint", - "compile": "npm-run-all --parallel css js", - "production": "npm-run-all --parallel css-all js", - "sync": "browser-sync start --server --files *.html pages/ dist/", - "watch": "concurrently \"npm:watch-*\"", - "watch-css": "nodemon --watch scss -e scss -x \"npm-run-all css-compile css-prefix\"", - "watch-js": "nodemon --watch ts -e ts -x \"npm-run-all js-compile\"" + "lint": "npm-run-all --continue-on-error --parallel css-lint js-lint lockfile-lint" }, "keywords": [ "css", @@ -76,7 +49,7 @@ "concurrently": "^6.1.0", "cross-env": "^7.0.3", "del": "^6.0.0", - "esbuild": "^0.11.21", + "esbuild": "^0.11.23", "eslint": "^7.26.0", "eslint-config-xo": "^0.36.0", "eslint-config-xo-typescript": "^0.41.1", @@ -87,6 +60,7 @@ "gulp-file-include": "^2.3.0", "gulp-npm-dist": "^1.0.3", "gulp-postcss": "^9.0.0", + "gulp-rename": "^2.0.0", "gulp-sass": "^4.1.0", "gulp-sourcemaps": "^3.0.0", "gulp-wait": "0.0.2", diff --git a/src/partials/dashboard/_sidenav.html b/src/partials/dashboard/_sidenav.html index 298647461..c810ac4cb 100644 --- a/src/partials/dashboard/_sidenav.html +++ b/src/partials/dashboard/_sidenav.html @@ -2,7 +2,7 @@