## Gulp

#### Introduction

    <p class="mt-4">The <code>gulp</code> command will build, serve and watch the project with the following gulp tasks:</p>

The `gulp` command will build, serve and watch the project with the following gulp tasks:

#### Commands

    <div class="table-responsive scrollbar">
      <table class="table table-bordered">
        <thead class="text-center">
          <tr>
            <th class="text-nowrap">Task</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="text-nowrap ps-3"><code>clean</code></td>
            <td>Delete the following directories:<pre><code class="lang-html">public/assets/css
    public/assets/js
    public/vendors // packages which are included in vendors.json
    public/**/*.html
    </code></pre>
            </td>
          </tr>
          <tr>
            <td class="text-nowrap ps-3"><code>style</code></td>
            <td>Compiles <code>scss/theme.scss</code> and generates <code>theme.css, theme.min.css, theme-rlt.css, theme-rtl.min.css</code> and <code>theme.css.map, theme.min.css.map, theme-rlt.css.map, theme-rtl.min.css.map</code> to the <code>public/assets/css/ </code> directory.</td>
          </tr>
          <tr>
            <td class="text-nowrap ps-3"><code>script</code></td>
            <td>Concat the <code>js</code> files from <code>src/js/</code> and transpiles with babel to <code>phoenix.js</code> to the <code>public/assets/js/</code> directory.</td>
          </tr>
          <tr>
            <td class="text-nowrap ps-3"><code>compile:all</code></td>
            <td>Compiles all the <code>js, </code><code>scss, </code><code>pug </code>files from the <code>src</code> directory.</td>
          </tr>
          <tr>
            <td class="text-nowrap ps-3"><code>vendor</code></td>
            <td>Runs <code>vendor:clean</code> and <code>vendor:move</code> in series.</td>
          </tr>
          <tr>
            <td class="text-nowrap ps-3"><code>vendor:clean</code></td>
            <td>Delete the vendors from <code>public/vendors</code> directory which are included in <code>vendors.json</code>.</td>
          </tr>
          <tr>
            <td class="text-nowrap ps-3"><code>vendor:move</code></td>
            <td>Copies the vendors from <code>node_modules/</code> directory to <code>public/vendors</code> directory according to the <code>vendors.json</code>.</td>
          </tr>
          <tr>
            <td class="text-nowrap ps-3"><code>watch</code></td>
            <td>All of the following folders are monitored for changes, which will tell the browser to reload automatically after any changes are made:<pre><code class="lang-html">public/assets/img
    public/assets/fonts
    public/assets/video
    public/vendors/
    src/pug
    src/scss
    src/js</code></pre>
            </td>
          </tr>
          <tr>
            <td class="text-nowrap ps-3"><code>build</code></td>
            <td>Will delete previous build directory and generate a new compressed version to deploy <pre><code class="lang-html">build/assets/img
    build/assets/fonts
    build/assets/video
    build/assets/css
    build/assets/js
    build/vendors/
    build/**/*.html</code></pre>
            </td>
          </tr>
          <tr>
            <td class="text-nowrap ps-3"><code>build:test</code></td>
            <td>Will run the build version in port:3000</td>
          </tr>
        </tbody>
      </table>
    </div>

Task | Action
--- | ---
`clean` | Delete the following directories:
    public/assets/css
    public/assets/js
    public/vendors // packages which are included in vendors.json
    public/**/*.html
`style` | Compiles `scss/theme.scss` and generates `theme.css, theme.min.css, theme-rlt.css, theme-rtl.min.css` and `theme.css.map, theme.min.css.map, theme-rlt.css.map, theme-rtl.min.css.map` to the `public/assets/css/` directory.
`script` | Concat the `js` files from `src/js/` and transpiles with babel to `phoenix.js` to the `public/assets/js/` directory.
`compile:all` | Compiles all the `js,` `scss,` `pug` files from the `src` directory.
`vendor` | Runs `vendor:clean` and `vendor:move` in series.
`vendor:clean` | Delete the vendors from `public/vendors` directory which are included in `vendors.json`.
`vendor:move` | Copies the vendors from `node_modules/` directory to `public/vendors` directory according to the `vendors.json`.
`watch` | All of the following folders are monitored for changes, which will tell the browser to reload automatically after any changes are made:
    public/assets/img
    public/assets/fonts
    public/assets/video
    public/vendors/
    src/pug
    src/scss
    src/js
`build` | Will delete previous build directory and generate a new compressed version to deploy
    build/assets/img
    build/assets/fonts
    build/assets/video
    build/assets/css
    build/assets/js
    build/vendors/
    build/**/*.html
`build:test` | Will run the build version in port:3000

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize