CSS властивості
ГлавнаяGulpКомпіляція файлу SASS

Компіляція файлу SASS

174

Для компіляції 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. Якщо все добре, ви повинні побачити щось на кшталт цього: