Introduction to gulp-sass

Gulp-sass is a powerful tool for compiling Sass files to CSS, enabling seamless workflow integration with the Gulp task runner. It offers a plethora of APIs for enhanced development efficiency. In this guide, we will explore various gulp-sass API examples and demonstrate how to use them in an application.

Installing gulp-sass

To install gulp-sass, use the following command:

npm install gulp-sass sass gulp --save-dev

Basic Usage

Create a simple task to compile Sass files to CSS:

  const gulp = require('gulp');
  const sass = require('gulp-sass')(require('sass'));

  gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(gulp.dest('./css'));
  });

API Examples

Error Handling

Handle errors during compilation using the sass.logError method:

  gulp.src('source/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));

Output Style

Define the output style of the compiled CSS using the outputStyle option:

  gulp.src('source/scss/*.scss')
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));

Source Maps

Generate source maps for better debugging using gulp-sourcemaps:

  const sourcemaps = require('gulp-sourcemaps');

  gulp.task('sass', function () {
    return gulp.src('source/scss/*.scss')
      .pipe(sourcemaps.init())
      .pipe(sass().on('error', sass.logError))
      .pipe(sourcemaps.write('./maps'))
      .pipe(gulp.dest('dist/css'));
  });

Watching Files

Watch files for changes and recompile Sass using gulp.watch:

  gulp.task('watch', function () {
    gulp.watch('./sass/**/*.scss', gulp.series('sass'));
  });

Application Example

Let’s create a simple application that compiles Sass to CSS, handles errors, uses compressed output style, and generates source maps.

  const gulp = require('gulp');
  const sass = require('gulp-sass')(require('sass'));
  const sourcemaps = require('gulp-sourcemaps');

  gulp.task('sass', function() {
    return gulp.src('source/scss/*.scss')
      .pipe(sourcemaps.init())
      .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
      .pipe(sourcemaps.write('./maps'))
      .pipe(gulp.dest('dist/css'));
  });

  gulp.task('watch', function() {
    gulp.watch('source/scss/*.scss', gulp.series('sass'));
  });

  gulp.task('default', gulp.series('sass', 'watch'));

With this setup, you can seamlessly compile Sass files, handle errors, and watch for changes automatically.

Happy coding!

Hash: e82af42fcd33adb3dcf39c95aeed1f10c1338591136e516aed9d1beef90a77ef