Back to docs
Nextro 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 Nextro

Use Gulp in Nextro 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 Nextro?
  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

Nextro/
├── src/
│   ├── assets/
│   ├── html/
├── .babelrc
├── gulpfile.js
├── package.json
Content
Change header ( topbar ) content

to change header content just open src/html/layouts/header-content.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

This snippet contains to a HTML file to create vertical layout.


@@include('./layouts/layout-vertical.html')

This snippet contains to a HTML file to create collapse layout.


@@include('./layouts/layout-collapse.html')

add .pc-horizontal in <body> tag to to create Horizontal layout.

add .bg-dark in <header> tag.

replace <nav> wich given balow.

add hole content of page in .container

This snippet contains to a HTML file to create horizontal layout.


@@include('./layouts/layout-horizontal.html')

add .modern-layout in <body> tag to to create modern layout.

add .bg-dark in <header> tag.

remove logo section from navbar and add it in <header> wich given balow.

This snippet contains to a HTML file to create modern layout.


@@include('./layouts/layout-modern.html')

add .advance-layout in <body> tag to to create advance layout.

add .bg-primary in <header> tag.

remove logo section from navbar and add it in <header> wich given balow.

This snippet contains to a HTML file to create advance layout.


@@include('./layouts/layout-advance.html')

add .pc-horizontal and .layout-topbar in <body> tag to to create topbar layout.

remove logo section from navbar and add it in <header> wich given balow.

This snippet contains to a HTML file to create horizontal layout.


@@include('./layouts/layout-horizontal.html')

add .tab-layout in <body> tag to to create tab layout.

replace hole <nav> content which given below

This snippet contains to a HTML file to create tab layout.


@@include('./layouts/layout-tab.html')
Header background

Changes tha given code in particular layout file wich you want to use


<!-- [ Header ] start -->
<header class="pc-header">
</header>
<!-- [ Header ] end -->

add bg-primary class in <header>


<!-- [ Header ] start -->
<header class="pc-header bg-primary">
</header>
<!-- [ Header ] end -->

add bg-danger class in <header>


<!-- [ Header ] start -->
<header class="pc-header bg-danger">
</header>
<!-- [ Header ] end -->

add bg-warning class in <header>


<!-- [ Header ] start -->
<header class="pc-header bg-warning">
</header>
<!-- [ Header ] end -->

add bg-info class in <header>


<!-- [ Header ] start -->
<header class="pc-header bg-info">
</header>
<!-- [ Header ] end -->

add bg-success class in <header>


<!-- [ Header ] start -->
<header class="pc-header bg-success">
</header>
<!-- [ Header ] end -->

add bg-dark class in <header>


<!-- [ Header ] start -->
<header class="pc-header bg-dark">
</header>
<!-- [ Header ] end -->
Menu brand background

Changes tha given code in particular layout file wich you want to use


<div class="m-header">
</div>

add bg-primary class in .m-header to set Blue color in Menu brand


<div class="m-header bg-primary">
</div>

add bg-danger class in .m-header to set Red color in Menu brand


<div class="m-header bg-danger">
</div>

add bg-warning class in .m-header to set Yellow color in Menu brand


<div class="m-header bg-warning">
</div>

add bg-info class in .m-header to set cyan color in Menu brand


<div class="m-header bg-info">
</div>

add bg-success class in .m-header to set success color in Menu brand


<div class="m-header bg-success">
</div>

add bg-dark class in .m-header to set dark color in Menu brand


<div class="m-header bg-dark">
</div>
Light Sidebar background

Changes tha given code in particular layout file wich you want to use

add light-sidebar class in .pc-sidebar to set Light color in Sidemenu


<nav class="pc-sidebar light-sidebar">
</nav>
×