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">
  <table class="table table-bordered">
    <thead class="text-center font-sans-serif">
      <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>theme.js</code>, <code>theme.min.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 theme.js, theme.min.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