A Simple Gulp'y Workflow For Sass

Key Takeaways

• A Gulp workflow can improve the Sass compilation time in large Rails projects, moving away from the asset pipeline and embracing the speed of LibSass.
• The Gulp workflow includes Sass compilation with LibSass, generating sourcemaps for easier debugging, prefixing CSS with Autoprefixer, and generating Sass documentation with SassDoc.
• The workflow can be further optimized by adding a watch task that monitors changes in stylesheets to recompile them, eliminating the need to manually run the sass task after every file save.
• A ‘prod’ task can be created for deploying to production, which compiles Sass in compressed mode, prefixes CSS with Autoprefixer, regenerates SassDoc documentation, and avoids any sourcemaps.

I have recently been in charge of optimizing the Sass side of quite a big Rails project, and one of most important things to do was to improve the compilation time. Because of the Sass architecture in place and the fact that Ruby Sass (through the Rails asset pipeline in this case) tends to be slow when dealing with a huge number of files, it could take up to 40 seconds to compile the stylesheets. Talk about a fast development process. :)

My idea was to move away from the asset pipeline and embrace the speed of LibSass. To make things easier I decided to go with a simple Gulp workflow. It was the first time I would be using Gulp, and I must say it was quite an enjoyable experience (which was not the case for Grunt as far as I am concerned).

In this short article, let’s just have a quick tour on how to set up a Gulp’y workflow to work with Sass. Here is what we will include:

• Unsurprisingly, Sass compilation with LibSass
• Generating sourcemaps for easier debugging
• Prefixing CSS with Autoprefixer
• Generating Sass documentation with SassDoc

Compiling Sass

Watch AtoZ: Sass Learn Sass letter by letter Watch This Course Watch This Course

The first thing to do is to install the dependencies and to create a Gulpfile.js. We will need Gulp (no shit, Sherlock), but also gulp-sass to compile our stylesheets:

$ <span>npm install gulp gulp-sass --save-dev</span>

This line tells npm to install both gulp and gulp-sass packages as development dependencies. You can now find them in the devDependencies object of your package.json. And the Gulpfile.js:

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

Wow, that was short. What we need now is a task to run Sass (actually gulp-sass) on our stylesheets folder.

$ <span>npm install gulp gulp-sass --save-dev</span>

That’s it! We can now compile our stylesheets using LibSass thanks to a very minimal Gulp task. What about that? We can pass options to gulp-sass to compile stylesheets in expanded mode and to print errors in console:

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

Adding sourcemaps

So far, so good. Now, what about generating sourcemaps? In case you don’t know what sourcemaps are, it basically is a way to map compressed production sources with expanded development sources in order to make debugging live code easier. They are not restricted to CSS at all, sourcemaps can be used in JavaScript as well.

We have a nice article about sourcemaps here at SitePoint. Feel free to give it a read before going on if you feel a bit short on the understanding of sourcemaps.

Okay, so to add sourcemaps generation to our task, we need to install gulp-sourcemaps:

<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>// Find all `.scss` files from the `stylesheets/` folder
</span>    <span>.src(input)
</span>    <span>// Run Sass on those files
</span>    <span>.pipe(sass())
</span>    <span>// Write the resulting CSS in the output folder
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

And now let’s optimise our task:

<span>var sassOptions = {
</span>  <span>errLogToConsole: true,
</span>  <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

By default, gulp-sourcemaps writes the sourcemaps inline in the compiled CSS files. Depending on the project setup, we might want to write them in separate files, in which case we can specify a path relative to the gulp.dest() destination in the sourcemaps.write()function like:

$ <span>npm install gulp-sourcemaps --save-dev</span>

Bringing Autoprefixer to the party

I won’t go into much detail about why using Autoprefixer is better than writing vendor by hand (or with a mixin which is basically the same thing), but roughly Autoprefixer is a post-processing step meaning it actually updates already compiled stylesheets to add relevant prefixes based on an up-to-date database and a given configuration. In other words, you tell Autoprefixer which browsers you want to support, and it adds only relevant prefixes to the stylesheets. Zero effort, perfect support (please remind me to patent this catch phrase).

To include Autoprefixer in our Gulp’y workflow, we only need it to pipe it after Sass has done its thing. Then Autoprefixer updates the stylesheets to add prefixes.

First, let’s install it (you get the gist by now):

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write())
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Then we add it to our task:

gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write('./stylesheets/maps'))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Right now, we run with the default configuration from Autoprefixer which is

• Browsers with over 1% market share,
• Last 2 versions of all browsers,
• Firefox ESR,
• Opera 12.1

We can use our own configuration like so:

$ <span>npm install gulp-autoprefixer --save-dev</span>

Release the docs!

