O'Reilly logo

Mastering PhoneGap Mobile Application Development by Kerri Shotts

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Integrating Sass with Gulp

Before we use Sass, we need to install it in our project and then add some additional code to gulpfile.js. Thankfully, all the steps are fairly simple. The steps are as follows:

  1. Install a version of Sass that Gulp can use by executing the following command:
    $ npm install --save-dev gulp-sass@2.0.4
    
  2. Next, modify gulp/config.js to define where our SCSS files live, and where the output should be placed:
    assets: {
        copy: […],
        code: {…},
        styles: {src:  "www/scss/app.scss",  
                 dest: "www/css"}
    }
  3. Now, create gulp/tasks/copy-scss.js:
    var gulp = require("gulp"), sass = require("gulp-sass"), notify = require("gulp-notify"), sourcemaps = require("gulp-sourcemaps"), gutil = require("gulp-util"), config = require("../config"), settings = require("../settings"), ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required