Теперь, когда мы предоставили достаточно,
пришло время Gulp.
Мы попытаемся выполнить те же
задачи, которые мы выполняли с NPM скрипты и Grunt,
но теперь мы попытаемся сделать то же самое, используя Gulp и Gulp Plug-ins.
Чтобы начать работу, давайте сначала установим Gulp как глобальный модуль.
Итак, чтобы сделать это, в командной строке
введите npm -g install gulp,
это установит Gulp как глобальный модуль и сделает
его доступным для использования в командной строке.
После того, как мы закончим это,
следующим шагом является установка Gulp локально в нашем проекте.
Поэтому для этого в командной строке
введите npm install gulp —save-dev.
Как только мы закончим эти два,
пришло время идти вперед и настроить наши задачи Gulp.
Прежде чем мы сделаем это, наш следующий шаг,
мы установим плагин Gulp Sass, чтобы мы могли
настроить Sass, чтобы увидеть как задача преобразования в нашем файле Gulp.
Итак, чтобы идти вперед и сделать это,
введите npm install
gulp sass —save-dev.
Кроме того, пока мы на нем,
мы могли бы также установить задачу Browser Sync Gulp,
так что мы можем настроить оба этого один за другим.
Итак, я установлю, npm установит браузер-sync —save-dev.
После того, как эти два установлены,
давайте продолжим и создадим наш файл Gulp, а затем настроим наши задачи Gulp здесь.
Переходя в нашу папку проекта,
давайте создадим новый файл, а затем назовем его gulpfile.js,
и в этом файле мы собираемся настроить наши Gulp Tasks.
Итак, как только gulpfile.js будет готов,
хорошо настройте задачи Gulp здесь, сначала начав
с «use strict», а затем var gulp.
Таким образом, нам нужно требовать модули gulp node,
а также пока мы на нем,
нам потребуется модуль sass node.
Как я уже упоминал в предыдущем упражнении,
вам станет более понятным, почему код написан таким образом, как
только вы поймете больше о модулях узлов в более позднем курсе.
BrowserSync, так что мы сделали, это включить
модули Gulp Contrast и BowserSync узлов в наш файл Gulp.
И как только вы это сделаете,
пришло время настроить наши задачи Gulp.
Как мы узнали ранее,
Gulp - это код, основанный на способе настройки
задач, в отличие от Grunt, который больше полагается на конфигурацию задач.
Итак, в случае Gulp,
ребенок настроит наши задачи, чтобы набрать
gulp.task, а затем установим имя задачи 'sass'
, а затем для
этой задачи мы установим
это как функцию, и вот как будет подготовлен код.
Итак, функция Gulp Tasks Sass и здесь,
мы настраиваем Gulp Tasks,
поэтому мы будем вводить return gulp.src ('. /css/ *.scss') Как мы узнали,
Gulp - это инструмент, основанный на коде над конфигурацией.
Итак, мы подготовим эту задачу как таковой.
Итак, вы видите, что мы указали Gulp исходный канал sass on,
а затем здесь ошибка.
Итак, если произойдет ошибка,
мы будем использовать способ Sass для регистрации ошибки, а затем передать это
через gulp.dest ('. /css '), и это
завершает настройку задач Gulp Sass.
Вам, должно быть, интересно, почему мы пишем такой код.
Он говорит gulp source, а затем указывает что-то там,
а затем следующий говорит pipe, а затем следующий говорит pipe.
Давайте поймем способ Gulp делать вещи немного более подробно.
Чтобы помочь объяснить, почему мы настраиваем такие задачи,
у меня есть объяснение того, что мы называем Gulp Streams.
То, как работает Gulp, похоже, что вы берете набор файлов, и вы указываете набор
файлов, сказав источник глотка, как мы делали с задачами Sass там.
Так вот, это функция, которая принимает файлы.
Вы даже можете указать файлы, используя шаблоны глоббинга, которые мы узнали в Grunt,
а затем он создает поток объектов, которые представляют эти файлы.
Теперь, как только поток создан,
то поток может быть передан через набор
функций один за другим, чтобы преобразовать эти файлы.
И затем, наконец, результирующие преобразованные файлы могут быть помещены в место назначения.
Поэтому мы указываем источник Gulp,
затем указываем канал.
Итак, труба позволяет потоку проходить через функцию,
и поэтому мы сказали точечную трубку,
а затем сказали глоток.
А потом мы сказали «дураць по ошибке».
А потом следующий говорит «Труба глотка Дест».
Таким образом, gulp dest указывает место назначения файлов, которые были обработаны.
Таким образом, типичная задача указывается в gulp, потому что gulp работает на потоках.
Таким образом, ваши потоковые файлы через каналы до тех пор, пока
они не будут переданы, а затем они будут депонированы в указанном месте назначения.
Таким образом, вы увидите аналогичную структуру для многих задач gulp, которые мы
будем настраивать в этом упражнении и следующем упражнении.
Теперь, когда вы немного поняли, как gulp работает с потоками и как
задача gulp использует канал для обработки файлов через набор функций,
и вам становится более ясно, почему мы создали эту sass задачу, как показано в этом коде.
Следующая задача, которую мы собираемся настроить называется gulp,
и мы настроим эту задачу как sass watch.
Таким образом, это задача смотреть, которую мы собираемся настроить,
и тогда вы должны указать функцию.
И вот здесь,
задача наблюдения за глотком,
то, что мы делаем, это указать файлы, которые мы будем смотреть.
Таким образом, мы используем задачу наблюдения за глотком, чтобы посмотреть файл.
Итак, часы уже встроены в глоток.
Таким образом, это займет gulp watch, а затем мы указываем файлы там *.SCSS.
Таким образом, как вы можете видеть, часы gulp будут смотреть
эти файлы, а затем, когда какие-либо изменения в этих файлах происходят,
он запустит эту sass задачу,
которую мы указали ранее.
Итак, вот как настраивается эта задача sass Watch.
Теперь, когда мы сделали эти два,
давайте настроим эту задачу синхронизации браузера.
Итак, закройте это с точкой с запятой, а затем
следующая задача, которую мы установим, это задача синхронизации браузера.
Итак, я задам там задачу синхронизации браузера.
А затем для задачи синхронизации браузера
я укажу эту функцию.
Опять же, обратите внимание на структуру, в которой мы пишем код,
gulp задачу, а затем вы указываете что-то, что последовало, но с функцией.
Теперь снова, как я уже сказал,
мы изучаем модули узлов в последнем курсе этой специализации,
вам станет более понятным, почему не модули написаны с этой структурой,
и почему функции написаны так.
Итак, мы говорим gulp задачи синхронизации браузера.
Здесь я собираюсь определить переменную,
переменную JavaScript, называемую файлами,
которая не что иное, как массив,
и что внутри этого массива файлов я бы указал все файлы, которые
в случае изменения синхронизации браузера
должна вызвать перезагрузку или файл.
Итак, html-файлы, файлы CSS в папке CSS,
а затем аналогичным образом я также буду смотреть файлы изображений
и файлы JavaScript.
Все эти файлы, если любой из них изменился.
Итак, после этого я настрою синхронизацию браузера здесь.
Итак, я скажу, что синхронизация браузера.
Мы уже определили эту переменную, называемую синхронизацией браузера ранее.
Таким образом, мы должны инициализировать синхронизацию браузера,
и поэтому, первый параметр для этого
- это файлы, которые нужно будет наблюдать,
а затем второй параметр определяет параметры, которые мы даем браузеру.
Итак, параметр, который я указываю, предназначен для сервера.
Я укажу базовый каталог в качестве текущего каталога,
а затем это завершает спецификацию задачи синхронизации браузера.
Таким образом, с этим мы завершили определение задачи синхронизации браузера здесь.
Таким образом, вы можете видеть, что как мы настроили задачу синхронизации браузера,
мы указали файлы, а затем сохранили
синхронизацию браузера в нем и поставляем файлы в качестве первого параметра.
Второй параметр - параметры плагина синхронизации браузера.
Затем, наконец, мы
запланируем или настроим задачу, называемую по умолчанию.
Так же, как у меня есть задача по умолчанию в Grunt,
мы также можем иметь аналогичную задачу по умолчанию, определенную для gulp.
Итак, здесь мы говорим gulp задачи синхронизации браузера по умолчанию,
а затем указать функцию.
И внутри мы укажем начало глотка.
Таким образом, это указывает, что я должен начать
эту другую задачу, которая sass watch task.The sass watch задача должна быть запущена.
Убедитесь, что задача синхронизации браузера запущена перед запуском задачи sass watch.
Итак, это синтаксис для указания этого в глотке.
Таким образом, с этим мы настроили все, что нам нужно в gulp файле.
Итак, снова возвращаясь назад,
есть шаги, которые мы сделали.
Сначала мы использовали требование включить все их gulp плагины там,
затем мы настроили задачу sass,
а затем указали sass watch задачу.
Здесь мы используем часы глоток, которые доступны нам, как от глотка.
Затем мы указали задачу синхронизации браузера, а затем, наконец,
перенесли задачу по умолчанию с помощью браузера Sync и gulp начать с sass watch.
Теперь давайте посмотрим на изменения,
а затем мы продолжим и выполним gulp файл add,
и подсказка типа gulp.
Вы увидите, что gulp запускается с синхронизацией браузера и запуском задачи sass watch,
а затем синхронизация браузера начнет обслуживать файлы.
Если вы просматриваете свой веб-сайт с помощью браузера,
вы сможете увидеть веб-сайт, обслуживаемый в браузере.
Позвольте мне также проиллюстрировать функционирование часового задания.
Итак, я вытащу style.css и
просто попытаюсь сохранить изменение, и вы заметите, что с левой стороны
немедленно вызывается задача sass, и она
перекомпилирует файл style.scss в файлы CSS.
И тогда этот браузер перезагрузится в этот момент.
С этим мы завершаем первую часть упражнения глотка.
Во второй части мы подготовим папку дистрибутива.
Это хорошее время для вас сделать git-commit с сообщением Gulp часть 1.