Gulp (i.e. Optional)

You can use Gulp for Automate and enhance your project workflow.

Don't know about Gulp?

Gulp is a toolkit for automating painful or time-consuming tasks in your project development workflow, so you can stop messing around and build something easier than ever.

  • Auto Minify/Uglify CSS, HTML, JS codes
  • Auto Compile SaSS file
  • 3000+ Plugins
  • Check this video for more about Gulp Task Automation for Beginners.
Gulp for Elite Able

Use Gulp in Elite Able is for build different layouts and theme customization with lots of useful tasks like Image Optimization, SaSS compile etc...which really useful to build the production ready dist/directory.

  • Check this video tutorial for how to setup Gulp for Elite Able?
How to setup Gulp for Elite Able?

  1. Make sure that you have already install Nodejs and Gulp in your server/computer
  2. Open "Nodejs Command prompt" and redirect to your project root directory.
  3. Enter the command npm install in command prompt.
  4. After that you need to run below gulp tasks to build production ready dist/ directory.
Gulp Commands(task)
Default task
Gulp Command Description
gulp which build template in /dist directory
Basic task
Gulp Command Description
gulp sass which compile .SaaS files from /src/assets/scss directory and place it into a /dist/assets/css directory
gulp imgmin which use to optimize images from /src/assets/img directory and place it into a /dist/assets/img directory
gulp build which use to copy files from /src/assets directory and place it into a /dist/assets directory
gulp build-html which use minify your html file from /src/default directory and place it into a /dist/default directory
gulp build-js which use to uglify .js files from /src/assets/js directory and place it into a /dist/assets/js directory
gulp watch It will automatically start your build process if you make any changes in html,scss,js file from /src directory and put new changes to /dist directory
gulp watch-minify It will automatically start your build process if you make any changes in html,scss,js file from /src directory and put new changes to /dist directory with minify assets
Minify task
Gulp Command Description
mincss which minify all css in /dist/assets/css directory
uglify which minify all javascript in /dist/assets/js directory
htmlmin which minify all html in /dist/default directory
imgmin which minify all image in /dist/assets/images directory
Gulp structure
                                            
                                                Elite-able/
                                                ├── src/
                                                │   ├── assets/
                                                │   ├── html/
                                                │   ├── doc/
                                                ├── .babelrc
                                                ├── gulpfile.js
                                                ├── package.json
                                                ├── package-lock.json
                                            
                                        
Tons of layout using gulp

Pre-build layout( build ) using gulp

How to use prebuild layout in gulp?

to use prebuild layout using gulp you need to replace the given code in /gulpfile.js gulp file in "htmlmin" task

