223 lines
7.8 KiB
JavaScript
223 lines
7.8 KiB
JavaScript
const mix = require('laravel-mix');
|
|
const glob = require('glob');
|
|
const path = require('path');
|
|
const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
|
|
const rimraf = require('rimraf');
|
|
const WebpackRTLPlugin = require('webpack-rtl-plugin');
|
|
const del = require('del');
|
|
const fs = require('fs');
|
|
|
|
/*
|
|
|--------------------------------------------------------------------------
|
|
| Mix Asset Management
|
|
|--------------------------------------------------------------------------
|
|
|
|
|
| Mix provides a clean, fluent API for defining some Webpack build steps
|
|
| for your Laravel applications. By default, we are compiling the CSS
|
|
| file for the application as well as bundling up all the JS files.
|
|
|
|
|
*/
|
|
|
|
// arguments/params from the line command
|
|
const args = getParameters();
|
|
|
|
// get selected demo
|
|
let demo = getDemos(path.resolve(__dirname, 'resources/assets'))[0];
|
|
|
|
mix.options({
|
|
cssNano: {
|
|
discardComments: false,
|
|
}
|
|
});
|
|
|
|
// Remove existing generated assets from public folder
|
|
del.sync(['public/css/*', 'public/js/*', 'public/media/*', 'public/plugins/*',]);
|
|
|
|
// Build 3rd party plugins css/js
|
|
mix.sass(`resources/assets/core/plugins/plugins.scss`, `public/${demo}/plugins/global/plugins.bundle.css`).then(() => {
|
|
// remove unused preprocessed fonts folder
|
|
rimraf(path.resolve('public/fonts'), () => {
|
|
});
|
|
rimraf(path.resolve('public/images'), () => {
|
|
});
|
|
}).sourceMaps(!mix.inProduction())
|
|
// .setResourceRoot('./')
|
|
.options({processCssUrls: false})
|
|
.scripts(require('./resources/assets/core/plugins/plugins.js'), `public/${demo}/plugins/global/plugins.bundle.js`);
|
|
|
|
// Build extended plugin styles
|
|
mix.sass(`resources/assets/${demo}/sass/plugins.scss`, `public/${demo}/plugins/global/plugins-custom.bundle.css`);
|
|
|
|
// Build Metronic css/js
|
|
mix.sass(`resources/assets/${demo}/sass/style.scss`, `public/${demo}/css/style.bundle.css`, {sassOptions: {includePaths: ['node_modules']}})
|
|
// .options({processCssUrls: false})
|
|
.scripts(require(`./resources/assets/${demo}/js/scripts.js`), `public/${demo}/js/scripts.bundle.js`);
|
|
|
|
|
|
// Dark skin mode css files
|
|
if (args.indexOf('dark_mode') !== -1) {
|
|
mix.sass(`resources/assets/core/plugins/plugins.dark.scss`, `public/${demo}/plugins/global/plugins.dark.bundle.css`);
|
|
mix.sass(`resources/assets/${demo}/sass/plugins.dark.scss`, `public/${demo}/plugins/global/plugins-custom.dark.bundle.css`);
|
|
mix.sass(`resources/assets/${demo}/sass/style.dark.scss`, `public/${demo}/css/style.dark.bundle.css`, {sassOptions: {includePaths: ['node_modules']}});
|
|
}
|
|
|
|
|
|
// Build custom 3rd party plugins
|
|
(glob.sync(`resources/assets/core/plugins/custom/**/*.js`) || []).forEach(file => {
|
|
mix.js(file, `public/${demo}/${file.replace(`resources/assets/core/`, '').replace('.js', '.bundle.js')}`);
|
|
});
|
|
(glob.sync(`resources/assets/core/plugins/custom/**/*.scss`) || []).forEach(file => {
|
|
mix.sass(file, `public/${demo}/${file.replace(`resources/assets/core/`, '').replace('.scss', '.bundle.css')}`);
|
|
});
|
|
|
|
// Build Metronic css pages (single page use)
|
|
(glob.sync(`resources/assets/${demo}/sass/pages/**/!(_)*.scss`) || []).forEach(file => {
|
|
file = file.replace(/[\\\/]+/g, '/');
|
|
mix.sass(file, file.replace(`resources/assets/${demo}/sass`, `public/${demo}/css`).replace(/\.scss$/, '.css'));
|
|
});
|
|
|
|
var extendedFiles = [];
|
|
// Extend custom js files for laravel
|
|
(glob.sync('resources/assets/extended/js/**/*.js') || []).forEach(file => {
|
|
var output = `public/${demo}/${file.replace('resources/assets/extended/', '')}`;
|
|
mix.scripts(file, output);
|
|
extendedFiles.push(output);
|
|
});
|
|
|
|
// Metronic js pages (single page use)
|
|
(glob.sync('resources/assets/core/js/custom/**/*.js') || []).forEach(file => {
|
|
var output = `public/${demo}/${file.replace('resources/assets/core/', '')}`;
|
|
if (extendedFiles.indexOf(output) === -1) {
|
|
mix.js(file, output);
|
|
}
|
|
});
|
|
(glob.sync(`resources/assets/${demo}/js/custom/**/*.js`) || []).forEach(file => {
|
|
var output = `public/${demo}/${file.replace(`resources/assets/${demo}/`, '')}`;
|
|
if (extendedFiles.indexOf(output) === -1) {
|
|
mix.js(file, output);
|
|
}
|
|
});
|
|
|
|
// Metronic media
|
|
mix.copyDirectory('resources/assets/core/media', `public/${demo}/media`);
|
|
mix.copyDirectory(`resources/assets/${demo}/media`, `public/${demo}/media`);
|
|
|
|
// Metronic theme
|
|
(glob.sync(`resources/assets/${demo}/sass/themes/**/!(_)*.scss`) || []).forEach(file => {
|
|
file = file.replace(/[\\\/]+/g, '/');
|
|
mix.sass(file, file.replace(`resources/assets/${demo}/sass`, `public/${demo}/css`).replace(/\.scss$/, '.css'));
|
|
});
|
|
|
|
let plugins = [
|
|
new ReplaceInFileWebpackPlugin([
|
|
{
|
|
// rewrite font paths
|
|
dir: path.resolve(`public/${demo}/plugins/global`),
|
|
test: /\.css$/,
|
|
rules: [
|
|
{
|
|
// fontawesome
|
|
search: /url\((\.\.\/)?webfonts\/(fa-.*?)"?\)/g,
|
|
replace: 'url(./fonts/@fortawesome/$2)',
|
|
},
|
|
{
|
|
// flaticon
|
|
search: /url\(("?\.\/)?font\/(Flaticon\..*?)"?\)/g,
|
|
replace: 'url(./fonts/flaticon/$2)',
|
|
},
|
|
{
|
|
// flaticon2
|
|
search: /url\(("?\.\/)?font\/(Flaticon2\..*?)"?\)/g,
|
|
replace: 'url(./fonts/flaticon2/$2)',
|
|
},
|
|
{
|
|
// keenthemes fonts
|
|
search: /url\(("?\.\/)?(Ki\..*?)"?\)/g,
|
|
replace: 'url(./fonts/keenthemes-icons/$2)',
|
|
},
|
|
{
|
|
// lineawesome fonts
|
|
search: /url\(("?\.\.\/)?fonts\/(la-.*?)"?\)/g,
|
|
replace: 'url(./fonts/line-awesome/$2)',
|
|
},
|
|
{
|
|
// socicons
|
|
search: /url\(("?\.\.\/)?font\/(socicon\..*?)"?\)/g,
|
|
replace: 'url(./fonts/socicon/$2)',
|
|
},
|
|
{
|
|
// bootstrap-icons
|
|
search: /url\(.*?(bootstrap-icons\..*?)"?\)/g,
|
|
replace: 'url(./fonts/bootstrap-icons/$1)',
|
|
},
|
|
{
|
|
// fonticons
|
|
search: /url\(.*?(fonticons\..*?)"?\)/g,
|
|
replace: 'url(./fonts/fonticons/$1)',
|
|
},
|
|
],
|
|
},
|
|
]),
|
|
];
|
|
if (args.indexOf('rtl') !== -1) {
|
|
plugins.push(new WebpackRTLPlugin({
|
|
filename: '[name].rtl.css',
|
|
options: {},
|
|
plugins: [],
|
|
minify: false,
|
|
}));
|
|
}
|
|
|
|
mix.webpackConfig({
|
|
plugins: plugins,
|
|
ignoreWarnings: [{
|
|
module: /esri-leaflet/,
|
|
message: /version/,
|
|
}],
|
|
});
|
|
|
|
// Copy jstree images
|
|
(glob.sync('node_modules/jstree/dist/themes/default/*.+(png|gif)') || []).forEach(file => {
|
|
mix.copy(file, `public/${demo}/plugins/custom/jstree/${path.basename(file)}`);
|
|
});
|
|
|
|
// Raw plugins
|
|
(glob.sync(`resources/assets/core/plugins/custom/**/*.js.json`) || []).forEach(file => {
|
|
let filePaths = JSON.parse(fs.readFileSync(file, 'utf-8'));
|
|
const fileName = path.basename(file).replace('.js.json', '');
|
|
mix.scripts(filePaths, `public/${demo}/plugins/custom/${fileName}/${fileName}.bundle.js`);
|
|
});
|
|
|
|
function getDemos(pathDemos) {
|
|
// get possible demo from parameter command
|
|
let demos = [];
|
|
args.forEach((arg) => {
|
|
const demo = arg.match(/^demo.*/g);
|
|
if (demo) {
|
|
demos.push(demo[0]);
|
|
}
|
|
});
|
|
if (demos.length === 0) {
|
|
demos = ['demo1'];
|
|
}
|
|
return demos;
|
|
}
|
|
|
|
function getParameters() {
|
|
var possibleArgs = [
|
|
'dark_mode', 'rtl'
|
|
];
|
|
for (var i = 0; i <= 13; i++) {
|
|
possibleArgs.push('demo' + i);
|
|
}
|
|
|
|
var args = [];
|
|
possibleArgs.forEach(function (key) {
|
|
if (process.env['npm_config_' + key]) {
|
|
args.push(key);
|
|
}
|
|
});
|
|
|
|
return args;
|
|
}
|