# Quick Start

### Installation <a href="#installation" id="installation"></a>

Navigate to your root folder **(i.e. Saasable-tailwind)**

```
c:>cd Saasable-tailwind
```

Install packages by npm or yarn according to your preferences. Here we are using the npm package manager.

```
> npm i
```

After package installation, you can start your app by using **`Gulp`** command. This will regenerate the dist folder. You can keep this command running while making changes in the `src` folder. It will auto-apply to the `dist` folder and your browser.

```
> gulp
```

{% hint style="info" %}
If you are interested more in learning about gulp, check the below section, else you can skip it.
{% endhint %}

<details>

<summary>Gulp</summary>

#### 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 Able pro

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

</details>

#### 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 **SaasAble**

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

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)**

#### Default task

<table><thead><tr><th width="201">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="236">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-node-modules</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>