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

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.20.1

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize