Gulp Task For SCSS to CSS Conversion -Tutorial Savvy

In my previous post we have introduced to Gulp task.
In this Demo, “We will learn about gulp-sass plugin and create a task that reads the SCSS file generate the CSS file and listens to changes to SCSS file and generates the corresponding CSS”.
The gulp-sass plugin can be used to create a Gulp task to generate CSS from SCSS file.The gulp-sass plugin can be found in the following link:-

https://www.npmjs.com/package/gulp-sass

The gulp-sass plugin can be installed using npm install gulp-sass –save-dev command.The following screenshot shows the terminal with gulp-sass plugin installation.

The gulp.src() method takes an array of file and Returns a stream of Vinyl files that can be piped to next plugin.
The gulp.watch() method takes an array of files and returns an EventEmitter that emits change events.
To demonstrate gulp-sass task we have created a project named FruitListDemo.The directory structure of the project are as follows:-

The package.json contains the dependencies entries for the FruitListDemo project.The code content of package.json file are as follows:-

{
  "name": "FruitListDemo",
  "version": "0.0.1",
  "description": "Gulp SASS to CSS task",
  "scripts": {
    "startGulp": "gulp"
  },
  "author": "Sandeep",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-sass": "^2.0.4"
  }
}

The app.scss file contains the SASS code for styling the HTML element present inside the index.html file.The code content of app.scss file are as follows:-

.fruitContainer{
  .textHeader{
    color:blue;
  }
  ol{
    li{
      font-size: 20px;
      color:darkgreen;
    }
  }
}

The index.html file contains HTML element, a header tag and ordered list with different fruit name listed in it.The code content of index.html file are as follows:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gulp Task For SASS to CSS conversion</title>
    <link rel="stylesheet" href="app.css">
</head>
<body>
    <div class="fruitContainer">
        <h1 class="textHeader">Fruit List</h1>
        <ol>
            <li>Apple</li>
            <li>Orange</li>
            <li>Grape</li>
            <li>Banana</li>
        </ol>
    </div>
</body>
</html>

The gulpfile.js contains the definitions of Gulp tasks.The name of the tasks are sassTask, default, sassTaskWatch.The code content of gulpfile.js are as follows:-

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

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

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

gulp.task('default',['sassTask','sassWatchTask']);

We can run the sassTask using gulp sassTask command.This task is responsible for loading all the SCSS file present in the root directory and then piped the vinyl stream the gulp-sass plugin to generate the CSS stream.The generated CSS stream then stored as a file in the root directory.In this example app.css file is generated by this task.The following screenshot shows a terminal with sassTask in execution.

The sassWatchTask uses the watch() method to detect the changes in the SCSS file.If any change occurs in SCSS file it re-runs the sassTask to generate the updated CSS file and continue watching SCSS files.The following screenshot shows the sassWatchTask in execution.

The default task is the combination of sassTask and sassWatchTask.It generates the CSS file for first time and continue listening to the changes in SCSS file.The following screenshot shows the default task in execution.

The updated structure of FruitListDemo contains the generated CSS file app.css and looks like following screenshot.

The app.css file is generated by the sassTask which is used by the index.html file to style the HTML elements.The code content of app.css file are as follows:-

.fruitContainer .textHeader {
  color: blue; 
}

.fruitContainer ol li {
  font-size: 20px;
  color: darkgreen; 
}

The output of the demo is as follows with a header and list of fruit item rendered in the body of chrome browser.

The demo code can be downloaded from the following link:-

https://github.com/saan1984/FruitListDemo

Sep 7, 2015Sandeep Patel

Gulp Task For SCSS to CSS Conversion

Related

Sandeep Patel