Джентльменский набор front-end разработчика

Введение

Gulp — это таск-менеджер для автоматического выполнения часто используемых задач
(например, минификации, тестирования, объединения файлов), написанный на
языке программирования JavaScript.

Программное обеспечение использует
командную строку для запуска задач, определённых в файле Gulpfile.

Создан как ответвление от проекта Grunt, чтоб взять из него лучшие практики.
Распространяется через менеджер пакетов

NPM

под MIT лицензией.

Если Вы будете копировать код с этой страницы — имейте в виду, что я ставлю кое-где лишние
проблелы — исключительно для того, чтобы текст лучше помещался на экран. Смело удаляйте их.

Это основная статья об использовании Gulp.
В данный момент Вы можете помимо этой прочитать также статьи:

	Как скопировать папку с помощью Gulp
	Объединить и сжать несколько css файлов в один
	Как отправить файлы по ftp с помощью Gulp
	Gulp series
	Обработка только изменённых файлов с помощью gulp.watch().on(‘change’)

Собираем js

Будем используем ES6-синтаксис – понадобится соответствующий плагин, чтобы сохранить кроссбраузерность приложения. Ставим Babel (занимается преобразованием ES6 в ES5):

npm i babel-core
npm i gulp-babel babel-preset-env

Подключаем Babel:

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

Напишем задачу ‘js’, которая будет обрабатывать js-файлы:

gulp.task('js', function () {
    return gulp.src('./src/js/**/*.js')
        .pipe(babel({
            presets: 
        }))
        .pipe(gulp.dest(`${config.build}/js`))
});

Все аналогично задаче css, только вместо postcss в дело вступает babel.

Напишем простенький js-файл с ES6-кодом (пусть это будет script.js, размещенный в папке src/js). Испытаем работу таска:

function hello(name) {
    return `Hello! ${name}`;
}

console.log(hello('Петя!'));

Выполним задачу:

gulp js

Результатом будет файл script.js в папке build/js со следующим содержанием:

'use strict';

function hello() {
    var name = arguments.length >  && arguments[] !== undefined ? arguments[] : 'n/a';

    return 'Hello! ' + name;
}

console.log(hello('Петя'));

В результате работы Babel код немного усложнился по сравнению с исходным.

С одним файлом все хорошо, но что произойдет, если их будет 2, 3, 10 и больше? Совсем неудобно все это подключать к странице. Эту проблему поможет решить модуль gulp-concat.

Поставим его:

npm i gulp-concat

Скорректируем gulpfile:

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

Доработаем таск js:

gulp.task('js', function () {
    return gulp.src(`${config.src}/js/**/*.js`)
        .pipe(babel({
            presets: 
        }))
        .pipe(concat('main.js'))
        .pipe(gulp.dest(`${config.build}/js`))
});

Теперь concat(‘main.js’) объединяет все файлы в один – main.js, который удобно подключать к странице (попробуйте создать несколько файлов и понаблюдайте за результатом).

Научившись обрабатывать стили, JavaScript-код, вы все еще каждый раз набираете gulp ‘task’ в консоли. Это не очень удобно. Можно ли объединить все в одной задаче?

Да, и прежде чем это сделать, напишем еще пару вспомогательных тасков для очистки папки сборки и переноса остальных файлов (html, картинок, шрифтов и т.д.).

Ставим ‘del’:

npm i del

Подключаем:

const del = require('del');

Напишем задачи ‘clr’ и ‘assets’. Первая будет вычищать папку build перед сборкой, а вторая – просто переносить файлы.

gulp.task('clr', function () {
    return del('${config.build}/*')
});

gulp.task('assets', function () {
    return gulp.src('./src/assets/**')
        .pipe(gulp.dest('./build/'));
});

Создадим отдельный таск для html:

gulp.task('html', function () {
    return gulp.src(`${config.src}/assets/*.html`)
        .pipe(gulp.dest('./build'))
});

Теперь можем вычищать нашу директорию сборки и переносить остальные файлы. Но при разработке изменения происходят во многих файлах, и каждый раз нужно пересобирать проект вручную. Чтобы избавиться от этой рутины, воспользуемся методом gulp.watch.