The last, but not least, tool to add to our workflow, Sass documentation generation with SassDoc. SassDoc is to Sass what JSDoc is to JavaScript: a documentation tool. It parses your stylesheets looking for comment blocks documenting variables, mixins, functions and placeholders.

If your project uses SassDoc (it should!), you can add the automatic documentation generation in your Gulp workflow.

The cool thing with SassDoc is that it can be piped directly in Gulp because its API is Gulp compatible. So you don’t actually have a gulp-sassdoc plugin.

$ <span>npm install gulp gulp-sass --save-dev</span>

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');</span>

Note that depending on the size of your project and the number of documented items, SassDoc can take up to a few of seconds to run (rarely above 3 as far as I’ve noticed), so you might want to have a separate task for this.

<span>var input = './stylesheets/**/*.scss';
</span><span>var output = './public/css';
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>// Find all `.scss` files from the `stylesheets/` folder
</span>    <span>.src(input)
</span>    <span>// Run Sass on those files
</span>    <span>.pipe(sass())
</span>    <span>// Write the resulting CSS in the output folder
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Again, we use the default configuration but we can use our own if we want to.

<span>var sassOptions = {
</span>  <span>errLogToConsole: true,
</span>  <span>outputStyle: 'expanded'
</span><span>};
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

I’m watching you

There is still something we can do before leaving: creating a watch task. The point of this task would be to watch for changes in stylesheets to recompile them again. It is very convenient when working on the Sass side of the project so you don’t have to run the sass task by hand every time you save a file.

$ <span>npm install gulp-sourcemaps --save-dev</span>

Here is another reason why I recommend not including SassDoc in the sass task: you probably don’t want to regenerate the docs every time you touch a stylesheet. This is likely something you want to do on build or push, maybe with a pre-commit hook.

Adding the final touch

A last, yet important, thing to think about: running sass in the default task.

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var sourcemaps = require('gulp-sourcemaps');
</span>
<span>// ... variables
</span>
gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write())
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

The array passed as second argument of the task(..) function is a list of dependency tasks. Basically, it tells Gulp to run those tasks before running the one specified as a third argument (if any).

Also, we could probably create a prod task that could be run right before deploying to production (maybe with a git hook). This task should:

• Compile Sass in compressed mode
• Prefix CSS with Autoprefixer
• Regenerate SassDoc documentation
• Avoid any sourcemaps

gulp<span>.task('sass', function () {
</span>  <span>return gulp
</span>    <span>.src(input)
</span>    <span>.pipe(sourcemaps.init())
</span>    <span>.pipe(sass(sassOptions).on('error', sass.logError))
</span>    <span>.pipe(sourcemaps.write('./stylesheets/maps'))
</span>    <span>.pipe(gulp.dest(output));
</span><span>});</span>

Final thoughts

That’s it folks! In just a couple of minutes and a few lines of JavaScript, we have managed to create a powerful little Gulp workflow. You can find the full file here. What would you add to it?

Frequently Asked Questions (FAQs) about Gulp and SASS Workflow

How do I install Gulp and SASS for my project?

To install Gulp and SASS for your project, you need to have Node.js and npm installed on your computer. Once you have these, you can install Gulp globally by running the command npm install --global gulp-cli in your terminal. After that, navigate to your project directory and run npm init to create a package.json file. Then, install Gulp and gulp-sass in your project by running npm install --save-dev gulp gulp-sass.

How do I compile my SASS files using Gulp?

To compile your SASS files using Gulp, you need to create a Gulp task. In your gulpfile.js, you can create a task named ‘sass’ that will compile your SASS files into CSS. Here’s a simple example of how to do this:

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

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

This task will take all .scss files in your sass directory, compile them into CSS using gulp-sass, and output the resulting CSS files in your css directory.

How do I watch for changes in my SASS files and automatically compile them?

Gulp provides a method called watch that you can use to automatically run tasks whenever files are changed. Here’s how you can modify the ‘sass’ task to watch for changes:

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

Now, whenever you save a .scss file in your sass directory, the ‘sass’ task will automatically run and compile your SASS files into CSS.

How do I handle errors in my SASS files?

When compiling SASS files, you might encounter syntax errors. You can handle these errors using the on method provided by gulp-sass. Here’s how you can modify the ‘sass’ task to log errors:

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

Now, whenever there’s a syntax error in your SASS files, gulp-sass will log the error and continue with the task.

How do I use Gulp to minify my CSS files?

To minify your CSS files, you can use a Gulp plugin called gulp-clean-css. First, install it in your project by running npm install --save-dev gulp-clean-css. Then, you can create a task that will minify your CSS files:

var cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', () => {
return gulp.src('styles/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});

This task will take all .css files in your styles directory, minify them using gulp-clean-css, and output the resulting minified CSS files in your dist directory.

The above is the detailed content of A Simple Gulp'y Workflow For Sass. For more information, please follow other related articles on the PHP Chinese website!