codingwithalex

How I Used Gulp and Makefile to Automate My Workflow and Boost Productivity

Alex Silva -

When building websites with HTML, CSS, and JavaScript, I quickly realized how tedious it could be to manually compile, minify, and optimize files every time I made changes. As the project grew, these tasks slowed me down and affected my productivity. That’s when I turned to Gulp and Makefile to automate these repetitive tasks, drastically improving my workflow and efficiency.

In this post, I’ll share how I used Gulp to automate essential tasks like compiling SASS, minifying JavaScript and CSS, and optimizing HTML files. I’ll also explain how I integrated a Makefile to further streamline my development process and how this combination of tools saved me time, increased productivity, and allowed me to focus on building features instead of manually handling these tasks.

Why I Chose Gulp for Task Automation

Initially, I was manually compiling SASS files, minifying JavaScript, and optimizing HTML, which became time-consuming and error-prone. This repetitive process was unsustainable as the project grew, and I needed a more efficient way to handle these tasks automatically. That’s where Gulp, a powerful JavaScript task runner, came in.

Gulp allows developers to automate tasks like:

  • Compiling SASS to CSS
  • Minifying JavaScript and CSS files
  • Optimizing HTML files
  • Live-reloading the browser during development

By integrating Gulp into my workflow, I was able to automate these tasks with simple commands, allowing me to focus on development instead of repetitive grunt work.

Setting Up Gulp to Automate Key Tasks

1. Compiling SASS and Minifying CSS

One of the first tasks I automated was compiling SASS into CSS. Gulp makes it incredibly easy to compile SASS, add browser prefixes for compatibility, and minify the resulting CSS for production.

Here’s the code I used to compile and minify my CSS:

const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const autoprefixer = require("gulp-autoprefixer");
const cleanCSS = require("gulp-clean-css");

function styles() {
  return gulp
    .src("src/scss/**/*.scss")  // Source SASS files
    .pipe(sass().on("error", sass.logError))  // Compile SASS
    .pipe(autoprefixer())  // Add vendor prefixes
    .pipe(cleanCSS())  // Minify CSS
    .pipe(gulp.dest("dist/css"));  // Output to dist folder
}

With this setup, I no longer had to manually compile SASS or worry about browser compatibility and optimization. Each time I made a change, Gulp handled everything automatically.

2. Minifying JavaScript

Next, I set up Gulp to minify JavaScript files using the terser plugin. This step ensures that the JavaScript I deploy is optimized for faster loading times.

const terser = require("gulp-terser");

function scripts() {
  return gulp
    .src("src/js/**/*.js")  // Source JS files
    .pipe(terser())  // Minify JS files
    .pipe(gulp.dest("dist/js"));  // Output to dist folder
}

By using Gulp, my JavaScript files are always minified, improving performance without extra manual steps.

3. Optimizing HTML

HTML optimization was another area where Gulp came in handy. I used gulp-htmlmin to remove unnecessary whitespace and optimize my HTML files.

const htmlmin = require("gulp-htmlmin");

function html() {
  return gulp
    .src("src/**/*.html")  // Source HTML files
    .pipe(htmlmin({ collapseWhitespace: true }))  // Minify HTML
    .pipe(gulp.dest("dist"));  // Output to dist folder
}

This step made sure my HTML files were as lightweight as possible, improving page load speed and overall performance.

4. Live Reload with BrowserSync

To streamline development, I integrated BrowserSync to automatically reload the browser whenever I made changes to my files. This setup eliminated the need to manually refresh the browser, allowing me to see updates in real-time.

const browserSync = require("browser-sync").create();

function watch() {
  browserSync.init({
    server: { baseDir: "./dist" },
  });
  gulp.watch("src/scss/**/*.scss", styles).on("change", browserSync.reload);
  gulp.watch("src/js/**/*.js", scripts).on("change", browserSync.reload);
  gulp.watch("src/**/*.html", html).on("change", browserSync.reload);
}

This setup made the development process faster, as I could instantly see changes without manually refreshing the page.

5. Cleaning Build Artifacts

Finally, I used del to create a task that cleans up the build folder before each new build.

const del = require("del");

function clean() {
  return del(["dist"]);
}

This task ensures that my build directory stays clean and up-to-date.

Makefile: Adding More Automation to the Workflow

While Gulp took care of compiling and optimizing files, I wanted an easy way to manage project dependencies, start development servers, and handle deployment. This is where a Makefile came in handy. A Makefile allowed me to define project tasks and streamline the process even further.

Here’s an overview of my Makefile:

# Makefile for automating project tasks

.PHONY: all dev build clean deploy

# Install dependencies
node_modules: package.json
	@npm install

# Development mode
dev: node_modules
	@npm start

# Build for production
build: node_modules
	@npm run build

# Clean build artifacts
clean:
	@rm -rf dist node_modules

# Deploy the site
deploy:
	@bash deploy.sh

Key Features of the Makefile:

  • dev: Starts the development server with hot reload by running npm start.
  • build: Builds the project for production by running npm run build.
  • clean: Deletes the dist folder and node_modules to keep the project clean.
  • deploy: Automates the deployment process via a custom deployment script.

With the Makefile, I could quickly run commands to start development, build the project, or clean up files, making my workflow even more efficient.

How This Setup Improved My Productivity

By integrating Gulp and Makefile into my development process, I was able to:

  1. Automate repetitive tasks: Compiling SASS, minifying files, and optimizing HTML are now handled automatically, saving me from manual intervention.
  2. Improve file management: I could clean up old builds and dependencies with a single command, keeping my project organized.
  3. Speed up development: Live-reloading with BrowserSync eliminated the need for constant manual refreshes, allowing me to see changes instantly.
  4. Simplify deployment: The Makefile’s deployment task automated the process of getting my website live, reducing potential human error.

This setup turned what was once a slow, manual process into an efficient, automated workflow, helping me focus on what matters most: writing code and improving my website.

Conclusion

Using Gulp and Makefile to automate my workflow dramatically improved my productivity as a frontend developer. Gulp allowed me to automate common tasks like compiling SASS, minifying JavaScript, and optimizing HTML files, while Makefile streamlined project management tasks like building, cleaning, and deploying.

If you’re looking to improve your development workflow, consider adding automation with tools like Gulp and Makefile. By automating repetitive tasks, you can free up more time to focus on building features and improving your project.