Documentation v8.2.1

Downloads Preview

Overview

By default all common plugins are bundled togather in the global bundle assets/plugins/global/plugins.bundle.css and assets/plugins/global/plugins.bundle.js files and included in all pages for global usage. This approach allows to load all common plugins at once and keeping them in the browser cache rather than loading each plugin separately to significantly reduce overall page loading time.

Custom Build

However, in certain projects, loading each plugin separately might be required. For such cases you can use the below Gulp config instead of tools/gulp.config.js in order to bundle each plugin separately and include them in pages on demand:
const gulpConfig = {
    name: "{theme}",
    desc: "Gulp build config file",
    version: "{version}",
    config: {
        debug: false,
        compile: {
            rtl: {
                enabled: false,
                skip: [
                    "select2",
                    "line-awesome",
                    "fontawesome5",
                    "nouislider",
                    "tinymce",
                    "sweetalert2",
                ],
            },
            jsMinify: false,
            cssMinify: false,
            jsSourcemaps: false,
            cssSourcemaps: false,
        },
        path: {
            src: "../../../themes/{theme}/html/src",
            common_src: "../src",
            node_modules: "node_modules",
        },
        dist: ["../../../themes/{theme}/html/assets"],
    },
    build: {
        base: {
            src: {
                styles: ["{$config.path.src}/sass/style.scss"],
                scripts: [
                    "{$config.path.common_src}/js/components/**/*.js",
                    "{$config.path.common_src}/js/layout/**/*.js",
                    "{$config.path.src}/js/layout/**/*.js"
                ]
            },
            dist: {
                styles: "{$config.dist}/css/style.bundle.css",
                scripts: "{$config.dist}/js/scripts.bundle.js",
            }
        },
        plugins: {
            global: {
                src: {
                    mandatory: {
                        jquery: {
                            scripts: ["{$config.path.node_modules}/jquery/dist/jquery.js"],
                        },
                        popperjs: {
                            scripts: [
                                "{$config.path.node_modules}/@popperjs/core/dist/umd/popper.js",
                            ],
                        },
                        bootstrap: {
                            scripts: [
                                "{$config.path.node_modules}/bootstrap/dist/js/bootstrap.min.js",
                            ],
                        },
                        moment: {
                            scripts: [
                                "{$config.path.node_modules}/moment/min/moment-with-locales.min.js",
                            ],
                        },
                        wnumb: {
                            scripts: ["{$config.path.node_modules}/wnumb/wNumb.js"],
                        },
                    },
                    override: {
                        styles: ["{$config.path.src}/sass/plugins.scss"],
                    },
                },
                dist: {
                    styles: "{$config.dist}/plugins/global/plugins.bundle.css",
                    scripts: "{$config.dist}/plugins/global/plugins.bundle.js",
                    images: "{$config.dist}/plugins/global/images",
                    fonts: "{$config.dist}/plugins/global/fonts",
                },
            },
            custom: {
				axios: {
					src: {
						scripts: [
							"{$config.path.node_modules}/axios/dist/axios.min.js"
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/axios/axios.bundle.js"
					}
				},
				lozad: {
					src: {
						scripts: [
							"{$config.path.node_modules}/lozad/dist/lozad.min.js"
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/lozad/lozad.bundle.js"
					}
				},
				select2: {
					src: {
						styles: [
							"{$config.path.node_modules}/select2/dist/css/select2.css",
						],
						scripts: [
							"{$config.path.node_modules}/select2/dist/js/select2.full.js",
							"{$config.path.common_src}/js/vendors/plugins/select2.init.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/select2/select2.bundle.js",
						styles: "{$config.dist}/plugins/custom/select2/select2.bundle.css",
					}
				},
				flatpickr: {
					src: {
						styles: [
							"{$config.path.node_modules}/flatpickr/dist/flatpickr.css",
						],
						scripts: [
							"{$config.path.node_modules}/flatpickr/dist/flatpickr.js"
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/flatpickr/flatpickr.bundle.js",
						styles: "{$config.dist}/plugins/custom/flatpickr/flatpickr.bundle.css",
					}
				},
				formvalidation: {
					src: {
						styles: [
							"{$config.path.common_src}/plugins/formvalidation/dist/css/formValidation.css",
						],
						scripts: [
							"{$config.path.node_modules}/es6-shim/es6-shim.js",
							"{$config.path.common_src}/plugins/formvalidation/dist/js/FormValidation.full.min.js",
							"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/Bootstrap5.min.js"
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/formvalidation/formvalidation.bundle.js",
						styles: "{$config.dist}/plugins/custom/formvalidation/formvalidation.bundle.css",
					}
				},
				bootstrapmaxlength: {
					src: {
						"scripts": [
							"{$config.path.node_modules}/bootstrap-maxlength/src/bootstrap-maxlength.js"
						]
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/bootstrap-maxlength/bootstrap-maxlength.bundle.js",
						styles: "{$config.dist}/plugins/custom/bootstrap-maxlength/bootstrap-maxlength.bundle.css",
					}
				},
				daterangepicker: {
					src: {
						styles: [
							"{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.css",
						],
						scripts: [
							"{$config.path.node_modules}/bootstrap-daterangepicker/daterangepicker.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/daterangepicker/daterangepicker.bundle.js",
						styles: "{$config.dist}/plugins/custom/daterangepicker/daterangepicker.bundle.css",
					}
				},
				inputmask: {
					src: {
						scripts: [
							"{$config.path.node_modules}/inputmask/dist/inputmask.js",
							"{$config.path.node_modules}/inputmask/dist/bindings/inputmask.binding.js"
						]
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/inputmask/inputmask.bundle.js",
						styles: "{$config.dist}/plugins/custom/inputmask/inputmask.bundle.css",
					}
				},
				tinyslider: {
					src: {
						styles: [
							"{$config.path.node_modules}/tiny-slider/dist/tiny-slider.css",
						],
						scripts: [
							"{$config.path.node_modules}/tiny-slider/dist/min/tiny-slider.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/tiny-slider/tiny-slider.bundle.js",
						styles: "{$config.dist}/plugins/custom/tiny-slider/tiny-slider.bundle.css",
					}
				},
				nouislider: {
					src: {
						styles: [
							"{$config.path.node_modules}/nouislider/dist/nouislider.css",
						],
						scripts: [
							"{$config.path.node_modules}/nouislider/dist/nouislider.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/nouislider/nouislider.bundle.js",
						styles: "{$config.dist}/plugins/custom/nouislider/nouislider.bundle.css",
					}
				},
				autosize: {
					src: {
						scripts: [
							"{$config.path.node_modules}/autosize/dist/autosize.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/autosize/autosize.bundle.js",
						styles: "{$config.dist}/plugins/custom/autosize/autosize.bundle.css",
					}
				},
				clipboard: {
					src: {
						scripts: [
							"{$config.path.node_modules}/clipboard/dist/clipboard.min.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/clipboard/clipboard.bundle.js",
						styles: "{$config.dist}/plugins/custom/clipboard/clipboard.bundle.css",
					}
				},
				bootstrapmultiselectsplitter: {
					src: {
						scripts: [
							"{$config.path.node_modules}/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.bundle.js",
						styles: "{$config.dist}/plugins/custom/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.bundle.css",
					}
				},
				smoothscroll: {
					src: {
						scripts: [
							"{$config.path.node_modules}/smooth-scroll/dist/smooth-scroll.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/smooth-scroll/smooth-scroll.bundle.js",
						styles: "{$config.dist}/plugins/custom/smooth-scroll/smooth-scroll.bundle.css",
					}
				},
				dropzone: {
					src: {
						styles: [
							"{$config.path.node_modules}/dropzone/dist/dropzone.css",
						],
						scripts: [
							"{$config.path.node_modules}/dropzone/dist/dropzone.js",
							"{$config.path.common_src}/js/vendors/plugins/dropzone.init.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/dropzone/dropzone.bundle.js",
						styles: "{$config.dist}/plugins/custom/dropzone/dropzone.bundle.css",
					}
				},
				quil: {
					src: {
						styles: ["{$config.path.node_modules}/quill/dist/quill.snow.css"],
						scripts: ["{$config.path.node_modules}/quill/dist/quill.js"],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/quil/quil.bundle.js",
						styles: "{$config.dist}/plugins/custom/quil/quil.bundle.css",
					}
				},
				tagify: {
					src: {
						styles: [
							"{$config.path.node_modules}/@yaireo/tagify/dist/tagify.css",
						],
						scripts: [
							"{$config.path.node_modules}/@yaireo/tagify/dist/tagify.polyfills.min.js",
							"{$config.path.node_modules}/@yaireo/tagify/dist/tagify.min.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/tagify/tagify.bundle.js",
						styles: "{$config.dist}/plugins/custom/tagify/tagify.bundle.css",
					}
				},
				toastr: {
					src: {
						styles: ["{$config.path.common_src}/plugins/toastr/build/toastr.css"],
						scripts: ["{$config.path.common_src}/plugins/toastr/build/toastr.min.js"],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/toastr/toastr.bundle.js",
						styles: "{$config.dist}/plugins/custom/toastr/toastr.bundle.css",
					}
				},
				apexcharts: {
					src: {
						styles: [
							"{$config.path.node_modules}/apexcharts/dist/apexcharts.css",
						],
						scripts: [
							"{$config.path.node_modules}/apexcharts/dist/apexcharts.min.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/apexcharts/apexcharts.bundle.js",
						styles: "{$config.dist}/plugins/custom/apexcharts/apexcharts.bundle.css",
					}
				},
				chartjs: {
					src: {
						scripts: ["{$config.path.node_modules}/chart.js/dist/chart.js"],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/chartjs/chartjs.bundle.js"
					}
				},
				countupjs: {
					src: {
						scripts: [
							"{$config.path.node_modules}/countup.js/dist/countUp.umd.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/countupjs/countupjs.bundle.js",
					}
				},
				sweetalert2: {
					src: {
						styles: [
							"{$config.path.node_modules}/sweetalert2/dist/sweetalert2.css",
						],
						scripts: [
							"{$config.path.node_modules}/es6-promise-polyfill/promise.min.js",
							"{$config.path.node_modules}/sweetalert2/dist/sweetalert2.min.js",
							"{$config.path.common_src}/js/vendors/plugins/sweetalert2.init.js",
						],
					},
					dist: {
						scripts: "{$config.dist}/plugins/custom/sweetalert2/sweetalert2.bundle.js",
						styles: "{$config.dist}/plugins/custom/sweetalert2/sweetalert2.bundle.css",
					}
				},
				"line-awesome": {
                    styles: [
                        "{$config.path.node_modules}/line-awesome/dist/line-awesome/css/line-awesome.css",
                    ],
                    fonts: [
                        "{$config.path.node_modules}/line-awesome/dist/line-awesome/fonts/**",
                    ],
                },
                "bootstrap-icons": {
                    styles: [
                        "{$config.path.node_modules}/bootstrap-icons/font/bootstrap-icons.css",
                    ],
                    fonts: [
                        "{$config.path.node_modules}/bootstrap-icons/font/fonts/**",
                    ],
                },
                "@fortawesome": {
                    styles: [
                        "{$config.path.node_modules}/@fortawesome/fontawesome-free/css/all.min.css",
                    ],
                    fonts: [
                        "{$config.path.node_modules}/@fortawesome/fontawesome-free/webfonts/**",
                    ],
                },
				fonticon: {
					src: {
						styles: [
							"{$config.path.common_src}/plugins/fonticon/fonticon.css",
						],
						fonts: [
							"{$config.path.common_src}/plugins/fonticon/**",
						],
					},
					dist: {
						styles: "{$config.dist}/plugins/custom/fonticon/fonticon.bundle.css",
						fonts: "{$config.dist}/plugins/custom/fonticon/fonts",
					}
				},
                draggable: {
                    src: {
                        scripts: [
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.bundle.legacy.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/draggable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/sortable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/droppable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/swappable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/collidable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/resize-mirror.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/snappable.js",
                            "{$config.path.node_modules}/@shopify/draggable/lib/plugins/swap-animation.js",
                        ],
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/draggable/draggable.bundle.js",
                    },
                },
                prismjs: {
                    src: {
                        styles: [
                            "{$config.path.node_modules}/prism-themes/themes/prism-shades-of-purple.css",
                        ],
                        scripts: [
                            "{$config.path.node_modules}/prismjs/prism.js",
                            "{$config.path.node_modules}/prismjs/components/prism-markup.js",
                            "{$config.path.node_modules}/prismjs/components/prism-markup-templating.js",
                            "{$config.path.node_modules}/prismjs/components/prism-bash.js",
                            "{$config.path.node_modules}/prismjs/components/prism-javascript.js",
                            "{$config.path.node_modules}/prismjs/components/prism-scss.js",
                            "{$config.path.node_modules}/prismjs/components/prism-css.js",
                            "{$config.path.node_modules}/prismjs/components/prism-php.js",
                            "{$config.path.node_modules}/prismjs/components/prism-php-extras.js",
                            "{$config.path.node_modules}/prismjs/components/prism-python.js",
                            "{$config.path.node_modules}/prismjs/components/prism-aspnet.js",
                            "{$config.path.node_modules}/prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js",
                            "{$config.path.common_src}/js/vendors/plugins/prism.init.js",
                        ],
                    },
                    dist: {
                        styles: "{$config.dist}/plugins/custom/prismjs/prismjs.bundle.css",
                        scripts: "{$config.dist}/plugins/custom/prismjs/prismjs.bundle.js",
                    },
                },
                datatables: {
                    src: {
                        styles: [
                            "{$config.path.node_modules}/datatables.net-bs5/css/dataTables.bootstrap5.css",
                            "{$config.path.node_modules}/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css",
                            "{$config.path.node_modules}/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css",
                            "{$config.path.node_modules}/datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css",
                            "{$config.path.node_modules}/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css",
                            "{$config.path.node_modules}/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
                            "{$config.path.node_modules}/datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css",
                            "{$config.path.node_modules}/datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css",
                            "{$config.path.node_modules}/datatables.net-select-bs5/css/select.bootstrap5.min.css",
                            "{$config.path.node_modules}/datatables.net-datetime/dist/dataTables.dateTime.min.css",
                        ],
                        scripts: [
                            "{$config.path.node_modules}/datatables.net/js/jquery.dataTables.js",
                            "{$config.path.node_modules}/datatables.net-bs5/js/dataTables.bootstrap5.js",
                            "{$config.path.common_src}/js/vendors/plugins/datatables.init.js",
                            "{$config.path.node_modules}/jszip/dist/jszip.min.js",
                            "{$config.path.node_modules}/pdfmake/build/pdfmake.min.js",
                            "{$config.path.node_modules}/pdfmake/build/vfs_fonts.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/dataTables.buttons.min.js",
                            "{$config.path.node_modules}/datatables.net-buttons-bs5/js/buttons.bootstrap5.min.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.colVis.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.flash.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.html5.js",
                            "{$config.path.node_modules}/datatables.net-buttons/js/buttons.print.js",
                            "{$config.path.node_modules}/datatables.net-colreorder/js/dataTables.colReorder.min.js",
                            "{$config.path.node_modules}/datatables.net-colreorder-bs5/js/colReorder.bootstrap5.js",
                            "{$config.path.node_modules}/datatables.net-fixedcolumns/js/dataTables.fixedColumns.min.js",
                            "{$config.path.node_modules}/datatables.net-fixedcolumns-bs5/js/fixedColumns.bootstrap5.js",
                            "{$config.path.node_modules}/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js",
                            "{$config.path.node_modules}/datatables.net-fixedheader-bs5/js/fixedHeader.bootstrap5.js",
                            "{$config.path.node_modules}/datatables.net-responsive/js/dataTables.responsive.min.js",
                            "{$config.path.node_modules}/datatables.net-responsive-bs5/js/responsive.bootstrap5.min.js",
                            "{$config.path.node_modules}/datatables.net-rowgroup/js/dataTables.rowGroup.min.js",
                            "{$config.path.node_modules}/datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js",
                            "{$config.path.node_modules}/datatables.net-rowreorder/js/dataTables.rowReorder.min.js",
                            "{$config.path.node_modules}/datatables.net-rowreorder-bs5/js/rowReorder.bootstrap5.js",
                            "{$config.path.node_modules}/datatables.net-scroller/js/dataTables.scroller.min.js",
                            "{$config.path.node_modules}/datatables.net-scroller-bs5/js/dataTables.bootstrap5.js",
                            "{$config.path.node_modules}/datatables.net-select/js/dataTables.select.min.js",
                            "{$config.path.node_modules}/datatables.net-select-bs5/js/dataTables.bootstrap5.js",
                            "{$config.path.node_modules}/datatables.net-datetime/dist/dataTables.dateTime.min.js",
                            "{$config.path.node_modules}/datatables.net-plugins/features/conditionalPaging/dataTables.conditionalPaging.js",
                        ]
                    },
                    dist: {
                        styles: "{$config.dist}/plugins/custom/datatables/datatables.bundle.css",
                        scripts: "{$config.dist}/plugins/custom/datatables/datatables.bundle.js",
                    }
                },
                leaflet: {
                    src: {
                        styles: [
                            "{$config.path.node_modules}/leaflet/dist/leaflet.css",
                            "{$config.path.node_modules}/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.css",
                        ],
                        scripts: [
                            "{$config.path.node_modules}/leaflet/dist/leaflet.js",
                            "{$config.path.node_modules}/esri-leaflet/dist/esri-leaflet.js",
                            "{$config.path.node_modules}/esri-leaflet-geocoder/dist/esri-leaflet-geocoder.js",
                        ],
                    },
                    dist: {
                        styles: "{$config.dist}/plugins/custom/leaflet/leaflet.bundle.css",
                        scripts: "{$config.dist}/plugins/custom/leaflet/leaflet.bundle.js",
                    }
                },
                fslightbox: {
                    src: {
                        scripts: [
                            "{$config.path.node_modules}/fslightbox/index.js",
                        ]
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/fslightbox/fslightbox.bundle.js",
                    }
                },
                typedjs: {
                    src: {
                        scripts: ["{$config.path.node_modules}/typed.js/lib/typed.js"],
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/typedjs/typedjs.bundle.js",
                    }
                },
                fullcalendar: {
                    src: {
                        styles: ["{$config.path.node_modules}/fullcalendar/main.min.css"],
                        scripts: [
                            "{$config.path.node_modules}/fullcalendar/main.js",
                            "{$config.path.node_modules}/fullcalendar/locales-all.min.js",
                        ],
                    },
                    dist: {
                        styles: "{$config.dist}/plugins/custom/fullcalendar/fullcalendar.bundle.css",
                        scripts: "{$config.dist}/plugins/custom/fullcalendar/fullcalendar.bundle.js",
                    },
                },
                tinymcejs: {
                    src: {
                        scripts: [
                            "{$config.path.node_modules}/tinymce/tinymce.min.js",
                            "{$config.path.node_modules}/tinymce/themes/silver/theme.js",
                            "{$config.path.node_modules}/tinymce/themes/mobile/theme.js",
                            "{$config.path.node_modules}/tinymce/icons/default/icons.js",
                            "{$config.path.node_modules}/tinymce/plugins/**/plugin.js"
                        ]
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/tinymce/tinymce.bundle.js",
                    }
                },
                ckeditorclassic: {
                    src: {
                        scripts: [
                            "{$config.path.node_modules}/@ckeditor/ckeditor5-build-classic/build/ckeditor.js"
                        ]
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/ckeditor/ckeditor-classic.bundle.js"
                    }
                },
                ckeditorinline: {
                    src: {
                        scripts: [
                            "{$config.path.node_modules}/@ckeditor/ckeditor5-build-inline/build/ckeditor.js"
                        ]
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/ckeditor/ckeditor-inline.bundle.js"
                    }
                },
                ckeditorballoon: {
                    src: {
                        scripts: [
                            "{$config.path.node_modules}/@ckeditor/ckeditor5-build-balloon/build/ckeditor.js"
                        ]
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/ckeditor/ckeditor-balloon.bundle.js"
                    }
                },
                ckeditorballoonblock: {
                    src: {
                        scripts: [
                            "{$config.path.node_modules}/@ckeditor/ckeditor5-build-balloon-block/build/ckeditor.js"
                        ]
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/ckeditor/ckeditor-balloon-block.bundle.js"
                    }
                },
                ckeditordecoupleddocument: {
                    src: {
                        scripts: [
                            "{$config.path.node_modules}/@ckeditor/ckeditor5-build-decoupled-document/build/ckeditor.js"
                        ]
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/ckeditor/ckeditor-document.bundle.js"
                    }
                },
                cropperjs: {
                    src: {
                        styles: [
                            "{$config.path.node_modules}/cropperjs/dist/cropper.css"
                        ],
                        scripts: [
                            "{$config.path.node_modules}/cropperjs/dist/cropper.js"
                        ]
                    },
                    dist: {
                        styles: "{$config.dist}/plugins/custom/cropper/cropper.bundle.css",
                        scripts: "{$config.dist}/plugins/custom/cropper/cropper.bundle.js"
                    }
                },
                jkanban: {
                    src: {
                        styles: [
                            "{$config.path.node_modules}/jkanban/dist/jkanban.min.css"
                        ],
                        scripts: [
                            "{$config.path.node_modules}/jkanban/dist/jkanban.min.js"
                        ]
                    },
                    dist: {
                        styles: "{$config.dist}/plugins/custom/jkanban/jkanban.bundle.css",
                        scripts: "{$config.dist}/plugins/custom/jkanban/jkanban.bundle.js"
                    }
                },
                flot: {
                    src: {
                        scripts: [
                            "{$config.path.node_modules}/flot/dist/es5/jquery.flot.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.resize.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.categories.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.pie.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.stack.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.crosshair.js",
                            "{$config.path.node_modules}/flot/source/jquery.flot.axislabels.js"
                        ]
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/flotcharts/flotcharts.bundle.js"
                    }
                },
                vistimeline: {
                    src: {
                        styles: [
                            "{$config.path.node_modules}/vis-timeline/dist/vis-timeline-graph2d.css",
                        ],
                        scripts: [
                            "{$config.path.node_modules}/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js",
                            "{$config.path.node_modules}/handlebars/dist/handlebars.min.js",
                        ],
                    },
                    dist: {
                        styles: "{$config.dist}/plugins/custom/vis-timeline/vis-timeline.bundle.css",
                        scripts: "{$config.dist}/plugins/custom/vis-timeline/vis-timeline.bundle.js"
                    },
                },
                jstree: {
                    src: {
                        styles: [
                            "{$config.path.node_modules}/jstree/dist/themes/default/style.css"
                        ],
                        scripts: [
                            "{$config.path.node_modules}/jstree/dist/jstree.js"
                        ],
                        images: [
                            "{$config.path.common_src}/media/plugins/jstree/32px.png",
                            "{$config.path.node_modules}/jstree/dist/themes/default/throbber.gif"
                        ]
                    },
                    dist: {
                        styles: "{$config.dist}/plugins/custom/jstree/jstree.bundle.css",
                        scripts: "{$config.dist}/plugins/custom/jstree/jstree.bundle.js",
                        images: "{$config.dist}/plugins/custom/jstree/images/jstree"
                    }
                },
                formrepeater: {
                    src: {
                        scripts: [
                            "{$config.path.node_modules}/jquery.repeater/src/lib.js",
                            "{$config.path.node_modules}/jquery.repeater/src/jquery.input.js",
                            "{$config.path.node_modules}/jquery.repeater/src/repeater.js"
                        ]
                    },
                    dist: {
                        scripts: "{$config.dist}/plugins/custom/formrepeater/formrepeater.bundle.js",
                    }
                },
                cookiealert: {
                    src: {
                        styles: [
                            "{$config.path.node_modules}/bootstrap-cookie-alert/cookiealert.css"
                        ],
                        scripts: [
                            "{$config.path.node_modules}/bootstrap-cookie-alert/cookiealert.js"
                        ]
                    },
                    dist: {
                        styles: "{$config.dist}/plugins/custom/cookiealert/cookiealert.bundle.css",
                        scripts: "{$config.dist}/plugins/custom/cookiealert/cookiealert.bundle.js",
                    }
                }
            }
        },
        widgets: {
            src: {
                scripts: [
                    "{$config.path.common_src}/js/widgets/**/*.js"
                ]
            },
            dist: {
                scripts: "{$config.dist}/js/widgets.bundle.js",
            }
        },
        custom: {
            src: {
                styles: [
                    "{$config.path.common_src}/sass/custom/**/*.scss",
                    "{$config.path.src}/sass/custom/**/*.scss",
                ],
                scripts: [
                    "{$config.path.common_src}/js/custom/**/*.js",
                    "{$config.path.src}/js/custom/**/*.js",
                ],
            },
            dist: {
                styles: "{$config.dist}/css/custom/",
                scripts: "{$config.dist}/js/custom/",
            },
        },
        media: {
            src: {
                media: [
                    "{$config.path.common_src}/media/**/*.*",
                    "{$config.path.src}/media/**/*.*",
                ],
            },
            dist: {
                media: "{$config.dist}/media/",
            },
        },
        misc: {
            src: {
                styles: [
                    "{$config.path.node_modules}/tinymce/skins/**/*.css"
                ],
                media: [
                    "{$config.path.node_modules}/tiny-slider/dist/sourcemaps/tiny-slider.css.map",
                ],
            },
            dist: {
                styles: "{$config.dist}/plugins/custom/tinymce/skins/",
                media: "{$config.dist}/plugins/global/sourcemaps/",
            }
        }
    }
};

export {
    gulpConfig
};

Usage

After making the above changes in tools/gulp.config.js you will need to recompile the assets folder using the Gulp Build and include required plugins separately under Vendors Javascript and Vendor Stylesheets sections as shown below:
<html lang="en">
    <head>
        <!--begin::Vendor Stylesheets(used for this page only)-->
        <link href="assets/plugins/custom/fullcalendar/fullcalendar.bundle.css" rel="stylesheet" type="text/css" />
        <link href="assets/plugins/custom/datatables/datatables.bundle.css" rel="stylesheet" type="text/css" />
        <!--end::Vendor Stylesheets-->

        <!--begin::Global Stylesheets Bundle(mandatory for all pages)-->
        <link href="assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css" />
        <link href="assets/css/style.bundle.css" rel="stylesheet" type="text/css" />
        <!--end::Global Stylesheets Bundle-->
    </head>
    <body>
        <!--begin::Page markup--!>
        ...
        <!--end::Page markup-->>

        <!--begin::Javascript-->
        <!--begin::Global Javascript Bundle(mandatory for all pages)-->
        <script src="assets/plugins/global/plugins.bundle.js"></script>
        <script src="assets/js/scripts.bundle.js"></script>
        <!--end::Global Javascript Bundle-->

        <!--begin::Vendors Javascript(used for this page only)-->
        <script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js"></script>
        <script src="assets/plugins/custom/datatables/datatables.bundle.js"></script>
        <!--end::Vendors Javascript-->

        <!--begin::Custom Javascript(used for this page only)-->
        <script src="assets/js/widgets.bundle.js"></script>
        <!--end::Custom Javascript-->
        <!--end::Javascript-->
    </body>
</html>
These global bundles plugins.bundle.js, plugins.bundle.css, style.bundle.css and scripts.bundle.js are still required to be included in all pages for proper functioning of the theme.
Preview Get Help Buy Now