> For the complete documentation index, see [llms.txt](https://pcoded.gitbook.io/light-able/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pcoded.gitbook.io/light-able/quick-start.md).

# Quick Start

{% hint style="info" %}

### Gulp is not mandatory

You may skip this section if you don't want Gulp in your project. Please use **dist/\_\_** directory in your project
{% endhint %}

You can use Gulp to 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, and JS codes
* Auto Compile SaSS file
* 3000+ Plugins

**Gulp for Light Able**

Use Gulp in Light Able is for building different layouts and theme customization with lots of functional tasks like Image Optimization, SaSS compilation, etc...which really useful to make the production-ready `dist/`directory

**How to set up Gulp for Light Able?**

1. Make sure that you have already installed **Nodejs and Gulp** on your server/computer
2. Open the "Nodejs Command prompt" and redirect to your project root directory.
3. Enter the command `yarn` in the command prompt.
4. After that, you must run the below tasks to build a production-ready dist/ directory.

#### **Gulp Commands(task)** <a href="#gulp-commands-task" id="gulp-commands-task"></a>

**Default task**

<table><thead><tr><th width="187">Gulp Command</th><th>Description</th></tr></thead><tbody><tr><td>gulp</td><td>which build template in <code>/dist</code> directory</td></tr></tbody></table>

**Basic task**

<table><thead><tr><th width="186">Gulp Command</th><th>Description</th></tr></thead><tbody><tr><td>gulp sass</td><td>which compile .scss files from <code>/src/assets/scss</code> directory and place it into a <code>/dist/assets/css</code> directory</td></tr><tr><td>gulp imgmin</td><td>which use to optimize images from <code>/src/assets/images</code> directory and place it into a <code>/dist/assets/images</code> directory</td></tr><tr><td>gulp build</td><td>which use to copy files from <code>/src/assets</code> directory and place it into a <code>/dist/assets</code> directory</td></tr><tr><td>gulp build-html</td><td>which uses compiling your HTML file from <code>/src/html</code> directory and place it into a <code>/dist</code> directory</td></tr><tr><td>gulp build-js</td><td>which use to build <code>.js</code> files from <code>/src/assets/js</code> directory and place it into a <code>/dist/assets/js</code> directory</td></tr><tr><td>gulp watch</td><td>It will automatically start your build process if you make any changes in HTML, scss or js files from <code>/src</code> directory and put new changes to <code>/dist</code> directory</td></tr><tr><td>gulp watch-minify</td><td>It will automatically start your build process if you make any changes in HTML, scss or js files from <code>/src</code> directory and put new changes to <code>/dist</code> directory with <strong>minify assets</strong></td></tr></tbody></table>