I created this gulp tool to provide a robust starting point for creating a webpage that allows me to focus on layout and design. I also wanted something that I could continually add on to as I find better optimizations and best practices change.
View the project on GitHub
Automate common tasks and best practices #
There can be a lot of things to remember (see my requirements below) when creating any website whether it is a large CMS website or a single HTML file. I wanted to focus more on developing the responsive layout and design of the site and automate other tasks and details such as meta tags, inlining CSS, and removing comments.
My requirements #
- High focus on design and content when building pages
- SASS for styling and default SASS variables for things like fonts, spacing, colors, breakpoint sizes and more.
- Minified HTML, CSS, and JS output for production
- Provide minimum HTTP requests and inline CSS and JS
- Score 100 on Lighthouse pagespeed test or as close as possible.
- Use best practices and knowledge such as
Automate responsive images #
I need to add responsive image generation as well as a way to automate
srcset in the markup
Auto optimize images and SVGs #
I haven't found a 100% way of automatically doing image optimization because some images look good at 80% and others need to be at 90% quality before they start looking bad. Right now my workflow is to pre-optimize them then use Gulp to generate
Optimize video files #
I have been using a lot more video screen recordings and animations in my landing pages lately and would like to find a way to automate optimizing these files.
Add gulp-favicon plugin.
More common interactive features #
Pardot landing pages #
I have been using Pardot marketing automation tool for quite a while now and would like to take this project a step further and automate landing pages with it. Right now, it could be used for this but Pardot landing pages have some other features and requirements. Here are my notes:
- Automatically adding editable Pardot fields to relevant HTML elements
- A placeholder form that can be used for development, but then gets switched out for the Pardot
%%content%%tag for production
- May need to re-think about images with work Pardot file upload as well as pre-fixing image sources with the full Pardot URLs (
To be continued... #
I wanted to write out my goals with this tool as a guideline to develop it further. Keep up-to-date on github at rdallaire/gulp-page-builder