Sass plugin for Gulp to compile SASS to CSS 8x faster
MIT License
This project aims to provide a fast and efficient way to compile SCSS to CSS using Gulp, leveraging the capabilities of the Grass rust library. With this setup, you can streamline your front-end development workflow, ensuring quick on-fly compilation times and a smooth integration with your existing Gulp tasks.
This project is designed to enhance your development experience in Visual Studio by combining the power of modern JavaScript tools with the performance benefits of Rust.
Node.js · Rust · Gulp · Grass · N-API
This project is built primarily to be used in Visual Studio with Task Runner Explorer, but it can also be used from anywhere using the CLI.
You need Visual Studio with the built-in Task Runner Explorer or gulp-cli
to run Gulp from the terminal.
Due to the nature of Rust being compiled into native libraries, this package is built specifically for the following architectures. Please ensure your system matches one of the following to use this package:
npm install --save-dev gulp @xakpc/gulp-grass-sass
gulpfile.js
in the root of your project with the following content:
/// <binding ProjectOpened='watch' />
const { watch, src, dest } = require('gulp');
const compile = require('@xakpc/gulp-grass-sass');
// Task to compile SCSS to CSS without minification using rust Grass lib
function compileSassFastish() {
return src('wwwroot/css/main.scss')
.pipe(compile().on('error', e => { console.log(e); }))
.pipe(dest('wwwroot/css'));
}
exports.compileCssFastish = compileSassFastish;
// Task to watch for changes in scss files
exports.watch = function () {
watch('wwwroot/css/*.scss', compileSassFastish);
};
gulp-grass-sass
is built to be used in a Gulp task.
To compile your CSS with a build task, then watch your files for changes, you might write something like this:
const gulp = require('gulp');
const compile = require('@xakpc/gulp-grass-sass');
function compileStyles() {
return gulp.src('./wwwroot/sass/**/*.scss')
.pipe(compile().on('error', e => { console.log(e); }))
.pipe(gulp.dest('./wwwroot/css'));
};
exports.compileStyles = compileStyles;
exports.watch = function () {
gulp.watch('./wwwroot/sass/**/*.scss', compileStyles);
};
To run it you have a several options
watch
task in Visual Studio
<binding ProjectOpened='watch' />
).gulp-cli
installed
gulp watch
To change the final output of your CSS, you can pass an options object to compile
function.
The following options are available in the grass
library, and therefore in gulp-grass-sass
as well:
export const enum SassSyntax {
Sass = 'Sass',
Css = 'Css',
Scss = 'Scss'
}
export const enum SassOutputStyle {
Expanded = 'Expanded',
Compressed = 'Compressed'
}
export interface SassOptions {
sassSyntax?: SassSyntax
outputStyle?: SassOutputStyle
includePaths?: Array<string>
}
The Grass library has more options so more of them could be added in the future if needed.
All of the options are optinonal
sassSyntax
would usually be determined from file extension, Scss
by defaultoutputStyle
is Expanded
by defaultincludePaths
are paths on the filesystem that Sass will look in when locating modules. For example, if you pass pages/
as a load path, you can use @import "index.cshtml.scss"
to load pages/index.cshtml.scss
.Note: @import "index.cshtml"
would not work, .scss
extension is required here.
function compileStyles() {
return gulp.src('./wwwroot/sass/**/*.scss')
.pipe(compile({outputStyle: 'Compressed'}).on('error', e => { console.log(e); }))
.pipe(gulp.dest('./wwwroot/css'));
};
exports.buildStyles = compileStyles;
Source maps are not supported in the grass
library, and therefore not in gulp-grass-sass
either.
Thank you for considering a contribution to the project! Contributions make the open source community a vibrant and innovative space. I appreciate your efforts to make this project even better.
If you have a suggestion or feature you’d like to add, here’s how you can contribute:
git checkout -b feature/YourFeatureName
.git commit -m "Add filtering by tag functionality"
.git push origin feature/YourFeatureName
.bug
to help maintainers quickly see what’s wrong.enhancement
. Describe what you’d like to see and why it’s a valuable addition.Distributed under the MIT License. See LICENSE.txt
for more information.
Pavel - @xakpc
Project Link: https://github.com/xakpc/gulp-grass-sass/
My personal blog: xakpc.info