Для компіляції Sass-файлу нам знадобиться пакет gulp-sass.
<code data-language="javascript">var sass=require('gulp-sass');
Перейменуйте файл main.css на main.scss і вбудуйте його в завдання mincss (також для цього ви можете створити окреме завдання).
<code data-language="javascript">gulp. task('mincss', function(){ return gulp.src('main.scss') .pipe(sass().on('error', sass.logError)) .pipe(minifyCss()) .pipe(gulp .dest('main')); "css">$color-title: #333; h1{color:$color-title; }
Виконайте команду gulp. Якщо тепер ви перевірите main/main.css, то маєте побачити:
h1{color:#333}
Висновок Повідомлення
Додати повідомлення є однією з найпростіших речей, які робляться з Gulp. Просто увімкніть gulp-notify у свій gulpfile.js
<code data-language="javascript">var notify=require('gulp-notify');
Потім пропустіть CSS через це:
<code data-language="javascript">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. Якщо все добре, ви повинні побачити щось на кшталт цього: