# Getting Started

##### SCSS & CSS

Synto comes with power of SCSS. The css files can be generated from scss by simply following below steps:

- Gulp

  Gulp is a JavaScipt streaming task runner. It automate many development tasks. Using gulp you can perform tasks like running a local server, minifying code, compilation, Browser sync ,optimizing images, etc... We are using gulp which allows to having complete automation for build flow. You can read it more about it here.

##### Prerequisites

Please follow below steps to install and setup all prerequisites:

- Nodejs

  Make sure to have the Node.js installed &amp; running in your computer. If you have already installed nodejs on your computer, you can skip this step, otherwise install nodejs on your computer,

  Note : If you are using the latest version of Node JS or want to install and use the latest version, click here and install all the dependencies manually that are given below in command prompt.

- Gulp

  Make sure to have the Gulp installed &amp; running in your computer. If you have already installed gulp on your computer, you can skip this step. In order to install, just run command `npm install -g gulp` from your terminal.

- After Completion of gulp Install. open `gulpfile.js` And install the "Declaration of gulp variables" in your command promt. In order to install, just run command
  `npm install gulp`,
  `npm install gulp-sass`,
  `npm install gulp-postcss`,
  `npm install gulp-autoprefixer`,
  `npm install gulp-sourcemaps`,
  `npm install browser-sync`,
  `npm install gulp-cssbeautify`,
  `npm install gulp-cached`,
  `npm install gulp-cssnano`,
  `npm install del`,
  `npm install tailwindcss`,
  `npm install gulp-clean-css`,
  `npm install gulp-npm-dist`,
  `npm install gulp-replace`,
  `npm install gulp-uglify`,
  `npm install gulp-useref-plus`,
  `npm install gulp-rename`,
  `npm install gulp-if`,
  `npm install gulp-file-include`,
  `npm install gulp-beautify` from your terminal.

  Make sure to have all above prerequisites installed &amp; running in your computer. If you want to install more variables for your template, just declare the variables in `gulpfile.js` after that run in command promt

##### Gulp Commands

Command | Description
--- | ---
`npm install` | npm install command is used to intall required dependencies to run gulp in `node_modules`
`gulp` | Gulp command is used to generate `dist/` directory. Gulp runs the project locally, starts the development server and watches for any changes you made in `src` folder, including your HTML, Javascript, SCSS, etc. The development server is accessible at http://localhost:1113. What ever changes you made in `src` folder it automatically changed in dist files.

Don't make any changes in dist/ directory. You can change only in src/ directory.if you use both src and dist folders