Напишем задачу ‘watch’, которая будет отслеживать изменения в нужных файлах и при необходимости запускать соответствующие таски:

gulp.task('watch', function () {
    gulp.watch(`${config.src}/pcss/**/*.pcss`, gulp.series('css'));
    gulp.watch(`${config.src}/js/**/*.js`, gulp.series('js'));
    gulp.watch(`${config.src}/assets/*.html`, gulp.series('html'));
});

В данной задаче мы следим за изменениями в файлах стилей, скриптов и html.

Осталось написать задачу для первичной сборки – назовем ее ‘build’, а также задачу ‘default’, которая позволит, просто набрав команду ‘gulp’, собрать проект и запустить «вотчеры».

Задача ‘build’:

gulp.task('build', gulp.series(
    'clr',
    gulp.parallel('css', 'js', 'assets', 'html')
));

Используем метод .parallel, чтобы ускорить процесс и запустить все задачи в параллельных потоках.

Задача ‘default’:

gulp.task('default', gulp.series('build', gulp.parallel('watch', 'server')));

Метод .series запускает задачи последовательно: сначала выполнится ‘build’, а далее параллельно стартуют ‘watch’ и ‘server’.

Что такое Gulp, чем он хорош и нужен ли он простому верстальщику?

Так что же такое Gulp?

Gulp позволяет решать такие задачи, как:

• использование различных JS, CSS, HTML препроцессоров для ускорения верстки (CoffeeScript, SASS, LESS, Stylus, Pug (Jade) и др.);
• объединение файлов в один — js, css, html;
• минимизация кода файлов — js, css, html;
• создание локального веб-сервера и перезагрузка страницы браузера при сохранении файла проекта (live reaload);
• автоматическая простановка вендорных префиксов в CSS-файле для поддержки стилей устаревшими браузерами;
• работа с изображениями сайта — объединение в спрайты (в том числе и SVG-спрайты), оптимизация (уменьшение веса);
• копирование файлов проекта из одной папки в другую, создавая при это рез. копию;
• создание иконочных шрифтов;
• и многое другое…

Одним словом, круг задач, решаемых с помощью галп достаточно широк и грех всем этим не воспользоваться. Когда я впервые столкнулся с GruntJs мне казалось, что подобные сборки нужны только для крупных и поддерживаемых проектов. А я верстаю небольших макеты и мне это не нужно. Ох как же я ошибался. На самом деле данный инструмент нужен любому веб-разработчику, он здорово экономит время. Представьте, я раньше делал спрайты изображений вручную — это же натуральная рутина. А в Gulp, установив нужный плагин мне достаточно добавить нужное изображение в определенную папку и скрипт сделает все за меня, выдав уже готовый объединенный файл изображений.

Ну что сказать, все в жизни происходит когда-то впервые. Если сказать в целом, Gulp и множество плагинов для него превращает его в мощный инструмент решения задач как маленьких, так и крупных проектов. Теперь давайте разберем более подробнее как его установить и как с ним работать.

Gulp

Начнем с главного в нашей сборке.

Gulp — это наш фундамент, потому что он будет управлять всеми нашими задачами, другими словами, . Концепция задач очень проста. Название асинхронной javascript функции равно названию задачи, и работает она по принципу: берет данные, трансформирует их и записывает результат.

Как видим, все просто: называем нашу задачу , вызываем функцию , которая берет данные по определенному шаблону и передает данные по трубе (функция ). Внутри вызываем функцию плагина, которая трансформирует наши данные и результат передает функцию . — записывает результат по указанному пути.

С можно выстраивать любые цепочки.

В четвертой версии много чего изменилось, но на что нужно точно обратить внимание — это на и. Позже мы разберем параллельное выполнение задач

Как вы заметили, в примерах я экспортировал функции, в старом API использовали :

Больше не рекомендуется использовать .

Экспортирование функций позволяет разделять на публичные и приватные задачи.

