Начало работы с Gulp.js

Gulp - это инструмент, основанный на Javascript, который позволяет автоматизировать элементы вашего рабочего процесса. Автоматизация может буквально сэкономить вам часы в день. Являетесь ли вы разработчиком или дизайнером, который время от времени создает HTML-каркасы, я советую вам покопаться в.

В этой статье мы рассмотрим основы использования Gulp - от установки до базового синтаксиса и пару примеров. К концу статьи вы сможете найти, установить и использовать пакеты, созданные другими для Gulp компилировать SASS, оптимизировать изображения, создавать спрайты, объединять файлы и многое другое!

Установка Gulp

Не волнуйтесь, установка очень проста. Нам нужно будет использовать терминал в OSX и Linux или командную строку для Windows. Теперь я буду называть его Терминалом.

Откройте его, введите npm -v и нажмите enter. Если вы видите номер версии, у вас уже установлен Node - это зависимость для Gulp.

Если вы получите “команда не найдена” (или аналогичная ошибка), зайдите на страницу загрузок Node.js и выберите соответствующий пакет для вашей системы. После установки команда npm будет доступна в терминале.

Установить Gulp так же просто. Вставьте следующую команду в терминал, вот и все:

npm install --global gulp

Это установит команду Gulp, которая будет доступна глобально в вашей системе..

Добавление Gulp к проекту

Gulp теперь установлен, но нам нужно будет добавить его к каждому проекту, для которого он нужен, отдельно. Создайте пустую папку и перейдите к ней в своем терминале. Находясь в папке для проекта, используйте следующую команду:

npm install --save-dev gulp

Это должно создать папку node_modules и файл npm-debug.log в папке вашего проекта. Они используются Gulp для выполнения своего проекта, вам не нужно думать о них на данном этапе..

Причина, по которой мы должны добавить Gulp к каждому конкретному проекту, заключается в том, что у каждого проекта свои требования. Один может призывать к SASS, другой к Меньше. Один может использовать Coffeescript, другой нет, и так далее.

Gulpfile

Gulpfile - это то, где происходит волшебство, это то, где вы определяете необходимые вам автоматизации а также когда вы хотите, чтобы они произошли. Давайте создадим пустое задание по умолчанию, создав файл с именем gulpfile.js и вставив в него следующий код.

var gulp = require ('gulp'); gulp.task ('default', function () // Пока ничего не происходит, скоро добавим функциональность);

После сохранения этого файла вы можете вернуться к своему терминалу и запустить команду gulp самостоятельно. Gulp определяет, в каком проекте он находится, и запускает задачу по умолчанию - ту, которую мы только что создали. Вы должны увидеть что-то вроде этого:

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

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

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

В папке вашего проекта создайте файл с именем to_copy.txt , и папка с именем DEV. Давайте зайдем в наш Gulpfile и создадим новое задание с именем копия.

gulp.task ('copy', function () return gulp.src ('to_copy.txt') .pipe (gulp.dest ('dev')););

Первая строка определяет задачу с именем copy. В рамках этого мы используем gulp.src, чтобы указать, какие файлы мы нацеливаем с этой задачей - в данном случае это один файл с именем to_copy.txt.

Затем мы направляем эти файлы в функцию gulp.dest, которая указывает, куда мы хотим поместить эти файлы - я использовал каталог dev.

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

Трубная команда находится в центре Gulp. Это эффективный способ перемещения данных между командами. Команда src указывает файлы, которые передаются команде dest. В более сложных сценариях мы передаем наши файлы другим командам, прежде чем указывать место назначения.

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

gulp.task ('copy', function () return gulp.src ('development / *') .pipe (gulp.dest ('production')););

Звездный персонаж будет соответствовать чему-либо в каталоге. Вы также можете сопоставить все файлы во всех подкаталогах и выполнять любые другие необычные сопоставления. Взгляните на документацию по node-glob для получения дополнительной информации..

Компиляция SASS

Составление таблицы стилей из файлов SASS является обычной задачей для разработчиков. Это можно сделать с помощью Gulp довольно легко, хотя нам нужно немного подготовиться. Помимо базовых команд, таких как src, dest и ряда других, вся функциональность добавляется через сторонние дополнения. Вот как я их использую.

Я печатаю SASS Gulp в Google, первый результат, как правило, то, что мне нужно, вы должны найти страницу для пакета SASS. Он показывает, как его установить (npm install gulp-sass). Скорее всего, вам нужно использовать sudo для установки его в качестве администратора, так что, вероятно, это будет (sudo npm install gulp-sass) .

После этого вы можете использовать синтаксис, который требует пакет для компиляции кода. Для этого создайте файл с именем styles.scss со следующим содержимым:

$ primary: # ff9900; body background: $ primary; 

Теперь создайте следующую задачу Gulp в Gulpfile.

gulp.task ('sass', function () gulp.src ('*. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css')););

