- Install Node.js
- Install Gulp globally with
npm install gulp-cli --global
- Make a new directory for your Gulp tasks and Sass files
- Inside that folder initialize npm with
npm init
- Install Gulp and Sass with
npm install gulp gulp-sass --save-dev
- Create a
gulpfile.js
with the following content:
var gulp = require('gulp')
var sass = require('gulp-sass')
gulp.task('scss', function() {
gulp.src('scss/main.scss')
.pipe(sass())
.pipe(gulp.dest('./build/css'))
})
gulp.task('default', ['scss'])
gulp.task('watch', function() {
gulp.watch('scss/**/*.scss', ['scss'])
})
- Create a folder called
scss
with a file called main.scss
- Now you can build it with
gulp
and watch it with gulp watch
I recommend you to also use PostCSS with cssnext for autoprefixing and gulp-clean-css for minifying your CSS. For using that you have to do the following things:
- Install them with
npm install gulp-postcss postcss-cssnext gulp-clean-css --save-dev
- Change your
gulpfile.js
to the following:
var gulp = require('gulp')
var cssnext = require('postcss-cssnext')
var cleancss = require('gulp-clean-css')
var postcss = require('gulp-postcss')
var sass = require('gulp-sass')
gulp.task('scss', function() {
gulp.src('scss/main.scss')
.pipe(sass())
.pipe(postcss([cssnext()]))
.pipe(cleancss())
.pipe(gulp.dest('./build/css'))
})
gulp.task('default', ['scss'])
gulp.task('watch', function() {
gulp.watch('scss/**/*.scss', ['scss'])
})
I also recommend you to read this to learn about the Sass bascis.