On Gulp!

First, setting up the Gulp on mac os:

type:

sudo npm install gulp -g


with the output showing :

npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5

npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue

npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp/bin/gulp.js

+ gulp@3.9.1

added 253 packages from 162 contributors in 52.885s

gulp installed successfully!

Gulp-sass: A tool to convert sass to css:

1. By typing:

$ npm install gulp-sass --save-dev

2. add this in javascript file (to use the gulp-sass plugin):

var gulp = require('gulp');

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

3. with the code below, the scss file will be converted to CSS

gulp.task('sass', function(){

  return gulp.src('source-files')

    .pipe(sass()) // Using gulp-sass

    .pipe(gulp.dest('destination'))

});

For example :

a scss file:

// styles.scss

.testing {
width: percentage(5/7);
}

will become this:

/* styles.css */ 

.testing {
width: 71.42857%;
}

Watching it run once you save it

Gulp provides a function called watch to see any changes applied to the file.

type this in the js file

gulp.task('watch', function(){

  gulp.watch('app/scss/**/*.scss', ['sass']); 

    // Other watchers
})

And you will see it automatically runs whenever you save the file.

Thanks for reading

Osef