• — экспортируются из вашего gulpfile, что позволяет запускать их командой gulp.
• — создаются для внутреннего использования, как правило, в составе или

Пару слов о шаблонах поиска файлов в функции .

• — ищет файлы с расширением в папке
• — ищет файлы с расширением во всех папках, которые в

Более подробная информация здесь, здесь и здесь.

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

После того, как мы разобрались с фундаментом нашего проекта, начнем делать первые шаги. Проверяем, установлены ли и .

Если они не установлены, следуйте инструкциям здесь.

Создаем папку для нашего проекта. Внутри инициализируем npm
Ключ означает автоматические ответы вопрос по проекту.

Создадим три папки:

• — оптимизированные файлы для использования на сервере
• — рабочая папка, где будут храниться все наши исходники
• — здесь будут храниться наши tasks

Еще добавим файл , чтобы системные файлы не попадали в репозиторий.
Папка задокументирована, потому что часто использую для демонстрации работы.

Не забудьте установить gulp:

Обновление Gulp v4

Хорошая новость в том, что Вы можете обновить и протестировать новую версию на конкретном проекте без изменения всех ваших Gulp файлов. Это идеальный вариант, если нужно понять что может новая версия, но вы пока не готовы сжечь все мосты))

Вам придется обновить глобальный пакет до версии 4, но версия 3 все еще будет работать для каждого локального проекта, где это необходимо.

Глобальная установка Gulp v4

Для начала нужно удалить текущий глобальный пакет Gulp перед установкой новой версии.

Знак $ означает, что команды надо выполнять в консоли и писать его не надо.

Эти команды удалят текущую версию и установят v4 из ветки gulp-cli 4.0

Убедитесь, что первая команда не вызвала никаких ошибок при выполнении. Только после этого запускайте следующую. В зависимости от Вашей операционной системы, возможно, Вам потребуется вводить sudo, чтобы выполнить команду под Администратором.

Чтобы проверить какая версия установлена глобально, запустите следующую команду:

Если Вы откроете консоль в папке проекта, то под строкой CLI version будет указана локальная версия.

Локальная установка gulp 4

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

Подобно установке глобального пакета, удаляем локальную версию и устанавливаем v4.

Если в вашем gulp перечислен под , замените флаг на .

Теперь Вы имеете установленный и готовый к работе gulp v4. Это можно проверить запустив команду

Обновление gulpfile

После того, как мы все установили, нужно внести некоторые изменения в на gulpfile.js. Самый простой способ это запустить Gulp и исправить появившиеся ошибки.

Возможно, Вы увидите что-то подобное:

Это говорит нам о том, что ошибка вызвана в gulpfile.js на строке 418, символ 6.

Далее мы рассмотрим некоторые ошибки и пути их устранения.

Ошибка о которой я упомянул выше была вызвана в куске кода:

Таск был вызван перед таском

Для устранение этой проблемы, надо запустить их последовательно с помощью метода series

Поскольку Вы открыли круглую скобку перед функцией, не забудьте её закрыть после функции.

Убедитесь, что Вы обновили остальную часть файла по этому примеру.

В четвертой версии появился синтаксис, который позволяет определять порядок запуска задач. Также можно запустить задачи параллельно с помощью .

Асинхронное завершение

Ошибка следующая:

Эта ошибка возникает при использовании анонимной функции (та, которая вызывается после в примере).

Решается передачей параметра в функцию и запуска его после выполнения задачи.

Например:

Gulp watcher с событиями change и пути к файлам

В третьей версии Gulp, watcher возвращал путь измененного файла внутри функции в которой был вызван. Например, на выходе для примера ниже это будет объект с директорией измененного файла и событием (например, changed).

Watcher может запускать некоторые стандартные функции, но если нужен доступ к имени файла, нужно переписать функцию.

Организация файлов

Чтобы не создавать каши из файлов и папок организуем всё правильно с самого начала.

Корневая папка носит называние проекта. В моё случае heihei или heiheiru

В этой папке мы инициализируем GIT и npm.

npm создаст папку
node_modules и файлы package.json , package-lock.json.

Для GIT мы сами рано или поздно создадим файл gitignore

Так как мы будем пользоваться Gulp появится и файл gulpfile.js

С ростом числа заданий, которые будет выполнять Gulp нам станет неудобно хранить их все в одном
файле.

В gulpfile.js мы будем только импортировать другие .js файлы по принципу — на каждое
задание один файл.

Чтобы хранить эти файлы нам будет нужна папка, назовём её gulp и создадим в корневой. Внутри неё создадим
подпапку tasks

Всё, что относится непосредственно к сайту положим в папку heiheiru/app

index.html положим в корень app а
.css файлы, картинки и скрипты мы положим в папки heiheiru/app/assets/styles
heiheiru/app/assets/images , heiheiru/app/assets/scripts

Так будет выглядить дерево папок в редакоторе Sublime

Создание проекта

Двигаемся дальше. Теперь создайте папку проекта в удобном месте вашего компьютера. Назовем ее, например, gproject.

Перейдем в папку проекта и запустим консоль команд для данного каталога. Наиболее быстрый вариант сделать это зажать клавишу «Shift» и удерживая ее щелкнуть правой кнопкой мыши на пустой области окна каталога. Откроется контекстное меню, в котором выбираем «Открываем окно PowerShell здесь«. Данный пункт может называться и по другому — «Открыть окно команд«.

Запускаем инициализацию проекта командой:

Заполняем необходимые поля проекта по шагам и желательно латиницей. После ввода названия жмем Enter и переходим с следующему шагу.

• package-name: вводим название проекта маленькими буквами
• version: оставляем по умолчанию — 1.0.0
• description: вводим описание проекта, например, My first gulp project.
• entry point: (index.js), test command:, git repository:, keywords: — данные шаги оставляем по умолчанию, жмем Enter и переходим к следующему шагу
• author: впишите имя автора, я ввел Zaur Magomedov
• license: оставляем по умолчанию
• Is this ok? — вводим «yes» и жмем Enter поле чего в папке нашего проекта появится файл package.json. 

Файл package.json содержит в себе информацию о проекте + информацию об установленных пакетах (плагинов). Это своего рода файл манифеста. Теперь давайте установим Gulp локально в папку нашего проекта. Для этого пишем следующую команду:

флаг —save-dev как раз говорит установщику установить gulp локально в папку нашего проекта.

При установке gulp название пакета и его версия автоматически пропишутся в файле package.json. Вообще такой подход позволяет сохранять файл package.json со всеми установленными пакетами (зависимости), а при разворачивании нового проекта достаточно скопировать данный файл и запустить команду установки в консоли проекта — и все пакеты в проект установятся автоматически. Сейчас может вам будет не совсем понятно, но дальше я уверен вы поймете.

И так, после установки gulp в папке проекта должна появиться папка node_modules,  она содержит в себе необходимые зависимости. Также все новые установленные зависимости, прописываемые в package.json будут складываться именно в данную папку. Так что ничего не трогайте в ней и не удаляйте. Не пугайтесь если увидите в ней много файлов и папок.

Давайте откроем файл package.json реактором кода и взглянем на его содержимое.

Мы видим всю ту информацию, которую вводили при инициализации проекта + ниже в блоке «devDependencies» указаны установленные зависимости и их версии. В данном случае это gulp версии 3.9.1. Как я и говорил установилась локально именно та версия, что стоит глобально.

Методы gulp

Мы уже видели в коде выше метод series — который позволяет выполнять перечисляемые задачи последовательно (следующая задача выполняется только после завершения предыдущей). Постепенно мы рассмотрим все методы Gulp.

• src — какие файлы использовать для обработки в потоке;
• dest — куда выгружать обработанные в потоке файлы (место назначения);
• watch — наблюдение за изменениями в файлах;
• series — вызов задач последовательно;
• parallel — вызов задач параллельно.

Как создавать задачи мы рассмотрели. Теперь рассмотрим, как выбирать необходимые файлы.

Gulp src / dest

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

В данном примере мы видим работу двух методов:

• src (source) — выбираем файлы для обработки;
• dest (destination) — место назначения.

В src мы использовали паттерн css/**.css для выбора всех css файлов внутри папки /assets/css/ (исключая файлы в подпапках, если таковые имеются).

Примеры наиболее используемых паттернов для выбора файлов:

• app/**/*.* — выбор всех файлов в папке app;
• app/js/**/*.js — выбор всех js файлов в папке js;
• app/**/*.{css,js} — все css и js файлы в папке app;
• app/{folder1,folder2}/**/*.{js,css} — все js и css-файлы в папках folder1 и folder2;
• [‘app/**/*.css’, ‘app/**/*.js’] — получаем сначала все css, потом все js в папке app;
• [‘app/**/*.*’, ‘!app/**/*.js’] — все файлы в папке app, кроме js-файлов. (! — знак исключения).

Gulp series / parallel

В нашем примере была указана одна функция, но задач в gulp может быть очень много. Чтобы выполнять все перечисленные функции одной командой gulp необходимо сделать следующее.

В series мы перечисляем список задач для последовательного выполнения.

Если нам не важно когда закончится та или иная задача, мы можем использовать метод parallel:

В данном примере, сначала выполнится задача output, затем последовательно будут выполняться otherFunc и otherFunc2, и после их завершения начнёт своё выполнение задача otherFunc3.

Gulp lastRun()

Используется для ускорения времени выполнения, за счёт пропуска файлов, которые не изменились с момента последнего успешного завершения задачи.

Пример:

Усложняемся – работаем с препроцессором

Создадим что-то более сложное и функциональное, а попутно познакомимся с оставшимися методами Gulp.

Выстраиваем структуру папок. При разработке принято хранить исходники и сборку в разных папках. Создаем их: src для исходных материалов и build для готовой сборки.

Чтобы усложнить задачу, добавим в разработку препроцессор pcss (CSS-препроцессор). Это надстройка, которая с помощью новых синтаксических конструкций добавляет CSS ранее недоступные возможности. Происходит преобразование кода, написанного с использованием препроцессорного языка, в чистый и валидный CSS-код.

Установим препроцессор и несколько вспомогательных библиотек для работы с css.

Ставим сам препроцессор:

npm i gulp-postcss

Далее устанавливаем autoprefixer, cssnext и precss

npm i autoprefixer
npm i cssnext
npm I precss

В файле package.json появляются следующие строки:

"gulp-postcss": "^7.0.0",
"autoprefixer": "^7.1.6",
"cssnext": "^1.8.4",
"precss": "^2.0.0"
"gulp-dest": "^0.2.3",

Понимаете, для чего это нужно? Скоро сами удивитесь, как это полезно.

Подключаем препроцессор и дополнительные модули (в начале файла):

const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnext = require('cssnext');
const precss = require('precss');
const dest = require('gulp-dest');

Создадим в src папку pcss, где будем хранить стили. Добавим файл style.pcss и опишем несколько стилей в синтаксисе pcss:

* {
 padding: ;
 margin: ;
}

.firstClass {
 background: #f00;

 &__active {
   border: 1px solid #000;

   &-on {
     border-color: #0f0;
   }
 }
}

.hello {
 font-size: 60px;
 color: #000000;
}

Файл готов! Создадим «таск», который будет переписывать pcss в css и класть в папку build/css. Для удобства работы с директориями добавим в gulpfile объект конфигурации:

const config = {
   src: "./src", // директория с исходниками
   build: "./build" // Директория сборки
};

Теперь напишем сам таск и назовем его «css»:

gulp.task('css', function () {
   const processors = ;
   return gulp.src(`${config.src}/pcss/**/*.pcss`)
       .pipe(postcss(processors))
       .pipe(dest('css', {ext: '.css'}))
       .pipe(gulp.dest(config.build))
});

Разберемся, что тут происходит:

const processors = ;

Задан массив с дополнительными модулями для нашего postcss. Далее идет возврат (return) «цепочки» потоков (.pipe в каждом таком потоке выполняются какие-то задачи).

Метод .src у gulp указывает, откуда брать файлы для обработки (/**/*.pcss говорит о том, что нужно сканировать текущую и все вложенные папки на наличие файлов с расширением pcss).

Gulp.dest задает, куда положить результат обработки. Postcss вызывает обработку .pcss-файлов с параметрами из processors. dest (не путать с gulp.dest), дает возможность задать расширение выходного файла (в нашем случае – .css) и папку, в которую нужно положить файл.

Задача написана – протестируем ее! Набираем в консоли:

gulp css

Наблюдаем следующее:

$ gulp css
 Using gulpfile ~/Downloads/frontend/gulpfile.js
 Starting 'css'...
 Finished 'css' after 1.08 s

Переходим в build и видим, что там появилась папка css, а в ней – файл style.css с таким содержанием:

* {
  padding: ;
  margin: ;
}

.firstClass {
  background: #f00;
}

.firstClass__active {
    border: 1px solid #000;
  }

.firstClass__active-on {
      border-color: #0f0;
    }

.hello {
  font-size: 60px;
  color: #000000;
}

Перед нами привычный CSS-код, который можно подключить html-файлу.

Step 4: Install Gulp Locally

You can now install Gulp in your project folder using this command:

This installs Gulp as a development dependency and the section of is updated accordingly. We’ll presume Gulp and all plugins are development dependencies for the remainder of this guide.

Alternative Deployment Options

Development dependencies are not installed when the environment variable is set to on your operating system. You would normally do this on your live server with the macOS/Linux command:

Or on Windows:

This guide presumes your assets will be compiled to the folder and committed to your Git repository or uploaded directly to the server. However, it may be preferable to build assets on the live server if you want to change the way they’re created — for example, HTML, CSS and JavaScript files being minified on production but not development environments. In that case, remove the switch when installing Gulp and its plugins. For example:

This sets Gulp as an application dependency in the section of . It will be installed when you enter and can be run wherever the project is deployed. You can remove the folder from your repository, since the files can be created on any platform when required.

Первый запуск Gulp

Менеджер задач — само слово говорит за себя, это программа для управления задачами. В Gulp все задачи прописываются в одном единственном файле . Первоначально этого файла не существует и его нужно создать самостоятельно, вручную:

Затем в нем пропишем первую задачу. Все задачи деляться на два неравнозначных типа: задача по умолчанию (default task) и именованные задачи (named tasks). Разница между ними в том, что задача по умолчанию имеет имя , которое можно и не указывать. Кроме того, задача по умолчанию запускается в консоли всего одной командой:

В то время как именованная задача (named task) может иметь произвольное имя. Запуск такой задачи в консоли выполняется с указанием имени конкретной задачи:

Еще один важный момент заключается в том, что этот менеджер задач является потоковым. Что это значит? Не знаю, получиться ли у меня достаточно точно объяснить данный вопрос, но вот линуксоиды, хорошо знакомые с командной строкой, меня должны понять. В консоли Linux (Unix) есть такое понятие, как pipe.

Например, простая команда:

… выполняет следующее: результат команды перенаправляется для обработки в программу . Редактор автоматически открывается в консоли с уже готовым для чтения текстом внутри себя.

Чисто схематично такой пример можно усложнить и представить в таком виде:

Каждая из программ в этом списке будет производить обработку данных и передавать результат этой обработки другой программе, по цепочке.

Принцип работы Gulp точно такой же. Только вместо программ в нем используются плагины (я не забыл сказать, что он имеет модульную структуру?):

Отлично! С теорией закончили и можно снова возвращаться к практике, к нашему файлу настроек . Откроем его и пропишем в нем такие строки:

Первая строка создает переменную , в которую помещается сам Gulp. Это необходимо для Node.js, который будет читать файл и работать с Gulp в виде переменной .

Вторая строка, начинающаяся с — это не что иное, как задача. Именно так создаются задачи в этом менеджере. Здесь — это имя задачи (в данном случае это задача по умолчанию, как вы помните). Функция имеет в своем теле неограниченное количество инструкций. Так как мы еще не умеем работать с плагинами под Gulp, то в качестве инструкции пропишем вывод в консоль обычной текстовой строки — .

