Npm

Введение

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

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

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

NPM

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

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

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

Как скопировать папку с помощью Gulp

Объединить и сжать несколько css файлов в один

Как отправить файлы по ftp с помощью Gulp

Gulp series

Обработка только изменённых файлов с помощью gulp.watch().on(‘change’)

Обновление 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 может запускать некоторые стандартные функции, но если нужен доступ к имени файла, нужно переписать функцию.

Exporting#

Tasks can be considered public or private.

  • Public tasks are exported from your gulpfile, which allows them to be run by the command.
  • Private tasks are made to be used internally, usually used as part of or composition.

A private task looks and acts like any other task, but an end-user can’t ever execute it independently. To register a task publicly, export it from your gulpfile.

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

functionclean(cb){

cb();

}

functionbuild(cb){

cb();

}

exports.build= build;

exports.default=series(clean, build);

Copy

In the past, `task()` was used to register your functions as tasks. While that API is still available, exporting should be the primary registration mechanism, except in edge cases where exports won’t work.

Step 1: Install Node.js

Node.js can be downloaded for Windows, macOS and Linux from nodejs.org/download/. There are various options for installing from binaries, package managers and docker images; full instructions are available.

Note: Node.js and Gulp run on Windows but some plugins may not work correctly if they depend on native Linux binaries. One option for Windows 10 users is the Windows Subsystem for Linux; this could solve issues but may introduce alternative problems.

Once installed, open a command prompt and enter the following to reveal the version number:

You’re about to make heavy use of — the Node.js package manager that’s used to install modules. Examine its version number:

Note: Node.js modules can be installed globally so they are available throughout your system. However, most users will not have permission to write to the global directories unless commands are prefixed with . There are a number of options to fix npm permissions and tools such as nvm can help but you can also change the default directory, e.g. on Ubuntu/Debian-based platforms:

Then add the following line to the end of :

Then update with this:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 6: Автоматизируйте выполнение заданий

Чтобы запустить все задания в одной команде, экспортируйте таск build в gulpfile.js:

// запустить все таски
exports.build = gulp.parallel(exports.html, exports.css, exports.js);

Метод gulp.parallel() выполняет все задания одновременно. Его можно комбинировать с gulp.series() для создания сложных цепочек зависимостей. В этом примере exports.html, exports.css и exports.js запускаются параллельно. Но каждый из них может иметь последовательности зависимостей, включая таск images.

Введите в командной строке gulp build, чтобы выполнить все таски.

Кроме этого Gulp предоставляет метод .watch(), который может запускать соответствующий таск при каждом изменении файла. Он передает набор файлов или папок для мониторинга, любые и функцию таска для запуска (необязательно в методах gulp.series() ли gulp.parallel() ).

Экспортируем новый таск watch в конец gulpfile.js:

// следим за изменениями файлов
function watch(done) {

  // изменениями изображений
  gulp.watch(src + 'images/**/*', images);

  // изменениями html
  gulp.watch(src + 'html/**/*', html);

  // изменениями css
  gulp.watch(src + 'scss/**/*', css);

  // изменениями js
  gulp.watch(src + 'js/**/*', js);

  done();

}
exports.watch = watch;

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

Вместо того чтобы запустить gulp watch немедленно, добавим таск по умолчанию. Его можно выполнить, запустив gulp без дополнительных аргументов:

// таск по умолчанию
exports.default = gulp.series(exports.build, exports.watch);

Сохраните gulpfile.js и введите в командной строке gulp. Ваши изображения, HTML, CSS и JavaScript будут обработаны. Затем Gulp продолжит проверку обновлений и будет повторно выполнять задания по мере необходимости. Нажмите Ctrl/Cmd + C, чтобы прервать мониторинг и вернуться в командную строку.

Методы 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()

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

Пример:

Собираем 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’.

SassScript

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

2.1 Переменные в Sass

Это действительно замечательная возможность — определять переменные, которые можно использовать в любом месте вашего Sass файла. Цвета, дефолтные значения, единицы, все это можно взять в переменную и использовать в дальнейшем. Переменная определяется так: $название: значение.

Sass CSS — готовый результат
$accent: #FF9910

.button
	background-color: $accent
	color: #fff
.button {
	background-color: #FF9910;
	color: #fff;
}

2.2 Операции с числами и строками + интерполяция

Sass дает возможность использовать стандартные арифметические операции над числами, такие как сложение (+), вычитание (-), деление (/) и остаток от деления по модулю (%). Операторы сравнения (<, >, <=, >=, ==, !=) также поддерживаются для чисел.

Кроме того, в Sass есть возможность конкатенировать (соединять) строки.

Sass CSS — готовый результат
$summ: 10 + 20 / 2
$cn: content

