Супер простой учебник Gulp для начинающих

super prostoj uchebnik gulp dlya nachinayushhih

В настоящее время использование инструмента для создания является неотъемлемой частью вашего рабочего процесса веб-разработки.

Gulp является одним из самых популярных инструментов для создания сегодня вместе с Webpack.

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

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

В этом учебнике вы ознакомитесь с основами npm (диспетчера пакетов узлов) и настройкой Gulp для ваших внешних проектов. Когда вы закончите, вы почувствуете себя гораздо увереннее, настраивая свой рабочий процесс и пользуясь командной строчкой!

Итак, в чем проблема с Gulp?

Gulp значительно экономит время. Используя Gulp, вы можете позволить своему компьютеру справляться с утомительными задачами, такими как:

  • Компиляция файлов Sass в CSS
  • Конкатенация нескольких файлов JavaScript
  • Минимизация (сжатие) ваших файлов CSS и JavaScript
  • И автоматически запускать вышеуказанные задачи, когда обнаружено изменение файла

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

Быстрое описание того, что мы будем делать

Ниже приведены шаги, через которые будет проходить это руководство:

  1. Установите Node.js и npm на свой компьютер
  2. Установите Gulp и другие пакеты, необходимые для вашего проекта
  3. Настройте файл gulpfile.js для выполнения нужных задач
  4. Позвольте вашему компьютеру делать вашу работу за вас!

Не беспокойтесь, если вы не полностью понимаете все приведенные выше термины. Я объясню все пошагово.

Теперь начнем!

Настройте свою среду

Node.js

Чтобы запустить Gulp на компьютере, необходимо установить Node.js в вашей локальной среде.

Node.js самоописывается как «среда выполнения JavaScript», которая считается серверной частью JavaScript. Gulp работает с помощью Node, потому вам, разумеется, нужно установить Node перед началом работы.

Вы можете загрузить его с веб-сайта Node.js. Когда вы устанавливаете Node, он также устанавливает npm на ваш компьютер.

Что такое npm, спросите вы?

Npm (Диспетчер пакетов узлов)

Npm – это постоянно обновляемая коллекция плагинов JavaScript (так называемые пакеты), написанных разработчиками со всего мира. Gulp является одним из таких плагинов. Вам также понадобится еще несколько, о которых мы поговорим позже.

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

Вот основной синтаксис для установки пакета:

npm install [Package Name]

Примечание для пользователей Mac:
В зависимости от ваших настроек вам может понадобиться добавить ключевое слово «sudo» в начале, чтобы запустить это с правами root.

Для компьютеров Mac это будет выглядеть так: sudo npm install [Package Name]

Выглядит довольно просто, верно?

Папка node_modules

Обратите внимание на одно: когда вы устанавливаете пакет npm, npm создает папку под названием node_modules и сохраняет в ней все файлы пакета.

Если у вас когда-либо был проект с папкой node_modules и вы решились посмотреть, что он содержит, вы наверняка видели, что в нем было много (и я имею в виду МНОГО) вложенных папок и файлов.

Почему это происходит?

Ну, это потому, что пакеты npm обычно полагаются на другие пакеты npm, чтобы выполнять свою конкретную функцию. Эти другие пакеты известны как зависимости.

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

Поэтому, когда вы устанавливаете плагин в свою папку node_modules, этот плагин установит дополнительные пакеты, которые это нужно в свою папку node_modules.

И так далее и так далее, пока вы не вставите папки в wazoo.

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

Отслеживание пакетов с помощью package.json

Еще одна интересная особенность npm состоит в том, что он может запомнить, какие конкретные пакеты вы установили для своего проекта.

Это важно, если по какой-то причине вам придется все переустановить.

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

Как это удается?

Npm использует файл под названием package.json, чтобы отслеживать, какие пакеты и версии пакетов вы установили. Он также хранит другую информацию о проекте, например, его название, автора и репозиторий Git.

Создание пакета.json

Чтобы инициализировать этот файл, можно снова воспользоваться командной строкой.

Сначала перейдите в папку вашего проекта, где бы она ни была на вашем компьютере.

Затем введите следующую команду:
npm init

После этого NPM предложит вам ввести информацию о проекте. Для большинства параметров можно нажать клавишу Enter и использовать значение по умолчанию, указанное в скобках.

Когда вы закончите, npm сгенерирует файл package.json в папке вашего проекта! Если вы откроете его в своем редакторе, вы увидите что-то вроде этого:

