Essential Gulp Kit
Jump start your web development workflow with the complete Gulp.js build environment.
- Modern, fast, and flexible Gulp.js workflow setup
- Optimize web assets (HTML, CSS, JS, images, and more) rapidly
- Automate your entire app and web development workflow
- Optimize an unlimited number of files no matter their size
- Manipulate, rename, and do more operations on files
- Run a local web server to test your websites and apps
- Easily integrate into your existing tech stacks
- And benefit from lots of other handful features
Optimize All Website Assets
Optimize all kinds of assets for your front-end development.
From HTML, CSS, and JS to Sass, images, and fonts. The Kit covers all the asset types.
- HTML
- CSS
- JavaScript
- Sass
- Images
- Fonts
And There's More Than Just Optimization!
- Automate Web Development Tasks
- Manipulate Image Size
- Rename Asset Files
- Optimization Presets Included
- Granular Optimization Controls
- Modern Optimization Formats
The Kit is designed to meet all the common needs for creating websites and applications. Optimization is just one of its core features.
Automation is where the Kit saves you the time that would otherwise be spent manually optimizing, copying/pasting, renaming website files, and doing other repetitive tasks.
Below is a list of some of the powerful automation features of the Kit.
- Watch the source directory for modifications to files or folders and automatically optimize them.
- Automatically copy optimized assets from the input (source) folder to the output (public) folder.
- Automatically reload the web browser (tab) when changes are detected to the local website or app.
Forget about manually resizing images in Figma or Adobe Photoshop. Instead, let the Kit handle that task for you.
Simply define a custom output dimension like width for the images (JPEG, JPG, WebP, or PNG), and the Kit will automatically create copies of all the sizes.
One of the convenient features of Essential Gulp Kit is its feature to rename output files. Whether you have HTML, CSS, JS, images, or any other asset file, you can define a custom output file name for each.
For instance, say you want all JPEG images to be converted to WebP format with a suffix of "-1200w". For this, the input file could be named "image.jpg", and the output would be "image-1200w.webp".
Out of the box, the Kit comes with a few optimization presets. They allow you to instantly optimize the selective website files you need, preventing the processing of unneeded files.
Here is a list of all the currently available presets.
- Optimize all assets - optimize all website assets, including HTML, CSS, JS, images, fonts, etc.
- Optimize basic assets only - optimize HTML, CSS, and JavaScript only.
- Optimize images - optimize image files only (JPEG/JPG, PNG, WebP, and AVIF).
You can control to toggle on or off them as you need.
One of the key features of the Kit is its flexibility in providing granular controls to the developers. From optimization to manipulation, you have complete control over how you want to process web and app files.
For example, if you only want to process (optimize) fonts, you can do that without processing all other assets like HTML or image files. Similarly, you can configure the Kit to only process modified (edited) files and folders.
The Kit supports modern and efficient formats such as AVIF (for images) and WOFF2 (for fonts). You no longer rely on online tools and software to convert your images and fonts to modern, optimized formats.
Forget worrying about GTmetrix or Google PageSpeed Insights telling you about old and outdated image formats.
Why Choose Essential Gulp Kit?
Pay Less for More Value
Other software and online tools charge you a lot of money, monthly or annually, to use their services, and still limit you in some ways. For instance, TinyPNG and TinyJPG currently charge about $39 to use their pro image optimization service. That’s a lot just for image optimization!
On the other hand, this Essential Gulp Kit is designed to be affordable with a very low price, yet a powerful Kit that does more than image optimization!
Compare PackagesLifetime Access
The beauty of Essential Gulp Kit is that you only pay once to get lifetime access to the Kit. There are no hidden costs or additional charges for any updates or new releases.
On top of that, you get priority support via your preferred contact methods, such as Slack, Discord, or email. And these are just some of the core kit features. There are lots of other core kit features included in all the packages.
Explore Core Kit FeaturesAll the Essentials in One Kit
Time is money; you don’t have enough time to search, download, test, and integrate dozens of different web development tools in your websites and apps while working.
Essential Gulp Kit saves you time – a complete Gulp.js and Gulpfile.js solution for your web development needs. All the commonly used tools and packages are added in a single toolkit – all thoroughly tested, configured, and updated to their latest versions.
Buy Essential Gulp Kit NowCompare All Packages and Features
Compare the complete feature list of each package below. Need a customized package? Get in touch.
| Features | |||
|---|---|---|---|
| HTML Optimizer - Manipulate, minify, and optimize HTML files. | |||
| Minify inline CSS and JS. | |||
| Remove code comments. | |||
| Remove whitespace characters. | |||
| Rename output files (add prefixes or suffixes to file names). | |||
| CSS Optimizer - Manipulate, minify, and optimize CSS files. | |||
| Concatenate CSS files. | |||
| Add browser vendor prefixes to support all browsers. | |||
| Rename output files (add prefixes or suffixes to file names). | |||
| JS Optimizer - Manipulate, minify, and optimize JS files. | |||
| Concatenate JS files. | |||
| Rename output files (add prefixes or suffixes to file names). | |||
| Basic Image Optimizer - Manipulate, minify, and optimize image files. | |||
| Optimize JPEG/JPG and PNG image files. | |||
| Configure the output image quality and other settings. | |||
| Sass Optimizer - Manipulate, minify, and optimize Sass files. | |||
| Compile or transpile Sass files into CSS. | |||
| Configure CSS output style (compressed or expanded). | |||
| Add browser vendor prefixes to support all browsers. | |||
| Rename output files (add prefixes or suffixes to file names). | |||
| Assets Watcher - Automatically optimize assets upon file or folder modifications. | |||
| Watch for and optimize asset files (HTML, CSS, JS, images, etc.) upon any modifications in the input directory. | |||
| Standard Image Optimizer - Go beyond basic image optimization and manipulation options. | |||
| Convert JPEG and PNG images into the modern and optimized format: WebP | |||
| Configure WebP quality and other settings. | |||
| Fonts Optimizer - Process and optimize font files. | |||
| Convert your TTF font files into the modern and optimized format: WOFF2 | |||
| Keep your original TTF fonts alongside the WOFF2 ones in the output directory. | |||
| Live Server - Run a local live server to serve your local website. | |||
| Automatic browser refreshes/reloads upon modifications to the site. | |||
| Configure server port. | |||
| Pro Image Optimizer - Complete image optimization solution. | |||
| Convert JPEG and PNG images into the modern and optimized format: AVIF | |||
| Rename output image files (add prefixes or suffixes to file names). | |||
| Adjust image dimensions (width and height). | |||
Pro
The ultimate solution for a complete automated development workflow.
Buy Pro- Minify inline CSS and JS.
- Remove code comments.
- Remove whitespace characters.
- Rename output files (add prefixes or suffixes to file names).
- Concatenate CSS files.
- Add browser vendor prefixes to support all browsers.
- Rename output files (add prefixes or suffixes to file names).
- Concatenate JS files.
- Rename output files (add prefixes or suffixes to file names).
- Compile or transpile Sass files into CSS.
- Configure CSS output style (compressed or expanded).
- Add browser vendor prefixes to support all browsers.
- Rename output files (add prefixes or suffixes to file names).
- Watch for and optimize asset files (HTML, CSS, JS, images, etc.) upon any modifications in the input directory.
- Convert your TTF font files into the modern and optimized format: WOFF2
- Keep your original TTF fonts alongside the WOFF2 ones in the output directory.
- Automatic browser refreshes/reloads upon modifications to the site.
- Configure server port.
- Optimize JPEG/JPG and PNG image files.
- Convert JPEG and PNG images into modern and optimized formats: WebP and AVIF
- Configure the output image quality and other settings.
- Adjust image dimensions (width and height).
- Rename output image files (add prefixes or suffixes to file names).
Standard
Go beyond basics with advanced tools to automate repetitive tasks.
Buy Standard- Minify inline CSS and JS.
- Remove code comments.
- Remove whitespace characters.
- Rename output files (add prefixes or suffixes to file names).
- Concatenate CSS files.
- Add browser vendor prefixes to support all browsers.
- Rename output files (add prefixes or suffixes to file names).
- Concatenate JS files.
- Rename output files (add prefixes or suffixes to file names).
- Compile or transpile Sass files into CSS.
- Configure CSS output style (compressed or expanded).
- Add browser vendor prefixes to support all browsers.
- Rename output files (add prefixes or suffixes to file names).
- Watch for and optimize asset files (HTML, CSS, JS, images, etc.) upon any modifications in the input directory.
- Optimize JPEG/JPG and PNG image files.
- Convert JPEG and PNG images into the modern and optimized format: WebP
- Configure the output image quality and other settings.
Basic
The essentials to get started with optimizing and working with basic website assets.
Buy Basic- Minify inline CSS and JS.
- Remove code comments.
- Remove whitespace characters.
- Rename output files (add prefixes or suffixes to file names).
- Concatenate CSS files.
- Add browser vendor prefixes to support all browsers.
- Rename output files (add prefixes or suffixes to file names).
- Concatenate JS files.
- Rename output files (add prefixes or suffixes to file names).
- Optimize JPEG/JPG and PNG image files.
- Configure the output image quality and other settings.
Customized Package
Do you need a customized package with specific tools or optimizers? I've got you covered. Email me your requirements, and I'll create a personalized package for you.
Included in All Packages
All the packages (Pro, Standard, and Basic) include the following core features of the Kit.
1-Click Optimization
Either run the preset batch files or execute the optimization task/script from Windows Command, Terminal, or an IDE like VS Code to instantly optimize your website assets.
Unlimited Files Processing
Optimize as many files and as big file sizes as you want - there's no limitation on the number of files or their sizes you can process or optimize.
Work and Optimize Locally
No internet or online connectivity is required to use the Kit - do everything while offline. Your files stay within your device. Say goodbye to uploading and downloading files.
Global Assets Optimizer
Either optimize all website assets simultaneously in one go (HTML, CSS, JS, images, etc.) or optimize each asset type at a time (images only). You have full control over how you want to optimize your assets.
Global Configuration File
Configure the Kit, individual tool settings, and all other options from a single configuration file. You don't have to find or edit multiple files. The main configuration file includes code comments that explain what each option and function does in detail.
High-Speed Processing
Optimize your files rapidly. The Kit is developed with the best coding practices in mind - ensuring optimal performance and high-speed processing when optimizing website assets.
Recommended Settings Applied
Out of the box, the Kit uses the best optimization options for all asset types (HTML, CSS, JS, fonts, images, etc.), so you don't have to manually configure anything. Instantly optimize website assets within seconds.
Easy Integration
Whether you want to use the Kit stand-alone, integrated with your existing tech stacks like MEAN or MERN, or with your build setup like 11ty or Gatsby, it's all possible without a hassle. Configure the Kit to suit your needs easily.
Modern and Latest Tools
The Kit utilizes the latest modern packages and tools for optimizations and processing. In addition, all the tools are thoroughly tested for bugs or compatibility issues.
Sample Files Included
The Kit has a set of sample asset files (HTML, CSS, JS, etc.) included by default, so you can instantly run the Kit and tools to see the output result.
Lifetime Deal
Pay only once and get lifetime access to the Kit. Get future updates and new version releases for free without additional charges.
Priority Support
I've got your back - technical support, issues, or help - simply let me know your preferred contact method (Slack, Discord, or email), and I'll get back to you within 24 hours.
Improve Your Developer Experience Now
Choose the package that's suitable for you.
Recommended
Pro
$23.99 / LifetimeThe ultimate solution for a complete automated development workflow.
Everything in Standard, plus:
- Optimize fonts
- Run a local web server
- Convert images to AVIF format
- Rename output image files
- Adjust output image dimensions
Standard
$17.99 / LifetimeGo beyond basics with advanced tools to automate repetitive tasks.
Everything in Basic, plus:
- Optimize Sass files
- Watch website files for changes
- Convert images to WebP format
Basic
$11.99 / LifetimeThe essentials to get started with optimizing and working with basic website assets.
- Optimize HTML files
- Optimize CSS files
- Optimize JavaScript files
- Optimize JPEG and PNG images
Questions or Concerns?
Here are some frequently asked questions in case you have any questions or concerns.
What are the prerequisites to using this Kit?
You only need Node.js and npm installed on your PC to use the Kit. You can refer to this beginner-friendly tutorial to download and install both Node.js and npm easily.
I'm not an experienced web developer? Can I still use this Kit?
Of course. To use this Kit, you don't have to be an experienced web developer. Whether you're just starting web development or an expert web developer, you can benefit from this Kit.
The Kit is designed from the ground up to be beginner-friendly upfront. You'll find using the Kit really intuitive and easy. Furthermore, the Kit comes with extensive documentation and code comments in the configuration file that explain what each function and feature does.
If you need any assistance or help using the Kit, feel free to contact me at [email protected].
I'm not a web developer? Is this Kit still useful to me?
Of course. While the Kit is designed primarily for app and web developers in mind, if your work involves, say, optimizing images only, you can benefit from the Kit, too.
The Kit contains many features, such as optimizing font files, running a local server to test your website, adjusting image dimensions (width and height), and more. Therefore, if your use case applies, you should use the Kit to simplify your workflow.
Is there any documentation for this Kit?
Yes, the Kit comes with the comprehensive documentation that is beginner-friendly and easy to understand. All the features, options, and other settings are explained in detail with screenshots and more in the included documentation with the Kit.
Do you offer technical support?
Yes. As part of all the packages, you get priority support if you need help using the Kit. We can talk on Slack, Discord, or email as you prefer.
Do you offer discounts?
Yes. Discounts are given exclusively on certain occasions, such as on a sale or to coupon holders. Subscribe to the W3Things newsletter to get notified of any discount or coupon offers.
What is the Kit's refund policy?
Currently, depending on the nature of the Kit, there's no refund given once you've successfully purchased and downloaded the Kit. Stay subscribed to the W3Things newsletter to get notified of changes to the Kit's refund policy.
I have a question that is not listed here.
Please reach out to me by sending me an email at [email protected]. I'll get back to you within 24 hours. Be sure to be as specific and detailed as possible to quickly assist you.
This website uses cookies to optimize your site experience. By continuing to use the site, you are agreeing to its privacy policy and the use of cookies.