Gulp setup

How to do development using Gulp

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.

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 Gradient Able

Use Gulp in Gradient 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 Gradient 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)

Default task

Gulp CommandDescription

gulp

which build template in /dist directory

Basic task

Gulp CommandDescription

gulp sass

which compile .scss files from /src/assets/scss directory and place it into a /dist/assets/css directory

gulp imgmin

which use to optimize images from /src/assets/images directory and place it into a /dist/assets/images directory

gulp build

which use to copy files from /src/assets directory and place it into a /dist/assets directory

gulp build-html

which uses compiling your HTML file from /src/html directory and place it into a /dist directory

gulp build-js

which use to build .js files from /src/assets/js directory and place it into a /dist/assets/js directory

gulp watch

It 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-minify

It 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

PreviousWelcomeNextStructure

Last updated