.selector
	margin:
		top: $summ + px
		bottom: 12px + 8px
	background-color: trans + parent
	#{$cn}: "con" + "tent"
.selector {
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: transparent;
	content: "content";
}

Как видим из примера $summ: 10 + 20 / 2, соблюдается приоритет в выполнении арифметических операций — сначала деление, потом сложение. Для определения порядка действий, можно использовать круглые скобки, как в математике

Обратите внимание, что при сложении 12px + 8px, мы получим 20px

Обратите также внимание на строки 2 и 9, здесь мы используем интерполяцию для размещения динамических значений в любом месте Sass файла, в том числе и в месте, где у нас идет название свойства, название селектора или в любой строке. Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #{}, например:

Чаще всего интерполяция в Sass используется для получения нового значения переменной, благодаря «интегрированию» в значение другой переменной, посредством конструкции #{}, например:

Sass CSS — готовый результат
$in: интер

.interpol
	content: "#{$in}поляция"
.interpol {
	content: "интерполяция";
}

2.3 Операции с цветами

Цвета в Sass можно складывать, вычетать, делить и умножать. Все арифметические операции выполняются для каждого цвета отдельно: красного, зеленого и синего.

Sass CSS — готовый результат
$color1: #440203 + #550506
$color2: #010203 * 2
$color3: rgba(180, 0, 0, 0.75) + rgba(20, 255, 0, 0.75)

body
	background-color: $color1
	color: $color2
	border-color: $color3
body {
	background-color: #990709;
	color: #020406;
	border-color: rgba(200, 255, 0, 0.75);
}
Sass CSS — готовый результат
$translucent-red: rgba(255, 0, 0, 0.5);

p
	color: opacify($translucent-red, 0.3)
	background-color: transparentize($translucent-red, 0.25)

