Gulp Workflow Management System for Front-End Automation
The aim of this project was to create a fully automated Front-End Development webpage with the use of Gulp.js and a Workflow Management System
This project focuses on the importance of using a Workflow Management System when developing a Front-End Development Project. Its main emphasis will be on creating an image-based management system using the Gulp.js automation tool. The main goal behind this project was to develop a completely automated HTML image portfolio page, meaning the user of the system may create a fully functional HTML webpage using only the Node.js command line. The system makes use of multiple image size outputs, image optimization, visible digital watermarking and image EXIF data. It will use the newly introduced srcset element to help the browser load the correct image size. To achieve this, the browser looks at the viewport size, the bandwidth speed available to it and screen resolution of the device. The front-end of the system is purposely designed to show image optimization and srcset working. The main design is put together using the Bootstrap 4 Grid System.
The goal of this project was to research and prove that a Workflow Management System was the optimum choice for developing any Front-End Development System. The testing phase of the project proved that working with a build tool like Gulp.js and developing within a Workflow Management System environment produced sped up load times of the web page by 70%. The optimization of images within this workflow proved to show that optimized images use up to 70% less bandwidth data to load. The implementation of srcset and sizes within this project also showed a 2% increase in load times when the site was accessed using a smartphone.