#02 Начало работы с Gulp.JS

от 2019 - 09 - 03

В файле gulpfile.js прописываются таски (задачи) и запускаются через консоль. Таски можно определить, чтобы они запускались по умолчанию.

function newTask(done) { // Создаем функцию, называем и назначаем для неё параметр
  console.log('Hello World!'); // Тело функции
  done(); // Чтобы завершить функцию, вызываем ее параметр
}

exports.default = newTask; // Экспортируем функцию, чтобы при обращении к файлу gulpfile.js, она вызывалась по умолчанию

Проверить ее работу можно, написав в консоли gulp.

Также можно обратиться к функции как

exports.print = newTask;

Тогда в консоли для ее вызова напишем gulp print.

До версии Gulp 4.0.0 можно встретить другой формат записи. С ним также можно работать в новой версии.

var gulp = require('gulp');

function newTask(done) {
  done();
}

gulp.task(newTask);

Начало работы с SASS

SASS — это препроцессор, позволяющий ускорить работу с CSS. Подробнее о нём можно почитать на оф. сайте или русскоязычной версии сайта.
Код пишется на SASS, через команду в консоли он конвертируется в CSS и в дальнейшем успешно читается браузером.

  1. Нам понадобится скачать и установить плагин Rename

    npm install --save-dev gulp-rename
    

    Плагин позволяет добавлять суффиксы к названию файла.

    rename({suffix: '.min'})
    
  2. Устанавливаем плагин для конвертации SASS в CSS

    npm install --save-dev gulp-sass
    
  3. Устанавливаем плагин Autoprefixer для автоматического добавления префиксов к свойствам CSS3. Подробнее можно узнать на оф. сайте npm менеджера.

    npm install --save-dev gulp-autoprefixer
    
  4. Устанавливаем плагин Source Maps.
    В браузере в консоли разработчика теперь появляется ссылка на файл *.scss, где показывается исходный файл scss со структурированным кодом, вместо минимизированного файла стилей. Подробнее можно узнать на оф. сайте npm менеджера.

    npm install --save-dev gulp-sourcemaps
    
  5. В файле gulpfile.js прописываем

    var gulp = require('gulp');
    var rename = require('gulp-rename'); // Подключение плагина rename
    var sass = require('gulp-sass'); // Подключение плагина sass
    var autoprefixer = require('gulp-autoprefixer'); // Подключение плагина autoprefixer
    var sourcemaps = require('gulp-sourcemaps'); // Подключение плагина source maps
    
    function style_css(done) {
    	
      gulp.src('./scss/style.scss') // Указываем ранее созданный файл SCSS со стилями
      .pipe(sourcemaps.init()) // Инициализируем плагин source maps в начале проекта
      .pipe(sass({ // Конвертация из SASS в CSS
        errorLogConsole: true, // При наличии ошибок, выводит их в консоль
        outputStyle: 'compressed' // Минимизируем файл
      }))
      .on('error', console.error.bind(console)) // Обработчик события, который выведет ошибку в консоль
      .pipe(autoprefixer({ // Вызываем плагин autoprefixer
        browsers: ['last 2 versions'], // Включаем поддержку 2 последних версий браузера
        cascade: false
      }))
      .pipe(rename({suffix: '.min'})) // Добавляет суффикс '.min' к генерируемому файлу style.css
      .pipe(sourcemaps.write('./')) // Записывает данные source maps в файл
      .pipe( gulp.dest('./css/') ); // Размещаем файл в указанную директорию
    
      done();
    }
    
    gulp.task(style_css);
    

    Функция pipe() позволяет выполнить задачу внутри себя после того, как предыдущая задача была выполнена.

    Стили записываем в файл *.scss, после чего в консоли вызываем функцию gulp style_css. В папке css появится файл style.min.css с минимизированными стилями, который прочтёт любой браузер.