.selector
	background-color: rgba(#333, 0.75)
p {
	color: rgba(255, 0, 0, 0.8);
	background-color: rgba(255, 0, 0, 0.25);
}

.selector {
	background-color: rgba(51, 51, 51, 0.75);
}

Шаг 1: установите Node.js

Node.js можно загрузить для Windows, macOS и Linux с nodejs.org/download/. Доступны различные варианты платформы для установки из бинарных файлов, модульных сборщиков и Docker-образов.

Примечание: Node.js и Gulp работают в Windows, но некоторые плагины могут работать некорректно, если они зависят от собственных бинарных файлов Linux. Одним из вариантов решения проблемы в Windows 10 является подсистема Windows для Linux.

После установки запустите командную строку и введите следующую команду. Она позволит узнать номер версии:

node -v

Вскоре вы станете активно использовать npm – менеджер пакетов Node.js, который необходим для установки модулей. Узнайте номер его версии:

npm –v

Примечание: модули Node.js можно устанавливать глобально, чтобы они были доступны во всей ОС. Но большинство пользователей не будут иметь права на запись в глобальные библиотеки, если у команд npm не будет префикса sudo. Существует несколько вариантов, как исправить разрешения npm. Но можно изменить каталог по умолчанию. Например, в Ubuntu/Debian:

cd ~
  mkdir .node_modules_global
  npm config set prefix=$HOME/.node_modules_global
  npm install npm -g

Затем добавьте следующую строку в конце ~/.bashrc:

export PATH="$HOME/.node_modules_global/bin:$PATH"

Снова обновите:

source ~/.bashrc

Ошибки

SKIPPING OPTIONAL DEPENDENCY: fsevents

Ошибка при установке gulp. Вы выполняете

$ npm install gulp —save-dev

А на выходе

npm WARN saveError ENOENT: no such file or directory, open ‘C:\Users\ao\Desktop\Sites\heihei\package.json’
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open ‘C:\Users\ao\Desktop\Sites\heihei\package.json’
npm WARN heihei No description
npm WARN heihei No repository field.
npm WARN heihei No README data
npm WARN heihei No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {«os»:»darwin»,»arch»:»any»} (current: {«os»:»win32″,»arch»:»x64″})

+ gulp@4.0.2

added 314 packages from 217 contributors and audited 6490 packages in 30.037s

found 0 vulnerabilities

Скорее всего Вы не инициализировали npm. Нужно выполнить

npm init

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

Unhandled ‘error’ event

events.js:174
throw er; // Unhandled ‘error’ event
^
CssSyntaxError: postcss-simple-vars: C:\Users\ao\Desktop\Sites\travel-site\app\assets\styles\modules\_large-hero.css:5:2: Undefined variable $aMadeUpVariable2

Может быть вызвана, например, несуществующей переменной. Допустим Вы добавили цвет
как переменную, но нигде её не задали.

Unexpected identifier

Если Вы запустили Gulp

gulp

И получили что-то похожее

SyntaxError: Unexpected identifier
      at Module._compile (internal/modules/cjs/loader.js:723:23)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
      at Module.load (internal/modules/cjs/loader.js:653:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
      at Function.Module._load (internal/modules/cjs/loader.js:585:3)
      at Module.require (internal/modules/cjs/loader.js:692:17)
      at require (internal/modules/cjs/helpers.js:25:18)
      at execute (C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\lib\versioned\^4.0.0\index.js:36:18)
      at Liftoff.handleArguments (C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\index.js:201:24)
      at Liftoff.execute (C:\Users\ao\AppData\Roaming\npm\node_modules\gulp-cli\node_modules\liftoff\index.js:201:12)

Скорее всего Вы пытаетесь использовать синтаксис ES2015&plus; и не установили babel или он работает но с ошибкой.

Здесь два выхода — разобраться и настроить либо перейти к старому синтаксису с require

5

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {«os»:»darwin»,»arch»:»any»} (current: {«os»:»win32″,»arch»:»x64″})

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

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

Корневая папка носит называние проекта. В моё случае 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

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

Создадим что-то более сложное и функциональное, а попутно познакомимся с оставшимися методами 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 3: Configure Your Project

Note: You can skip this step if you already have a configuration file.

Let’s assume you have a new or pre-existing project in the folder . Navigate to this folder and initialize it with npm:

You’ll be asked a series of questions: enter a value or hit Return to accept defaults. A file that stores your configuration settings will be created on completion.

Note: Node.js installs modules to a folder. You should add this to your file to ensure they’re not committed to your repository. When deploying the project to another system, you can run to restore them.

For the remainder of this guide, we’ll presume your project folder contains the subfolders itemized below.

Folder: Pre-processed Source Files

This contains further subfolders:

  • — HTML source files and templates
  • — the original uncompressed images
  • — multiple pre-processed script files
  • — multiple pre-processed Sass files

Folder: Compiled/processed Files

Gulp will create files and create subfolders as necessary:

  • — compiled static HTML files
  • — compressed images
  • — a single concatenated and minified JavaScript file
  • — a single compiled and minified CSS file

Your project will almost certainly be different, but this structure is used for the examples below.

Note: If you’re on a Unix-based system and you just want to follow along with this guide, you can recreate the source folder structure with the following command:

Дополнительные полезные плагины для Gulp

Проект, что мы создали выше это самый простейший набор плагинов Gulp. Его функциональность можно значительно расширить, установив и настроив дополнительные плагины. Я составил список, которые сам использую в своих проектах.

Plumber — дает возможность продолжить работу gulp при ошибке в коде. На самом деле, если вы в коде (html, js, sass, css) сделаете ошибку gulp выдаст ее в консоли и прекратит свою работу. Вам необходимо будет исправить ошибку и вновь запустить gulp.

Sourcemaps — создает карту подключений файлов css и js. Обычно в подобных проектах файлы стилей и скриптов делят на несколько частей для удобства. Так вот, чтобы потом ориентироваться в каком файле и в какой строке находится та или иная запись как раз и нужна карта подключений. 

Tinypng — сжатие изображений. Работает по той же аналогии, что и imagemin, но сжимает значительно лучше.

SvgSprite — сборка svg-спрайта иконок. В последнее время я перешел с иконочных шрифтов на svg иконки. Чтобы уменьшить количество http запросов к серверу нужно собирать иконки в спрайты.

Rigger — объединяет html-файлы в один. Необходимо, когда вы разбиваете html-файлы на отдельные неизменяемые блоки, например, шапка сайта, футер и т.д.

BrowserSync — перезагрузка браузера. Очень полезное дополнение, т.к. не нужно тратить время на обновление браузера, плагин делает это автоматически при сохранении измененных файлов. В плагине используется встроенный простенький локальный-сервер.

Spritesmith — создание спрайтов картинок. Еще один плагин для сборки спрайтов, только в данном случае из иконок Png. Также использую его частенько, т.к. не всегда иконки в макете бывают в формате svg.

Rimraf — очистка папки dist. Бывает, что приходится очищать время от времени папку продакшена dist, т.к. в нем могут скопиться неиспользуемые файлы. Например, вы переименовали файл стилей в другое название, таким образом у вас в dist будут две копии — старая и новая.

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

Конечно я буду еще писать на тему Gulp, т.к. сам постоянно развиваюсь и стараюсь делать свои проекты как можно проще и быстрее. Обязательно поделюсь своей сборкой в Github.

Жду ваши комментарии ниже. Подписывайтесь на мой канал в телеграм. До встречи в следующих статьях!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector