Skip to content

quick-start.md

Latest commit

 

History

History
70 lines (42 loc) · 3.69 KB

quick-start.md

File metadata and controls

70 lines (42 loc) · 3.69 KB
description Quick Start using Gulp for Datta Able Installation

📐 Quick Start

Installation

Navigate to your root folder (i.e. datta-able-vanilla-js)

c:>cd datta-able-vanilla-js

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 %}

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 Datta able

Use Gulp in Datta able 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

Gulp for Datta Able

Use Gulp in Datta 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 Datta 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 npm install or yarn in the command prompt.
  4. After that, you need to run the below gulp tasks to build a production-ready dist/ directory.

Gulp Commands(task)

Default task

Gulp CommandDescription
gulpwhich build template in /dist directory

Basic task

Gulp CommandDescription
gulp sasswhich compile .scss files from /src/assets/scss directory and place it into a /dist/assets/css directory
gulp imgminwhich use to optimize images from /src/assets/images directory and place it into a /dist/assets/images directory
gulp buildwhich use to copy files from /src/assets directory and place it into a /dist/assets directory
gulp build-htmlwhich uses compiling your HTML file from /src/html directory and place it into a /dist directory
gulp build-jswhich use to build .js files from /src/assets/js directory and place it into a /dist/assets/js directory
gulp watchIt will automatically start your build process if you make any changes in HTML, scss or js files from /src directory and put new changes to /dist directory
gulp watch-minifyIt will automatically start your build process if you make any changes in HTML, scss or js files from /src directory and put new changes to /dist directory with minify assets

\