Компиляция Sass-файла

Для компиляции Sass-файла нам понадобится пакет gulp-sass.

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

Переименуйте файл main.css в main.scss и встройте его в задачу mincss (также для этого вы можете создать отдельную задачу).

gulp.task('mincss', function(){
 return gulp.src('main.scss')
   .pipe(sass().on('error', sass.logError))
   .pipe(minifyCss())
   .pipe(gulp.dest('main'));
});

Теперь удалите всё что есть в main.scss и добавьте следующий код:

$color-title: #333;
h1{
  color:$color-title;
}

Выполните команду gulp. Если теперь вы проверите main/main.css, то должны увидеть:

h1{color:#333}

Вывод уведомления

Добавление уведомления — одна из самых простых вещей, которые делаются с Gulp. Просто включите gulp-notify в свой gulpfile.js

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

Затем пропустите CSS через это:

gulp.task('mincss', function(){
  return gulp.src('main.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCss())
    .pipe(gulp.dest('main'))
    .pipe(notify('Done! master zooboole.'));
});

Всё, что вам нужно сделать, это просто передать сообщение для отображения в notify(). Затем запустите gulp. Если всё хорошо, вы должны увидеть нечто вроде этого: