Пришло время перейти ко второй части упражнения Gulp.
Мы продолжим делать те же шаги, что и
во второй части упражнения сценария NPM и в текущем упражнении.
Таким образом, мы организуем удаление папки распространения, затем копирование шрифтов,
а затем перестроение папки распространения,
используя аналогичные модули узлов, которые
мы использовали для Grant, а также скрипты NPM.
Следующий шаг — настроить задачи по удалению
папки дистрибутива, а также копированию шрифтов в папку дистрибутива.
Итак, давайте настроим несколько модулей узлов.
Первый, который мы создадим, называется del.
Эта модель узла позволяет удалить папку.
И давайте продолжим и поставим задачи Gulp.
С Gulp, к счастью, нам не нужно устанавливать другой модуль ради копирования,
потому что потоки Gulp позволяют нам делать копирование файлов с небольшими усилиями.
Перейдя к файлу Gulp,
я собираюсь представить смешанный модуль Gulp,
который я скажу, дель.
А затем требуется модуль del здесь.
Поэтому, как только мы требуем модуль del там,
мы можем идти вперед и настроить задачи.
Итак, мы сначала установим чистую задачу здесь.
Поэтому сразу после задачи по умолчанию
я собираюсь настроить чистую задачу.
Так что я скажу, Gulp задача чистая.
И как вы можете видеть,
это настроено как функция там.
И внутри, что мы бы сказали, возвращение дель.
И тогда поставленный параметр является папкой распространения здесь.
Таким образом, это создаст чистую задачу.
И как только эта задача будет выполнена,
папка дистрибутива будет удалена.
Наша следующая задача — скопировать шрифты в папку дистрибутива.
Так что, я бы сказал, скопируйте шрифты.
И, как вы можете видеть,
мы установили функцию там, а затем закрываем функцию.
И тогда здесь, я бы просто сказал,
Gulp исходные и узловые
модули, шрифт удивительный, шрифты.
Вы можете видеть, как я использую глоббинг, прямо здесь.
И после того, как мы выбираем все исходные файлы,
мы просто передаем их в целевой файл.
Итак, вы заметили, что нам не
нужен конкретный модуль для организации копирования файлов.
Мы просто используем потоки источника и назначения Gulp,
чтобы иметь возможность передавать файлы из исходного местоположения в место назначения.
Таким образом, эти два настроят задачу очистки и копирования шрифтов.
Далее, мы собираемся настроить модуль NPM для задачи imagemin.
Таким образом, минимизация и сжатие изображений.
Итак, для этого добавьте подсказку типа Gulp imagemin.
Это плагин Gulp, соответствующий модулю узла imagemin.
Таким образом, мы установили как Gulp плагин,
который также является модулем узла.
Поэтому, как только установка будет завершена,
давайте настроим эту задачу imagemin.
Перейдя к нашему файлу Gulp,
мы установим задачу imagemin здесь.
Таким образом, мы настроим задачу imagemin как функцию.
Как вы можете видеть, структурирование кода для
определения задачи Gulp в значительной степени стандартно.
Итак, вы бы сказали «Источник глотка».
Здесь мы указываем исходные файлы и исходные файлы
в папке изображений JPG,
GIF и PNG файлы оттуда.
А затем передать их через задачу imagemin.
И тогда я установлю некоторые параметры здесь.
Итак, я установлю
уровень оптимизации до трех, прогрессивный, как истинный.
Таким образом, это превратит их в прогрессивные и чересстрочные изображения.
Поэтому, как только это будет настроено,
следующий шаг - передать их в пункт назначения.
И местом назначения здесь, как вы можете видеть, является папка с изображениями в папке распространения.
Таким образом, с этим задача imagemin теперь настроена.
Теперь мы создадим задачу сборки здесь.
Итак, позвольте мне настроить задачу сборки.
Таким образом, для сборки задачи,
то, что вы хотели бы сделать, это сначала
выполнить чистую задачу до
выполнения оставшихся задач,
потому что мы хотим сначала очистить папку распространения.
И это должно быть завершено, прежде чем будут выполнены оставшиеся задачи.
С Gulp задачи выполняются параллельно автоматически.
И поэтому может случиться так, что
если вы выполняете чистую задачу параллельно с оставшейся задачей,
задача очистки может закончиться позже, а
затем удалить часть работы, которая была выполнена остальными задачами.
Поэтому, когда вы указываете задачу Gulp,
если вы указываете clean как первый в,
как второй параметр здесь,
то это означает, что эта задача будет выполнена первым.
И тогда остальные задачи будут выполнены.
Так что, я бы сказал «Галп старт».
С началом Gulp
все задачи, которые мы здесь указываем, будут выполняться параллельно.
Итак, я собираюсь выполнить задачу копирования шрифтов, а также задачу imagemin вместе.
Позже, мы установим задачу usemin, а затем
выполнить, что также вместе с копированием шрифтов и imagemin.
Последнее, что мне нужно добавить, прежде чем мы продолжим и выполним
задачи, - это подняться сюда, а затем потребовать imagemin.
Я бы сказал, что imagemin требует Gulp imagemin.
А затем сохраните изменения.
Давайте теперь продолжим и проверим задачу сборки.
В подсказке, если ваш тип Gulp build,
то он должен выполнять все три задачи.
Таким образом, вы увидите, что он запускает чистую задачу и
завершает ее, а затем запускает фактическую задачу сборки.
Таким образом, вы можете видеть, что,
указав чистый должен быть завершен до фактической сборки,
затем вы убедитесь, что вы сначала очищаете папку распространения,
а затем задачу сборки, которая включает шрифты копирования и imagemin,
все они, завершенные параллельно, будут выполняться после этого.
Перейдя в редактор,
вы увидите, что в папке дистрибутива
мы видим, что шрифты были скопированы и изображения были скопированы правильно.
Последним шагом является установка задачи usemin для создания папки распространения.
Чтобы настроить их usemin задачу,
я собираюсь установить несколько плагинов Gulp, поэтому я бы сказал, что NPM install.
И тогда я бы установил плагин файла uglify Gulp,
который, очевидно, также является модулем узла.
И тогда я установлю модуль узла usemin, а затем модуль rev node.
Модуль Gulp rev node похож на файл graph rev grant плагин, который мы видели ранее.
Это немного отличается от файла rev, который мы видели ранее,
но служит той же цели.
Итак, Gulp rev, тогда я настрою Gulp чистый CSS, а затем Gulp flatmap.
Вы увидите причину этого, как мы-
Мы создали нашу задачу usemin, так
и gulp-html min, и мы идем вперед и установить эти модули здесь.
Как только модули установлены,
давайте продолжим и требуем эти модули в нашем gulpfile, а затем настроим задачу usemin.
Переходя к нашему gulpfile прямо в верхней части,
я собираюсь потребовать модули, которые я только что установил.
Итак, углифичный глоток углифий.
Таким образом, задача uglify то
usemin задача gulp usemin,
затем после этого
rev то,
забыл там, запятая там.
Будьте очень осторожны, чтобы не пропустить эти запятые там.
Поэтому требуется gulp clean-css, затем flatmap и htmlmin.
Итак, это модули gulp,
которые мы установили,
так что давайте сохраним изменения, а затем мы спустимся вниз и настроим задачу usemin.
Подходя к нижней части файла gulpfile,
прямо там я настрою задачу usemin.
Итак, что делает задача usemin?
Таким образом, задача usemin принимает
htmlfiles, а затем ищет блоки CSS и JavaScript в htmlfiles
, объединяет, объединяет и минимизирует и изменяет файлы, а затем
заменяет их, используя конкатенированный файл в папке распространения.
Поэтому, чтобы начать,
я бы сначала начал с указания источника глотка.
Так где же исходные файлы?
Таким образом, исходные файлы являются htmlfiles в текущей папке.
Так глоток. /start.html, то я собираюсь
передать эти gulpfiles через этот модуль gulp, называемый как flatmap.
Что делает плоская карта?
Flatmap принимает эти несколько htmlfiles, а затем
запускает параллельные конвейеры для каждого из этих htmlfiles.
Каждый из них проходит один и тот же набор шагов, а затем, наконец,
сходится и копирует его в папку назначения.
Таким образом, как вы можете видеть в нашей текущей папке,
у нас есть contactus.html, aboutus.html и index.html.
Все три из них должны быть обработаны.
Таким образом, плоская карта позволяет нам обрабатывать их параллельно,
запуская один и тот же набор труб для каждого из этих файлов,
поэтому я использую плоскую карту там.
Итак, flatmap, а затем внутри flatmap мне нужно указать функцию,
два параметра; поток, файл.
Таким образом, файл в основном принимает каждый из тех исходных файлов, которые мы там указали,
а затем обрабатывает их с
одним и тем же набором функций здесь, а затем запускает свой отдельный поток для каждого из них.
Итак, я верну поток,
а затем я буду передавать каждый из них
через задачу usemin, которая сама,
состоит из css
и uglify JavaScript и html задачи.
Поэтому для css я собираюсь выполнить часть ревизии.
Таким образом, часть css, очевидно, будет делать конкатенацию и минимизацию
и т. Д., А затем применяет rev к этому,
чтобы она работала 20-битной строкой в файле main.css там.
Поэтому для css я установил это,
а затем для html,
потому что у меня есть несколько htmlmin файлов,
мне нужно указать это как функцию,
и внутри этой функции я бы сказал, что return htmlmin.
И затем внутри я дам ему параметр CollapseWhiteSpace,
и этот параметр будет установлен в true.
И поэтому это по существу завершает его html-часть.
И затем следующий - это часть js,
часть JavaScript,
которую мне нужно сделать uglify, а затем ревизию для него.
И затем, если у меня
есть встроенный код javascript, мне нужно применить
задачу uglify для этого,
а затем для кода inlinecss,
я буду использовать задачу CleanCSS там с concat в качестве параметра там.
Поэтому с этим я установил свою задачу usemin.
Так что он будет обслуживать все эти разные действия от моего имени.
И затем, как только они будут закончены,
результирующие
потоки будут переданы в папку дистрибутива.
Таким образом, задача usemin теперь настроена.
Позволь мне сохранить изменения.
И тогда я перейду к задаче сборки, а затем после imagemin я также
добавлю usemin в качестве одной из задач, которые будут выполняться задачей сборки.
Итак, с этими изменениями,
мы изменили задачу сборки,
давайте продолжим, а затем проверим, правильно ли построена папка дистрибутива или нет.
Перейдя к подсказке, позвольте мне ввести gulp
build, а затем подождать gulp, чтобы создать все разные задачи.
Это займет немного времени, чтобы usemin завершил свою работу,
и когда он завершит преобразование,
моя папка дистрибутива должна быть готова к просмотру.
Перейдя в редактор, вы можете увидеть, что папка дистрибутива была
подготовлена здесь, и вы можете увидеть индекс, contactus и aboutus.htmlfile.
Вы можете видеть, что при открытии index.htmlfile
он был сжат.
И htmlmin был выполнен,
в частности обратите внимание, как файл css был
заменен на css/main-, а затем вы увидите длинную строку there.css.
Так что это точно так же, как файл rev, который вы видели в ворчании с модулем gulp rev,
это то, что он делает с именем файла.
Поэтому, если вы посмотрите на css, вы можете увидеть, что имя файла является основным дефисом, а
затем некоторая строка там точка css и аналогично для javascriptfile.
Итак, это то, что делает модуль gulp rev,
и тогда все эти три файла готовятся.
Давайте посмотрим на эти файлы в браузере.
Перейдя в браузер, я вижу, что исходные файлы сохраняются правильно.
Позвольте мне проверить папку распространения.
Таким образом, в папке
дистрибутива index.html, который был подготовлен
задачей сборки gulp, похоже, работает правильно.
Позвольте мне также проверить страницу о странице,
и мы можем видеть, что о странице также построен правильно,
а также страница контакта.
Итак, теперь вы можете видеть, что наша задача глотка завершена.
Таким образом, мы завершим это упражнение.
В этом упражнении мы настроили очистку и
копирование файлов шрифтов в нашу папку дистрибутива,
мы выполнили задачу imagemin, а затем, наконец, мы создали
задачу usemin для создания нашей папки распространения.
Этим мы завершаем это упражнение.
Это может быть хорошее время для вас, чтобы сделать хороший комментарий с сообщением Gulp часть вторая.