gulp-sass-monster

:us: English | :ru: Русский язык

Gulp plugin for node-sass with steroids. The project is a revised version gulp-sass and updated gulp-sass-extended, which is no longer supported

Installation

npm i --save gulp-sass-monster
# or using yarn cli
yarn add gulp-sass-monster

Usage example

const gulp = require('gulp');
const sassMonster = require('gulp-sass-monster');
const options = {};
const isSync = true;

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

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

Options

You can use the same parameters as for node-sass.
Two parameters are an exception - file and data, they are setting by the plugin.

Extra options

addVariables

type Object | default undefined

Adds custom variables to the renderer.

This parameter is useful only if you compute some values and want to add their result to sass render. Static properties are easier to set in the files themselves.

A few details about the values for this option:

• each property will be a Sass variable;
• If the property is an array, it will be Sass list;
• If the property is an object, it will be Sass map;

Note. You should not have more than one level of nesting in objects and arrays. Otherwise, you may receive incorrect data.

Example:

const gulp = require('gulp');
const sassMonster = require('gulp-sass-monster');
const sourcemaps = require('gulp-sourcemaps');
const options = {
    addVariables: {
        PRODUCTION: yourProductionValue, // true for example
        someOtherDynamicVar: calculatedValue, // '12px' for example 
        myColorsMap: {
            color1: 'blue',
            color2: 'yellow',
        },
        pointList: [
            '1024px',
            '1280px',
            '1366px'
        ]
    }
};
const isSync = true;

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

Before sending to the render, the corresponding code will be added to the body of the files

/* generated */ $PRODUCTION: true;
/* generated */ $someOtherDynamicVar: 12px;
/* generated */ $myColorsMap: (color1: blue, color2: yellow);
/* generated */ $pointList: (1024px, 1280px, 1366px);
/// then your code from file 

If the file contains a @charset (which by specification can only be found at the beginning of the file), a block of variables will be inserted after it.

Impact on sourcemaps. You will notice some inconsistencies in the line numbers in the generated sourcemaps and the original files. The more you add variables, the more this discrepancy, since your content will be shifted due to the addition of a block of variables.

afterRender(result, file)

type function | default undefined

Аргументы

• result {Object} - node-sass render result
• file {Buffer} - current file

The method is called after a successful render. It is important to know that after this method, there is an internal processing of the data result and compiling sourcemaps (if necessary), if you make changes to the result - this will affect the overall result of the plug-in. Use it carefully.

Example of setting additional watches only on imported files

const gulp = require('gulp');
const sassMonster = require('gulp-sass-monster');
const gulpWatchAndTouch = require('gulp-watch-and-touch');

const sassFileWatcher = gulpWatchAndTouch(gulp);
const options = {
    afterRender (result, file) {
        let filePath = file.path;
        let sources = result.stats.includedFiles;
        let newImports = sassFileWatcher(filePath, filePath, sources);
        if (newImports) {
            console.log(`${file.stem} has new imports`);
        }
    }
};
const isSync = true;

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

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

isSync

The second argument is the sync renderer flag. If you do not specify it as a positive value, an asynchronous render will be performed.

Source Maps

The plugin supports gulp-sourcemaps.

const gulp = require('gulp');
const sassMonster = require('gulp-sass-monster');
const sourcemaps = require('gulp-sourcemaps');
const options = {};
const isSync = true;

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

Sass Rendering Errors

gulp-sass-monster is just a wrapper for preparing files and parameters that are passed to the node-sass render and also performs the processing of its results.

If you have questions or problems with how Sass works, you should refer to the corresponding node-sass and libsass projects.

If you have problems with the work of the plugin gulp-sass-monster - then go here gulp-sass-monster/issues.

Project Info

• Change log
• Contributing Guidelines
• Contributor Covenant Code of Conduct
• License MIT