Перед запуском команды не забудьте «потребовать» пакет в верхней части Gulpfile следующим образом:

var sass = require ('gulp-sass');

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

Просмотр файлов и папок

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

В Gulpfile создайте команду с именем автоматизировать который будет использовать команду watch для просмотра набора файлов на предмет изменений и выполнения определенной команды при изменении файла.

gulp.task ('automate', function () gulp.watch ('*. scss', ['sass']););

Если вы печатаете глоток автомат в терминал, он начнет и завершит задачу, но не вернется к приглашению, потому что он отслеживает изменения. Мы указали, что хотим просматривать все файлы scss в корневом каталоге, и если они меняются, мы хотим запустить команду sass, которую мы настроили ранее.

Если вы сейчас измените свой файл style.scss, он должен автоматически скомпилироваться в файл css в каталоге css.

Запуск нескольких задач

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

Если задачи связаны, мне нравится приковать их. Хорошим примером будет конкатенация и минимизация файлов JavaScript. Сначала мы направляем наши файлы в действие concat, затем направляем их в gulp-uglify, а затем используем функцию назначения для их вывода..

Если задачи не связаны, вы можете вызвать несколько задач. Примером может служить задача, в которой мы хотим объединить и минимизировать наши сценарии, а также скомпилировать наш SASS. Вот он полный Gulpfile о том, как это будет выглядеть.

var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var concat = require ('gulp-concat'); var sass = require ('gulp-sass'); gulp.task ('scripts', function () gulp.src ('js / ** / *. js') .pipe (concat ('scripts.js')) .pipe (gulp.dest ('.') ) .pipe (uglify ()) .pipe (gulp.dest ('.'))); gulp.task ('styles', function () gulp.src ('/ *. scss') .pipe (sass ()) .pipe (gulp.dest ('./ css'));); gulp.task ('automate', function () gulp.watch (['*. scss', 'js / ** / *. js'], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles']);

Если вы печатаете сценарии глотка в терминал все файлы javascript в каталоге js будут объединены, выведены в основной каталог, затем увеличены и сохранены в главном каталоге.

Если вы печатаете глоток, все ваши файлы scss будут скомпилированы и сохранены в каталоге css.

Если вы печатаете глоток (задание по умолчанию), ваш скрипты Задача будет запущена, а затем ваш стили задача.

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

обзор

Использование Gulp не сложно, на самом деле, многие люди предпочитают его Grunt из-за его более простого синтаксиса. Помните шаги, которые нужно предпринять при создании новой автоматизации:

• Поиск плагина
• Установить плагин
• Требуется плагин в вашем Gulpfile
• Используйте синтаксис в документации

Пять команд, доступных в Gulp (task, run, watch, src, dest), являются единственными, которые вам нужно знать, все сторонние дополнения имеют отличную документацию. Вот список некоторых вещей, которые я использую, с которыми вы могли бы начать прямо сейчас:

• Оптимизация изображений с помощью Gulp-Image-Optimization
• Создание спрайтов изображений с gulp-sprite
• Конкатенация файлов с помощью gulp-concat
• Сокращение файлов с помощью gulp-uglify
• Удаление файлов с помощью gulp-del
• Джаваскрипт, подкладка с глотком
• JSON linting с глотком-jsonlint
• Автопрефикс CSS с gulp-autoprefixer
• Поиск и замена с помощью gulp-frep
• Сократите CSS с помощью gulp-minify-css