back to main Purchase

Using gulp (optional)

Use GULP to fully customize your project or use Smarty out of the box, as it is!

Installing NPM + GULP (optional)
Everything below is optional, required only if you want to customize Smarty core!
By default, all plugins (SOW & Vendors) are enabled and loaded when you need them, without writing js code!
So Smarty is very fast out of the box, without any tuning!
To customize Smarty using GULP (change colors, etc), edit:
Smarty console debug
Smarty is showing you a lot of info in your browser console (development purposes).
Edit gulp.config.settings.js and set:
Enable debug: console_debug : true
Disable debug: console_debug : false
RTL Build (Right To Left - Arabic direction)
Edit src/scss/_variables.scss and set it to "true":
$global-rtl-enable: true !default
That's all - the CSS is completely built in RTL mode!
Color scheme (blue default)
Edit src/scss/_variables.scss and change your hex here:
$primary: #574fec !default; // #377dff - blue, default theme color
That's all - the CSS is completely built in RTL mode!
1. Install NODE

You need to install Node first.

2. Install GULP

Node was the most important because now we have npm command to install gulp:

                npm install --global gulp
3. Install Smarty Modules

At this point, your PC is ready for development. You can check the installation by typing: npm --version and gulp --version
Now we install the required modules used by Smarty to compile the final css/js files. A directory called npm_modules will be created.
In the same directory with package.json file, type in your console:

                npm install
4. Smarty gulp help

Now you can see all Smarty functions in GULP:

                gulp :help

This default task will create the final css/js files in dist directory, ready for production (to use them in your project):
If you compile the project for RTL, don't forget to edit src/scss/_variables.scss and change $global-rtl-enable: true !default;


You can enable/disable the plugins you want by editing 2 gulp config files: gulp.config__core.js and gulp.config__vendors.js.
Set for each one you want to disable: enable: false

Wasn't that much, isn't it? Each time you change something in js/scss files, you need to repeat the last step.
BUT! You can also use the watch function and will autobuild when you make changes and save.

                gulp watch
New Project

Useful to start a new fresh project. Will create a folder containing the files you need to start.
A builtin webserver is also available! After creating the new project folder, your can start a webserver.

                gulp create --new my_project
                gulp watch --dest my_project

*watch = an watcher is active for "my_project". When changes are detected to src/js/* & src/scss/*, files are rebuilt.

Builtin Webserver

You can start a local webserver. But please keep in mind that this is a minial webserver.
No PHP server integrated, so contact forms will not work! Its purpose is for preview and development only (html/css/js)!
You can just move your project folder to your real local webserver, as you usually do!

                gulp webserver --root my_project

(watch + webserver + browser autoreload)

Explanatory videos

Install NPM
Install Smarty NPM Modules
Smarty Build
Smarty New Project
Smarty Deploy

Deploying "my_project" folder to webserver.