Ablepro v8.0 Logo

Gulp Documentation

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
Gulp for Ablepro v8.0

Use Gulp in Ablepro v8.0 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.

How to setup Gulp for Ablepro v8.0?
  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 .scss 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/images directory and place it into a /dist/assets/images 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 compile your html file from /src/html directory and place it into a /dist directory
gulp build-js which use to build .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 directory
Gulp structure

    Elite-able/
    ├── src/
    │   ├── assets/
    │   ├── html/
    │   ├── doc/
    ├── .babelrc
    ├── gulpfile.js
    ├── package.json
    ├── package-lock.json
Content
Change header ( topbar ) content

to change header content just open src/html/layouts/main.html and change the file as you want.

Change navbar ( menu ) list

to change header content just open src/html/layouts/menu-list.html and change the file as you want.

Tons of layout using gulp

Pre-build layout( build ) using gulp

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
sublayouts This variable store prebuild layout types
Horizontal
eg.v2
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
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 . . .
Gulp Layout customizer

Set vertical value in layouts variable


    //=============================================================
    //    this is default layout of theme which already setup
    //=============================================================
    const layout = {
        'layouts': 'vertical',
        'sublayouts': '',
        'darktheme': 'false',
        'rtltheme': 'false',
        'bodyclass': '',
        'menuclass': 'menupos-fixed menu-light ',
        'headerclass': 'headerpos-fixed header-blue',
    }

Set horizontal value in layouts variable

remove menupos-fixed from menuclass variable

remove headerpos-fixed from headerclass variable


    const layout = {
        'layouts': 'horizontal',
        'sublayouts': '',
        'darktheme': 'false',
        'rtltheme': 'false',
        'bodyclass': '',
        'menuclass': 'menu-light ',
        'headerclass': 'header-blue',
    }

Set container box-layout value in bodyclass variable

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


    const layout = {
        'layouts': 'vertical',
        'sublayouts': '',
        'darktheme': 'false',
        'rtltheme': 'false',
        'bodyclass': 'container box-layout',
        'menuclass': 'menupos-fixed menu-light navbar-collapsed',
        'headerclass': 'headerpos-fixed header-blue',
    }

Set true value in rtltheme variable

ass dir="rtl" attribute in <html> in page

eg.<html dir="rtl"> 

    const layout = {
        'layouts': 'vertical',
        'sublayouts': '',
        'darktheme': 'false',
        'rtltheme': 'true',
        'bodyclass': '',
        'menuclass': 'menupos-fixed menu-light',
        'headerclass': 'headerpos-fixed',
    }

remove menu-light value in menuclass variable


    const layout = {
        'layouts': 'vertical',
        'sublayouts': '',
        'darktheme': 'false',
        'rtltheme': 'false',
        'bodyclass': '',
        'menuclass': 'menupos-fixed ',
        'headerclass': 'headerpos-fixed header-blue',
    }

Set true value in darktheme variable


    const layout = {
        'layouts': 'vertical',
        'sublayouts': '',
        'darktheme': 'true',
        'rtltheme': 'false',
        'bodyclass': '',
        'menuclass': 'menupos-fixed ',
        'headerclass': 'headerpos-fixed header-blue',
    }

Set true value in rtltheme variable

ass dir="rtl" attribute in <html> in page

eg.<html dir="rtl"> 

    const layout = {
        'layouts': 'horizontal',
        'sublayouts': '',
        'darktheme': 'false',
        'rtltheme': 'true',
        'bodyclass': '',
        'menuclass': 'menu-light',
        'headerclass': 'header-blue',
    }
Background color

Set background-blue value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-blue',
        ....
    }

Set background-red value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-red',
        ....
    }

Set background-purple value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-purple',
        ....
    }

Set background-info value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-info',
        ....
    }

Set background-green value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-green',
        ....
    }

Set background-dark value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-dark',
        ....
    }
Background gradient

Set background-grd-blue value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-grd-blue',
        ....
    }

Set background-grd-red value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-grd-red',
        ....
    }

Set background-grd-purple value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-grd-purple',
        ....
    }

Set background-grd-info value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-grd-info',
        ....
    }

Set background-grd-green value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-grd-green',
        ....
    }

Set background-grd-dark value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-grd-dark',
        ....
    }
Background image

Set background-img-1 value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-img-1',
        ....
    }

Set background-img-2 value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-img-2',
        ....
    }

Set background-img-3 value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-img-3',
        ....
    }

Set background-img-4 value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-img-4',
        ....
    }

Set background-img-5 value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-img-5',
        ....
    }

Set background-img-6 value in bodyclass variable


    const layout = {
        ....
        'bodyclass': 'background-img-6',
        ....
    }