{
  "name": "super-simple-gulp-file",
  "version": "1.0.0",
  "description": "Super simple Gulp file",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+
  },
  "keywords": [
    "gulp"
  ],
  "author": "Jessica @thecodercoder",
  "license": "ISC",
  "bugs": {
    "url": "
  },
  "homepage": "
}

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

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

Теперь, что ты будет быть помещенным в файл package.json – это список всех пакетов, необходимых для запуска Gulp.

Давайте посмотрим, как вы можете добавить их.

Установка пакетов

В предыдущей главе выше мы говорили о вводе текста: npm install [Package Name] в командную строку, чтобы загрузить и установить пакет в папку node_modules.

Он установит пакет и автоматически сохранит его в файле package.json в зависимости.

Примечание: К версии npm 5.0.0 вы должны были добавить флаг «–save», чтобы npm добавил пакет как зависимость. Вам больше не нужно это делать с версиями 5 и выше.

Итак, если мы хотим установить Gulp в наши пакеты, мы введем: npm install gulp.

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

Теперь, если вы откроете файл package.json, вы увидите внизу, что Gulp добавлен как зависимость:

"dependencies": { "gulp": "^3.9.1" }

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

Другие пакеты, необходимые для Gulp

Сначала мы хотели использовать Gulp для выполнения таких задач как компиляция ваших файлов SCSS/CSS и JavaScript. Для этого мы будем использовать следующие пакеты:

  • gulp-sass — компилирует ваши файлы Sass в CSS
  • gulp-cssnano — минимизирует ваши файлы CSS
  • gulp-concat – объединяет (объединяет) несколько файлов JavaScript в один большой файл
  • gulp-uglify — минимизирует ваши файлы JavaScript

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

npm install gulp-sass 
npm install gulp-cssnano 
npm install gulp-concat 
npm install gulp-uglify

Gulp-cli против глобального Gulp

Раньше, чтобы иметь возможность запускать gulp из командной строки, вам нужно было глобально установить Gulp на локальном компьютере, используя команду:

npm install –global gulp

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

Текущий консенсус советует установить другой пакет, Gulp-cli, глобально заместо самого Gulp.

Это позволит вам все еще запускать команду «gulp», но вы сможете использовать разные версии Gulp в своих разных проектах.

Вот код для этого:

npm install --global gulp-cli

Если вам интересно, вы можете прочитать больше контекста в этой теме Treehouse.

Хорошо, когда все пакеты установлены, у вас есть все необходимые инструменты. Переходим к настройке файлов нашего проекта!

Настройте структуру файла

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

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

Вот как будет выглядеть дерево проекта:

Корневая папка проекта

  • index.html
  • gulpfile.js
  • package.json
  • node_modules (папка)
  • приложение (папка)
  • script.js
  • style.scss
  • dist (папка)

Мы уже просмотрели файл package.json и папку node_modules. А файл index.html будет, конечно, основным файлом вашего сайта.

В файле gulpfile.js мы настроим Gulp для выполнения всех задач, о которых мы говорили в начале этой статьи. Чуть-чуть мы разберемся с этим.

Но сейчас я хочу упомянуть две папки, app и dist, поскольку они важны для рабочего процесса Gulp.

Папки App и dist

В папке программы у нас есть ваш основной файл JavaScript (script.js) и ваш основной файл SCSS (style.scss). В эти файлы вы будете писать весь свой код JavaScript и CSS.

Папка dist существует только для хранения окончательно скомпилированных файлов JavaScript и CSS после обработки Gulp. Вы не должны вносить никаких изменений в файлы dist, только файлы программы. Но эти файлы в dist – это то, что будет загружено в index.html, поскольку мы хотим использовать скомпилированные файлы на сайте.

Опять же существует множество способов настройки файлов и папок проекта. Главное, что важно помнить, что ваша структура имеет смысл и позволяет работать максимально эффективно.

Теперь перейдем к существу этого учебника: настройка Gulp!

Создайте и настройте свой Gulpfile

Gulpfile содержит код для загрузки установленных пакетов и выполнения разных функций. Код выполняет две основные функции:

  1. Инициализируйте установленные пакеты в качестве модулей Node.
  2. Создавайте и запускайте задачи Gulp.

Инициализируйте пакеты

Чтобы воспользоваться всеми возможностями пакетов npm, которые вы добавили в свой проект, вам нужно экспортировать их в качестве модулей в Node — отсюда название папки «node_modules».

В верхней части вашего Gulpfile добавьте следующие модули:

var gulp = require('gulp'); 
var cssnano = require('gulp-cssnano'); 
var sass = require('gulp-sass'); 
var concat = require('gulp-concat'); 
var uglify = require('gulp-uglify');