Давайте попробуем запустить наш менеджер задач, чтобы посмотреть, а работает ли он вообще? И как он работает? Для этого переходим в консоль и вводим в ней одну единственную команду :

Вот это да! А что означают все эти строки в консоли? Означают они только хорошее! Строка говорит о том, что Gulp для своей работы воспользовался файлом настроек по указанному пути. Затем было запущено выполнение задачи с именем — . Результатом выполнения этой задачи был вывод в консоль строки — . И задача с именем благополучно завершилась — , причем на ее выполнение ушло 169 миллисекунд.

Можно поздравить самих себя — мы только что создали и запустили на выполнение свою первую задачу под Gulp!

Шаг 3: Настройте проект

Примечание: пропустите этот шаг, если у вас уже есть файл конфигурации package.json.

Предположим что, у вас есть новый проект в папке project1. Перейдите в каталог и инициализируйте его с помощью npm:

cd project1
npm init

Затем нажмите «Return», чтобы принять значения по умолчанию. Файл package.json, в котором хранятся параметры конфигурации npm, будет создан автоматически.

Примечание: Node.js устанавливает модули в папку node_modules. Нужно добавить их в свой файл .gitignore, чтобы убедиться, что они не попадут в репозиторий. При развертывании проекта в другой системе можно будет запустить npm install, чтобы их восстановить.

Предполагается, что ваш проект содержит папки, перечисленные ниже.

Папка src: предварительно обработанные исходники

Содержит следующие подкаталоги:

• html ‒ исходные файлы и шаблоны HTML;
• images ‒ оригинальные несжатые изображения;
• js – предварительно обработанные файлы скриптов;
• css – предварительно обработанные файлы Sass (.scss)

Папка build: скомпилированные/обработанные файлы

Когда понадобится, Gulp создаст файлы и подпапки:

• html ‒ скомпилированные статические файлы HTML;
• images ‒ сжатые изображения;
• js ‒ единственный объединенный и минифицированный файл JavaScript;
• css – единственный скомпилированный и минифицированный файл CSS.

Примечание: Если вы работаете в Unix-системе, то можете воссоздать структуру исходных папок с помощью следующей команды:

mkdir -p src/{html,images,js,scss}

Use latest JavaScript version in your gulpfile

Most new versions of node support most features that Babel provides, except the / syntax. When only that syntax is desired, rename to , install the esm module, and skip the Babel portion below.

Node already supports a lot of ES2015+ features, but to avoid compatibility problems we suggest to install Babel and rename your to .

npm install --save-dev @babel/register @babel/core @babel/preset-env

Then create a .babelrc file with the preset configuration.

{
  "presets":  "@babel/preset-env" 
}

And here’s the same sample from above written in ES2015+.

import gulp from 'gulp';
import less from 'gulp-less';
import babel from 'gulp-babel';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import rename from 'gulp-rename';
import cleanCSS from 'gulp-clean-css';
import del from 'del';

const paths = {
  styles: {
    src: 'src/styles/**/*.less',
    dest: 'assets/styles/'
  },
  scripts: {
    src: 'src/scripts/**/*.js',
    dest: 'assets/scripts/'
  }
};

/*
 * For small tasks you can export arrow functions
 */
export const clean = () => del( 'assets' );

/*
 * You can also declare named functions and export them as tasks
 */
export function styles() {
  return gulp.src(paths.styles.src)
    .pipe(less())
    .pipe(cleanCSS())
    // pass in options to the stream
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest(paths.styles.dest));
}

export function scripts() {
  return gulp.src(paths.scripts.src, { sourcemaps: true })
    .pipe(babel())
    .pipe(uglify())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest(paths.scripts.dest));
}

 /*
  * You could even use `export as` to rename exported tasks
  */
function watchFiles() {
  gulp.watch(paths.scripts.src, scripts);
  gulp.watch(paths.styles.src, styles);
}
export { watchFiles as watch };

const build = gulp.series(clean, gulp.parallel(styles, scripts));
/*
 * Export a default task
 */
