Gulp и Sass: Установка и настройка, создание первого gulpfile.js

Sass — препроцессор CSS, позволяющий ускорить разработку с помощью циклов, условных операторов и других возможностей. Для использования Sass-кода его необходимо скомпилировать в обычный CSS. Gulp автоматизирует этот процесс.

Создание простейшего Gulp-task

В файле gulpfile.js описываются задачи (tasks). Каждая выполняет определённую функцию. Пример задачи по умолчанию:

function defaultTask(done) {
  console.log('All is working');
  done();
}

exports.default = defaultTask;

Функция defaultTask принимает параметр done. console.log выводит сообщение в консоль, done() сигнализирует о завершении. exports.default = defaultTask; экспортирует функцию как задачу по умолчанию. Запуск gulp в терминале выполнит эту задачу. Вывод:

[gulp] Using gulpfile ~gulpfile.js
[gulp] Starting 'default'...
All is working
[gulp] Finished 'default' after 1.28 ms

Можно создавать множество задач. Например, добавим задачу printHello:

function printHello(done) {
  console.log('Hello World');
  done();
}

exports.printHello = printHello;

Запуск gulp printHello выполнит её, выводя «Hello World».

Альтернативный экспорт функций

Функции можно экспортировать иначе:

const gulp = require('gulp');

gulp.task('printHello', function(done){
  console.log('Hello World');
  done();
});

gulp.task('default', function(done){
  console.log('All is working');
  done();
});

Здесь задачи printHello и default определяются с помощью gulp.task. gulp выполнит default, gulp printHello — соответствующую задачу.

Структура проекта

Создадим:

Папку css для скомпилированных CSS-файлов.
Папку sass для Sass-файлов.
Файл index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Gulp проект</title>
  <link rel="stylesheet" href="css/style.min.css">
</head>
<body>
  <h1>Все работает</h1>
</body>
</html>

Файл sass/style.scss:

body {
  background: red;
}

h1 {
  font-weight: lighter;
}

Копирование и переименование файлов

Создадим задачу для копирования sass/style.scss в css с переименованием в style.min.css:

const gulp = require('gulp');
const rename = require('gulp-rename');

function cssStyle() {
  return gulp.src('./sass/style.scss')
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./css'));
}

gulp.task('css-style', cssStyle);

Используется плагин gulp-rename. gulp css-style скопирует и переименует файл.

Установка и использование gulp-sass

Для компиляции Sass установим gulp-sass:

npm install --save-dev gulp-sass

Добавим задачу компиляции Sass:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const rename = require('gulp-rename');

function cssStyle() {
  return gulp.src('./sass/style.scss')
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./css'));
}

gulp.task('css-style', cssStyle);

sass({ outputStyle: ‘compressed’ }) минифицирует CSS. on(‘error’, sass.logError) обрабатывает ошибки компиляции.

Мы научились создавать базовые Gulp-задачи, использовать плагины для работы с Sass и автоматизировать компиляцию и минификацию CSS. Это упрощает и ускоряет разработку.