Gulp Task for SASS Compilation, CSS Optimization, and Concatenation

Gulp Workflow for CSS Optimization

This Gulp task automates the process of compiling SASS files, removing unused CSS, concatenating stylesheets, and minifying the result.

Gulp Code

var gulp = require("gulp");
var uncss = require("gulp-uncss");
var sass = require("gulp-sass");
var concat = require("gulp-concat");
var nano = require("gulp-cssnano");

gulp.task("default", function () {
  return gulp
    .src("styles/**/*.scss") // Source SASS files
    .pipe(sass()) // Compile SASS to CSS
    .pipe(concat("main.css")) // Concatenate into a single file
    .pipe(
      uncss({
        // Remove unused CSS
        html: ["index.html", "posts/**/*.html", "http://example.com"],
      })
    )
    .pipe(nano()) // Minify CSS
    .pipe(gulp.dest("./out")); // Output destination
});

Key Features

1. SASS Compilation Converts .scss files to .css using gulp-sass.

2. CSS Concatenation Combines multiple CSS files into a single file for efficiency.

3. Unused CSS Removal Strips out unused CSS selectors using gulp-uncss.

4. CSS Minification Reduces file size for better performance with gulp-cssnano.

5. Output Directory The final optimized CSS file is saved in the ./out folder.

Tips

• HTML References for UnCSS: Ensure all HTML files or URLs used for uncss point to valid paths or live webpages for accurate unused CSS detection.

• Source Maps: Use source maps during development to trace back CSS rules to their source .scss files.

Conclusion

This Gulp task is ideal for modern web projects that require:

• Optimized stylesheets for production.

• SASS preprocessing with automated CSS cleanup.

• Streamlined build processes with minimal manual intervention.