2 Gulp Tasks - lilpug/ModFrame GitHub Wiki

Modframe uses gulp file watchers and various gulp tasks to automate the process of minification and concatenation of all CSS and JS files in the layouts, modules and global folders, all the exported CSS and JS files are then placed into the “www\components” folder.

Exported CSS and JS files are grouped via their original corresponding folder locations in the project.

Original location: 
                   layouts\default\css\styles1.css
                   layouts\default\css\styles2.css
Exported Location: 
                   www\Components\layouts\default\css\min.css

It is also possible to create sub exported folder groups within that original folder location.

Original locations: 
                    layouts\default\css\abc\styles.css
                    layouts\default\css\styles1.css 
Exported Locations: 
                    www\components\layouts\default\css\min.css
                    www\components\layouts\default\css\abc\min.css

The plugins folder in the root directory stores additional JS and CSS files which might be required by your project, the folder itself has two main purposes, it allows you to create your own personalised plugin section and it allows you to add JS and CSS files which might not be within bower.

The plugins folder structure consists of the following:-

plugins\
         external\*.*
         personal\
                   {base personal plugin name}\js\*.js
                   {base personal plugin name}\css\*.css

All the content and folder structures inside this folder are synced directly to the "wwwroot\components\extra-plugins\n" folder.

Holds additional sub directories which then contain the CSS and JS folders, by using this structure the files will be minified, concatenated and exported to the "wwwroot\components\extra-plugins\p" folder automatically by the Gulp tasks. The exported structure that is created is the same as the layouts, modules and global folders which can be seen in the "How Do Files Get Exported?" section above.

The files folder can be used throughout ModFrames Modules, Layouts and Global folders. When a files folder is used in ModFrame anything that is inside this folder is automatically synced to wwwroot/files folder structure. This allows you to group particular images or file downloads per Modules, Layouts and Global folders.

Real Path: Application Base/Modules/groupName/module/files/abc.png

Synced Path: Application Base/wwwroot/files/Modules/groupName/module/files/abc.png

ModFrame uses many different Gulp tasks to automate various different tasks in the project but there are only five main gulp tasks which it uses to build, clean and export the files folder and any minified and concatenated CSS and JS files. The five gulp tasks are automatically linked up to the project startup, build and cleaning process in Visual Studio when the project loads. These hooks can be found at the top of the gulpfile.js which is located in the root of the project directory.

This task is a combination of the “1-MF-run” and “3-MF-clean-all” tasks which run after each other by doing the task “3-MF-clean-all” first and then the task “1-MF-run”.

This task ensures the “plugin\external” folder is in sync with its copy in the exported directory and that fresh versions of the minified and concatenated CSS and JS files are built and exported for the layouts, modules, "plugin\personal" and global folders. This also ensures the files folders throughout ModFrame are in sync with the exported directory version.

This task starts up the layouts, modules, plugin, files and global gulp file watchers to ensure any modifications, additions or deletions get instantly represented in the exported directory for on the fly changes.

This task checks any old files and folders that are not required anymore in the exported directory are removed.

This task syncs all the file folders throughout ModFrames modules, layouts and global folders to the exported directory.