Quick Setup
This guide will help you set up and run the project using Gulp for development and production.
1.- Install Node.js
-
Make sure Node.js is installed.
-
Recommended version: Node.js 16.x LTS or later.
-
Download from: https://nodejs.org
2.- Install gulp.js
Install the gulp command from your PC terminal
C:\Users\user_name>
npm install --global gulp-cli
-
Recommended version: gulp.js --cli version 2.0.0 LTS or later.
-
Recommended version: gulp.js --local version 4.0.0 LTS or later.
-
Get More Information on: https://gulpjs.com/docs/
-
Note: This is Mandatory
Install the gulp command from your PC terminal
/Users/your_username ~ %
sudo npm install --global gulp-cli
-
Recommended version: gulp.js --cli version 2.0.0 LTS or later.
-
Recommended version: gulp.js --local version 4.0.0 LTS or later.
-
Get More Information on: https://gulpjs.com/docs/
-
Note: This is Mandatory
Install the gulp command from your PC terminal
/home/your_username ~/
npm install --global gulp-cli
-
Recommended version: gulp.js --cli version 2.0.0 LTS or later.
-
Recommended version: gulp.js --local version 4.0.0 LTS or later.
-
Get More Information on: https://gulpjs.com/docs/
-
Note: This is Mandatory
3.- Install Dependencies
In your terminal or command prompt:
cd /your-project-directory/>
npm install
This will install all required npm packages listed in package.json
.
4.- Start Development Server
Run the following command to start the live preview server:
cd /your-project-directory/>
gulp
This will:
Compile SCSS (LTR only)
Include HTML partials using
@@include()
Copy assets and images to
.temp/
Launch a browser preview with live reload
Watch for file changes (HTML, SCSS, Images)
5.- Build
To compile and optimize all files for production:
gulp build
This will:
Compile and minify SCSS, JS, and HTML
Generate both LTR and RTL CSS versions
Copy all assets (images, icons, SCSS, JS)
Replace
node_modules
paths withassets/vendor
Output will be in the
dist/
folder, ready for deployment.
6.- Available Gulp Commands (Optional)
Command | Description |
---|---|
gulp
|
Start development server with live reload |
gulp build
|
Create full production build |
gulp cleanDist
|
Remove dist/ folder |
gulp compileSCSS
|
Compile SCSS files manually |
gulp FileIncludeHtml
|
Compile HTML with partials |
gulp dzVendor
|
Copy vendor libraries from node_modules |
Quick Setup W3CoreUI
Get started quickly with W3CoreUI by following the essential setup steps for seamless integration.
- Organize your project efficiently by following the recommended File Structure for better maintainability and scalability.
- W3CoreUI offers a customizable UI with light & dark modes, color variants, flexible layouts, and responsive design. Refer to the Theme Features guide for setup.
- Set up Sass compilation to generate the necessary styles for your project.
- Check the Template Markup guide and include all required and optional assets in your project.
- Refer to the Dark Mode guide if your project requires Dark Mode support.
- For further assistance, please reach out to the core team by submitting a ticket through the Support Panel.