Теперь, когда пакеты добавлены, вы можете использовать их функции и объекты в сценариях Gulpfile. Вы также будете использовать некоторые встроенные функции, являющиеся частью Node.js.

Если вы хотите узнать больше о пакетах npm и модулях Node, на сайте npm есть замечательное объяснение здесь.

Создайте свои задачи Gulp

Создание задачи Gulp выполняется с помощью следующего кода:

gulp.task('[Function Name]', function(){    
   // Do stuff here 
}

Это позволяет запустить задачу Gulp, введя gulp [Function Name] в командную строку. Это важно, поскольку вы можете запустить эту функцию из других задач Gulp.

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

Некоторые из основных функций, которые мы будем использовать:

  • .task() — Создает задачу, как сказано выше
  • .src() — определяет, какие файлы вы будете компилировать в определенном задании
  • .pipe() — добавляет функцию к потоку Node, использующему Gulp; вы можете передавать несколько функций в одной задаче (прочтите замечательную запись на эту тему на florian.ec)
  • .dest() — записывает полученный файл в определенное место
  • .watch() — определяет файлы для обнаружения любых изменений

Если вам интересно, вы можете прочитать больше о документации Gulp здесь.

Все готово? Теперь давайте приступим к делу (музыка Мулана) и напишем эти задачи!

Мы хотим, чтобы Gulp запускал следующие задачи:

  • Задание Sass для компиляции SCSS в файл CSS и минимизации
  • Задание JavaScript для конкатенации файлов JavaScript и минимизации/увеличения
  • Просмотрите задание, чтобы определить, когда файлы SCSS или JavaScript изменены, и повторно запустите задание
  • Задания по умолчанию для выполнения всех необходимых задач при вводе текста gulp в командную строку

Здоровая задача

Для задания Sass сначала мы хотим создать задачу в Gulp с помощью task()и мы назовем его «наглым».

Затем мы добавляем в каждый компонент, который будет выполняться задача. Сначала мы отметим, что источником будет файл app/scss/style.scss, используя src(). Затем мы введем дополнительные функции.

Первый запускает sass() функция – используя модуль gulp-sass, который мы назвали «sass» в верхней части Gulpfile. Он автоматически сохранит файл CSS с таким же названием, как и файл SCSS, поэтому наш будет называться style.css.

Второй минимизирует файл CSS с помощью cssnano(). И последний помещает полученный CSS файл в папку dist/css.

Вот код для всего этого:

gulp.task('sass', function(){    
    return gulp.src('app/style.scss')       
        .pipe(sass())       
        .pipe(cssnano())       
        .pipe(gulp.dest('dist/css')); 
});

Чтобы проверить, я просто вставил наполнитель SCSS в файл style.scss:

div {    
    display: block; 
   	&.content {       
        position: relative;    
    } 
} 

.red { 
    color: red; 
}

Вы можете запустить каждую отдельную задачу Gulp в командной строке, если введете gulp и название задачи Поэтому, чтобы проверить задачу Sass, я ввел gulp sass чтобы проверить, работает ли он без ошибок, и генерирует минимальный файл dist/style.css.

Если все работает правильно, вы должны увидеть следующие сообщения в командной строке:

[15:04:53] Starting 'sass'... [15:04:53] Finished 'sass' after 121 ms

Проверка в папке dist показывает, что файл style.css действительно есть, а открытие показывает правильно уменьшенный CSS:

div{display:block}div.content{position:relative}.red{color:red}

Ладно, наша задача Sass выполнена. Переходите в JavaScript!

JS Задача

Задача JS Gulp похожа на задачу Sass, но имеет несколько разных элементов.

Сначала мы создадим задачу и назовем его «js», а затем определим исходные файлы. В src() Вы можете идентифицировать несколько файлов несколькими способами.

Одним из них является использование подстановки (*) чтобы указать Gulp использовать все файлы с файлом *.js такое расширение:

gulp.src('app/*.js')

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

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

The src() функция может принимать массив значений в качестве параметра, используя квадратные скобки, например:

gulp.src(['app/script.js', 'app/script2.js'])

Если у вас есть много JavaScript, вы можете убедиться, что сначала загружаете зависимости, сохраняя их в отдельной подпапке, например, «app/js/plugins». Затем сохраняйте другие файлы JavaScript в родительской папке app/js.

Затем можно использовать символы подстановки, чтобы загрузить все сценарии библиотеки (библиотеки), а затем обычные сценарии:

gulp.src(['app/js/lib/*.js', 'app/js/script/*.js'])

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

После настройки исходных файлов вы можете перейти к другим функциям. Первый – объединить файлы в один обширный файл JavaScript. The concat() Функция требует одного параметра с именем полученного файла.

После этого вы повредите JavaScript и сохраните его в целевом месте.

Вот полный код задания JS:

gulp.task('js', function(){    
    return gulp.src(['app/js/plugins/*.js', 'app/js/*.js'])          
        .pipe(concat('all.js'))       
        .pipe(uglify())       
        .pipe(gulp.dest('dist')); 
});

Как и задача Sass, вы можете проверить, работает ли задача JS, введя gulp js в командную строку.

[14:38:31] Starting 'js'... [14:38:31] Finished 'js' after 36 ms

Теперь, когда мы завершили наши основные два рабочих задачи Gulp, мы можем перейти к задаче Watch.

Смотреть задачу

Задача «Просмотр» будет наблюдать за сообщаемыми ему файлами на предмет любых изменений. Как только он обнаружит изменение, он запустит задание, которое вы назначили, а затем продолжит следить за изменениями.

Мы создадим две функции просмотра, одну для просмотра файлов SCSS, а другую для просмотра JavaScript.

The watch() функция принимает два параметра: местоположение источника, а затем задачи, запускаемые при обнаружении изменений.

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

Функция будет выглядеть так:

gulp.watch('app/*.scss', ['sass']);

Для функции JS Watch нам придется пользоваться вправду полезной функцией Node под заглавием «глобинг». Глобинг означает использование символов ** как своего рода подстановочных знаков для папок и вложенных папок. Он нам нужен для файлов JavaScript, поскольку у нас есть JavaScript в папке app/js, а файл JavaScript в папке app/js/plugins.

А вот как будет выглядеть эта функция:

gulp.watch('app/js/**/*.js', ['js']);

Принцип работы glob (“**”) заключается в том, что он будет искать JavaScript в любом месте папки app/js. Он будет смотреться либо непосредственно в папке, либо в любых последующих дочерних папках, таких как папка плагинов. Глобинг пригодится, поэтому вам не нужно назначать каждый подтек как отдельный источник в watch() функция.

Вот полная задача Watch:

gulp.task('watch', function(){       
	gulp.watch('app/*.scss', ['sass']);          
    gulp.watch('app/js/**/*.js', ['js']); 
});

Теперь мы почти кончили! Последней задачей для создания является задача Gulp по умолчанию.

Задание Gulp по умолчанию

Задача Gulp по умолчанию – это то, что вы хотите запустить, когда просто вводите gulp в командной строке. Когда вы создаете задачу, вы должны назвать ее «по умолчанию», чтобы Gulp узнавал, что это то, что вы хотите запустить.

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

gulp.task('default', ['sass', 'js', 'watch']);

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

Вы можете создать отдельные задачи Gulp для минимизации файлов CSS и JavaScript под названием minifyCSS и minifyJS. Тогда вы бы не добавляли эти задачи в задачи Gulp по умолчанию, но вы могли бы создать новую задачу Gulp под названием «prod», содержащую все, что есть в задаче по умолчанию, а также ваши задачи минимизации.

Ссылка в вашем index.html

После того как процесс Gulp заработает, убедитесь, что файл index.html ссылается на все правильные файлы CSS и JavaScript.

Для примеров, которые я здесь приводил, вы захотите добавить ссылку на CSS dist/style.css в вашей <голові>:

<link rel="stylesheet" href="https://www.freecodecamp.org/news/super-simple-gulp-tutorial-for-beginners-45141974bfe8/dist/style.css">

И добавьте ссылку на тег сценария dist/all.js в вашем :

<script src="https://www.freecodecamp.org/news/super-simple-gulp-tutorial-for-beginners-45141974bfe8/dist/all.js"><;/script>

В завершение

Поздравляю, что вы успели! Надеюсь, что это основное руководство из Gulp было вам полезным.

Как я уже упоминал в начале, это очень простой учебник по основам npm и Gulp.

Большинство разработчиков добавляют много дополнительных задач к своему Gulpfile. Дайте мне знать, если вам будет интересно просмотреть другую статью на эти более продвинутые темы!

Наконец, вы можете просмотреть весь код из этого учебника в моем аккаунте GitHub здесь.

Надеюсь, этот пост вам был полезен! Дайте мне знать любые ваши мнения в комментариях ниже.

Хочу больше?

Эта публикация была первоначально опубликована на Coder-Coder.com.

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

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