Steps to use pre-build layouts
  1. Open /gulpfile.js file at root directory of theme package.
  2. Find the code const layout = { in /gulpfile.js file.
  3. Replace the whole const layout = { block with respected given code which you can find given below for different layout.
  4. For other supported customization option you need to refer the respected layout pages in the theme package.
Variable description

Variable Description
layouts This variable store value of layout types
eg.vertical,horizontal,combine
sublayouts This variable store prebuild layout types
Horizontal
eg.v1,v2,layout8,layout9,layout10,layout13
Vertical
eg.layout1,layout2,layout3,layout4,layout5,layout11,layout12,layout14
Combine
eg.layout6,layout7
darktheme This variable store true / false value for making dark theme
rtltheme This variable store true / false value for making RTL theme
bodyclass This variable store value which add in body class
Horizontal
eg.layout-8,layout-9,layout-10,layout-13
Vertical
eg.layout-1,layout-2,layout-3,layout-4,layout-5,layout-11,layout-12,layout-14
Combine
eg.layout-6,layout-7
Box layout
eg.container,box-layout add both class
menuclass This variable store value which add in right navbar class
eg.menupos-fixed . . .
headerclass This variable store value which add in right header class
eg.headerpos-fixed . . .
Vertical

                                                        
                                                            const layout = {
                                                                'layouts':'vertical',
                                                                'sublayouts':'layout1',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-1',
                                                                'menuclass':'menupos-fixed',
                                                                'headerclass':'headerpos-fixed',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'vertical',
                                                                'sublayouts':'layout2',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-2',
                                                                'menuclass':'menupos-fixed navbar-blue',
                                                                'headerclass':'headerpos-fixed',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'vertical',
                                                                'sublayouts':'layout3',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-3',
                                                                'menuclass':'menupos-fixed menu-light brand-blue',
                                                                'headerclass':'headerpos-fixed header-blue',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'vertical',
                                                                'sublayouts':'layout4',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-4',
                                                                'menuclass':'menu-light brand-info icon-colored',
                                                                'headerclass':'header-blue',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'vertical',
                                                                'sublayouts':'layout5',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-5',
                                                                'menuclass':'',
                                                                'headerclass':'',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'vertical',
                                                                'sublayouts':'layout11',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-11',
                                                                'menuclass':'menupos-fixed',
                                                                'headerclass':'headerpos-fixed',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'vertical',
                                                                'sublayouts':'layout12',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-12',
                                                                'menuclass':'menupos-fixed menu-light',
                                                                'headerclass':'headerpos-fixed',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'vertical',
                                                                'sublayouts':'layout14',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-14',
                                                                'menuclass':'menupos-fixed navbar-collapsed',
                                                                'headerclass':'headerpos-fixed',
                                                            }
                                                        
                                                    
Horizontal

                                                        
                                                            const layout = {
                                                                'layouts':'horizontal',
                                                                'sublayouts':'layout8',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-8',
                                                                'menuclass':'',
                                                                'headerclass':'',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'horizontal',
                                                                'sublayouts':'layout9',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-9',
                                                                'menuclass':'container navbar-blue',
                                                                'headerclass':'',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'horizontal',
                                                                'sublayouts':'layout10',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'',
                                                                'menuclass':'theme-horizontal menu-light icon-colored',
                                                                'headerclass':'headerpos-fixed header-blue',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'horizontal',
                                                                'sublayouts':'layout13',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-13',
                                                                'menuclass':'theme-horizontal navbar-blue',
                                                                'headerclass':'',
                                                            }
                                                        
                                                    
Combine

                                                        
                                                            const layout = {
                                                                'layouts':'combine',
                                                                'sublayouts':'layout-6',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-6',
                                                                'menuclass':'',
                                                                'headerclass':'',
                                                                'combineHmenuclass':'',
                                                            }
                                                        
                                                    
                                                        
                                                            const layout = {
                                                                'layouts':'combine',
                                                                'sublayouts':'layout-7',
                                                                'darktheme':'false',
                                                                'rtltheme':'false',
                                                                'bodyclass':'layout-7',
                                                                'menuclass':'brand-blue',
                                                                'headerclass':'header-blue',
                                                                'combineHmenuclass':'menu-light',
                                                            }
                                                        
                                                    
Gulp page customizer

Set vertical value in layouts variable

                                                
                                                    const layout = {
                                                        'layouts':'vertical',
                                                        ....
                                                    }
                                                
                                            

Set horizontal value in layouts variable

                                                
                                                    const layout = {
                                                        'layouts':'horizontal',
                                                        ....
                                                    }
                                                
                                            

Set container box-layout value in bodyclass variable

* Make sure that you have set vertical value in layouts variable

                                                
                                                    const layout = {
                                                        'layouts':'vertical',
                                                        ....
                                                        'bodyclass': 'container box-layout',
                                                        ....
                                                    }
                                                
                                            

Set true value in rtltheme variable

* Make sure that you have set vertical value in layouts variable

                                                
                                                    const layout = {
                                                        'layouts':'vertical',
                                                        ....
                                                        'rtltheme': 'true',
                                                        ....
                                                    }
                                                
                                            

Set menu-light value in menuclass variable

                                                
                                                    const layout = {
                                                        ....
                                                        'menuclass': 'menu-light',
                                                        ....
                                                    }
                                                
                                            

Set true value in darktheme variable

                                                
                                                    const layout = {
                                                        ....
                                                        'darktheme': 'true',
                                                        ....
                                                    }
                                                
                                            

Set icon-colored value in menuclass variable

                                                
                                                    const layout = {
                                                        ....
                                                        'menuclass': 'icon-colored',
                                                        ....
                                                    }