Working website: Joomla website where you are integrating Master Bootstrap template
Repository folder: Folder where your clone of Master Bootstrap resides.
Description
This integrates a Gulp build system that will automatically:
Copy any modified files from your repository folder to the working website folder.
Watch template.js and compile it when modified to template.min.js to both repository folder and working website
Watch Sass files and compile them when modified to both repository folder and working website.
When a file is modified Browsersync is automatically reloaded so you get your changes refreshed directly in your web browser.
Release the extension when needed.
Explaining the Gulp workflow
The workflow intended to be used by Gulp is:
You have a working website (you are integrating or testing master-bootstrap-3 on a joomla website)
Instead of having to symblink or copy/reinstall files when you modify them you will work always on the master-bootstrap-3 repository folder.
Initially you use Install from folder Joomla feature to install the template from the repository folder. You can also run discover install if you have already copied the files to the working website
Then in your repository folder run gulp and the Gulp system will copy files, start watching for changes and updating automatically the website and refresh the browser,
Setup Gulp
Install Node.js using the method that applies to your OS. Check https://nodejs.org/
Enter in your repository folder and install all the Node.js dependencies with: npm install
Duplicate gulp-config.dist.json to gulp-config.json and change the settings there to adjust them to your local system:
wwwDir: folder where your joomla website is. It will be used to copy files there when modified
Run gulp to start the Gulp system. Gulp will keep running to detect any modification done to the files and execute the required task associated to that file. Stop it when you stop working on the project.
Available Gulp tasks
You can run any task listed here from terminal.
gulp clean: Cleans all the template files from the working website.
gulp copy: Copies template files to the working website.
gulp watch: Starts watching for changes in the repository folder to compile them and update the working website and local files.
gulp sass: Compile Sass files in the repository folder and copy them to the local css folder + working website css folder
gulp scripts: Compile template.js from the repository folder and copy results to the local js folder + working website js folder
gulp release: Create an installable zip file in the releases folder so it can be installed on a joomla website.
gulp. When running gulp with no tasks it will run the default task. That automatically launches: copy, watch, browser-sync. So it will copy all the files to the working website, start watching for changes there and launch an instance of BrowserSync in your browser that will be automatically refreshed when any change is done to the template files.
Glosary
Working website: Joomla website where you are integrating Master Bootstrap templateRepository folder: Folder where your clone of Master Bootstrap resides.Description
This integrates a Gulp build system that will automatically:
template.jsand compile it when modified totemplate.min.jsto both repository folder and working websiteExplaining the Gulp workflow
The workflow intended to be used by Gulp is:
master-bootstrap-3on a joomla website)master-bootstrap-3repository folder.Install from folderJoomla feature to install the template from the repository folder. You can also run discover install if you have already copied the files to the working websitegulpand the Gulp system will copy files, start watching for changes and updating automatically the website and refresh the browser,Setup Gulp
npm installgulp-config.dist.jsontogulp-config.jsonand change the settings there to adjust them to your local system:wwwDir: folder where your joomla website is. It will be used to copy files there when modifiedbrowserConfig: BrowserSync settings if you want to modify them. Check https://www.browsersync.io/docs/options/gulpto start the Gulp system. Gulp will keep running to detect any modification done to the files and execute the required task associated to that file. Stop it when you stop working on the project.Available Gulp tasks
You can run any task listed here from terminal.
gulp clean: Cleans all the template files from the working website.gulp copy: Copies template files to the working website.gulp watch: Starts watching for changes in the repository folder to compile them and update the working website and local files.gulp sass: Compile Sass files in the repository folder and copy them to the localcssfolder + working websitecssfoldergulp scripts: Compiletemplate.jsfrom the repository folder and copy results to the localjsfolder + working websitejsfoldergulp release: Create an installable zip file in thereleasesfolder so it can be installed on a joomla website.gulp. When running gulp with no tasks it will run the default task. That automatically launches:copy,watch,browser-sync. So it will copy all the files to the working website, start watching for changes there and launch an instance of BrowserSync in your browser that will be automatically refreshed when any change is done to the template files.