Landing page builder with gulp
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.
- 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
Let me know what you think on twitter @rdallaire