Quick Start
Setup the Light Able using Gulp workflow
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?
Make sure that you have already installed Nodejs and Gulp on your server/computer
Open the "Nodejs Command prompt" and redirect to your project root directory.
Enter the command
yarn
in the command prompt.After that, you must run the below tasks to build a production-ready dist/ directory.
Gulp Commands(task)
Default task
gulp
which build template in /dist
directory
Basic task
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
Last updated