export default build;

Task Runners: the Options

Build tools such as GNU Make have been available for decades, but web-specific task runners are a relatively recent phenomenon. The first to achieve critical mass was Grunt — a Node.js task runner that used plugins configured (originally) by a JSON configuration file. Grunt was hugely successful but suffered with speed and complex customization problems. Many issues were addressed in later editions, but Gulp had already arrived and offered a number of improvements:

1. Features such as file watching were built-in.
2. Gulp plugins were (mostly) simple and designed to do a single job.
3. Gulp used JavaScript configuration code which was less verbose, easier to read, simpler to modify, and provided better flexibility.
4. Gulp was faster because it used Node.js streams to pass data through a series of piped plugins. Files were only written at the end of each task.

Since then, several competing alternatives have arrived:

• npm is a option for simpler projects
• webpack and Parcel have increased in popularity. These are module bundlers that understand JavaScript syntax and can perform simple tasks with little configuration.

However, Gulp still provides the flexibility and efficiency to attract . If you can write JavaScript, Gulp allows general-purpose tasks to do anything.

Gulp requires Node.js. JavaScript knowledge is beneficial but developers from all web programming faiths will find it useful.

Что такое Sass

Sass (Syntactically Awesome Stylesheets) — это один из самых развитых, стабильных и многофункциональных препроцессоров. Пользуется большой популярностью у разработчиков. Sass — это более продвинутая версия CSS, которая имеет гораздо бо́льший набор возможностей, а также Sass предназначен для упрощения каскадных таблиц стилей.

Синтаксис Sass имеет 2 вида: SASS и SCSS. SCSS — более похож на CSS, а SASS — отличается отсутствием фигурных скобок. Вложенные элементы реализованы за счёт отступов. Именно такой синтаксис мы будем здесь использовать.

Зачем нужен Sass

Чтобы понять, зачем нужен Sass, перечислим его некоторые возможности:

1. Sass позволяет вкладывать правила CSS друг в друга.
2. Вложенность свойств.
3. Использование переменных.
4. Поддержка арифметических операций.
5. Операции с цветами.
6. Возможность импортировать в sass файл sass, scss и css файлы.
7. Использование миксинов.
8. И многое другое.

Если коротко зачем нужен Sass: он ускоряет и упрощает процесс разработки.

Как использовать Sass

Существуют разные способы начать использовать Sass:

1. C помощью приложений (Koala, CodeKit, Compass и другие).
2. C помощью командной строки.
3. Используя таск-менеджеры.
4. Простым конвертированием Sass в CSS с помощью онлайн-сервисов.

Рассмотрим использование Sass для таск-менеджера Gulp. Перед тем как начать установку, желательно ознакомиться с основами Gulp.

Chokidar instance#

The method returns the underlying instance of chokidar, providing fine-grained control over your watch setup. Most commonly used to register individual event handlers that provide the or of the changed files.

When using the chokidar instance directly, you will not have access to the task system integrations, including async completion, queueing, and delay.

const{ watch }=require(‘gulp’);

const watcher =watch(‘input/*.js’);

watcher.on(‘change’,function(path, stats){

console.log(`File ${path} was changed`);

});

watcher.on(‘add’,function(path, stats){

console.log(`File ${path} was added`);

});

watcher.on(‘unlink’,function(path, stats){

console.log(`File ${path} was removed`);

});

watcher.close();

Copy

Registers functions to be called when the specified event occurs.

parameter	type	note
eventName	string	The events that may be watched are , , , , , , , or .
eventHandler	function	Function to be called when the specified event occurs. Arguments detailed in the table below.

argument	type	note
path	string	The path of the file that changed. If the option was set, the path will be made relative by removing the .
stats	object	An object, but could be . If the option was set to , will always be provided.

Shuts down the file watcher. Once shut down, no more events will be emitted.

Adds additional globs to an already-running watcher instance.

parameter	type	note
globs	stringarray	The additional globs to be watched.

Removes globs that are being watched, while the watcher continues with the remaining paths.

parameter	type	note
globs	stringarray	The globs to be removed.