Давайте продолжим хрюкать.
Как мы сделали во второй части упражнения сценариев NPM,
в этой второй части этого упражнения ворчущего,
мы собираемся настроить точно такие же задачи.
Мы собираемся сделать очистку папки распространения,
копирование шрифтов в папку распространения,
затем мы также сделаем минимизацию наших изображений с помощью imagemin,
а затем, наконец, использовать задачу usemin для создания и подготовки нашей папки распространения.
Продолжая наше упражнение,
я установлю пару ворчущих модулей.
Итак, давайте установим NPM, install-grunt-contrib-copy.
Это используется для копирования файлов, а затем grunt-contrib-clean
и минус save-dev.
И как только эти два будут установлены,
мы будем продолжать и конфигурируем соответствующие задачи.
Перейдя к вашему файлу grunt,
мы добавим в конфигурацию как для копирования, так и для чистых задач.
Итак, начиная с запятой,
всегда помните, чтобы не забыть запятую.
Он вернется, чтобы укусить тебя в неправильные моменты, если ты это сделаешь.
Итак, давайте настроим задачу копирования.
Для копии usemin ожидает, что мы также сохраним
наши HTML-файлы скопированы в папку распространения
, чтобы он мог делать манипуляции с этим.
Итак, в этом случае
мы собираемся сначала скопировать
HTML-файлы из нашей папки проекта в папку дистрибутива.
Итак, чтобы сделать копирование,
я собираюсь настроить его HTML-часть.
Таким образом, здесь мы будем использовать некоторые из
синтаксиса grunt для указания файлов, которые нужно скопировать.
Итак, я говорю файлы, а также указываю правые,
левые и правые скобки там, поэтому внутри этого
мне нужно указать определенную конфигурацию.
Итак, я бы сказал, расширить true и dot true, затем CWD,
текущий рабочий каталог - точка косой черты
, а затем,
мы настроим следующий, который является SRC, исходные файлы,
а затем исходные файлы star.html,
все HTML-файлы,
а затем мы собираемся скопировать их в папка dist.
Вот почему место назначения устанавливается в папку дистрибутива.
Таким образом, с этой настройкой
моя задача копирования скопирует все HTML-файлы в папку распространения.
Теперь вместе с этим, нам также нужно скопировать шрифты.
Итак, я настрою второй для шрифтов.
Итак, я указываю шрифты, а затем здесь также мне нужно указать
файлы, которые нужно скопировать, и поэтому мы говорим файлы,
а затем это
некоторые параметры конфигурации, которые вам нужно настроить для задачи копирования.
Теперь, если вам нужно понять,
то, прочитав документацию для соответствующего плагина grunt,
вы сможете понять это и так или вы можете
просто следовать примеру, который я даю здесь.
Итак, точка true, а затем CWD,
текущий рабочий каталог - это модули узлов и шрифт удивительный.
Вот где я собираюсь скопировать файлы,
а затем источником файлов является fontsstar.star, это
файлы, которые мне нужно скопировать,
а местом назначения является папка распространения.
Таким образом, я установил свою задачу копирования, чтобы скопировать
как файлы HTML, так и файлы шрифтов в мою папку распространения.
Следующая задача, которую я собираюсь настроить, - это чистая задача.
Итак, позвольте мне настроить чистую задачу.
Для чистой задачи я настрою сборку,
а затем скажу, что источник является папкой распространения.
Таким образом, по существу указав, что папка дистрибутива должна быть очищена.
Итак, теперь мы настроили копию и чистые задачи, так что давайте сохраним изменения.
Следующая задача, которую я собираюсь настроить, - это задача imagemin.
Это то, что мы будем использовать для сжатия и копирования изображений в папку распространения.
Чтобы начать работу с задачей imagemin, на первом шаге
установите соответствующий плагин grunt.
Итак, грант-contrib-imagemin, минус минус save.dev.
И как только это будет установлено,
то мы продолжим и настроим соответствующую задачу imagemin.
Переходя к нашему файлу grunt после настройки для чистой задачи,
я собираюсь настроить задачу imagemin.
Итак, я скажу imagemin,
а затем прямо там,
я буду указывать динамические,
и внутри там я буду указывать файлы, чтобы вы могли
видеть, что спецификация файла будет похожа.
Я бы сказал, разверните true,
тогда CWD - текущий каталог.
Тогда источником файлов является imagestar.
а затем в скобках, в скобках,
я указываю PNG, GIF и JPG.
Таким образом, вы можете увидеть глобальный шаблон файла здесь.
Таким образом, он говорит, что любые
файлы PNG, GIF или JPG, которые соответствуют этому шаблону, а затем
начать точку, означающую все файлы этого шаблона
, и источник и место назначения, которые
я установил в качестве папки распространения.
Таким образом, мы настроили нашу
задачу копирования, очистки и imagemin.
Давайте настроим задачу здесь под названием build.
Итак, я бы сказал, зарегистрировать задачу,
grunt зарегистрировать задачу, а затем я назову задачу как сборку
, а затем внутри этого
мы определим шаги настройки, которые будут выполнены задачей сборки.
Итак, прямо там, точка с запятой, а затем там,
я уточню три задачи в последовательности, которые они должны быть выполнены.
Во-первых, я скажу: «Чисто».
Таким образом, мы очистим папку распространения,
а затем начнем перестроить папку распространения.
Чистый, тогда следующая задача будет
копировать, а затем после этого я сделаю, imagemin.
Таким образом, эти три задачи должны быть настроены здесь.
Так что с этим позвольте мне сохранить изменения.
Посмотрим, как работает эта штука.
Теперь, перейдя к подсказке, если я напечатаю
, ворчусь и строю, вы увидите, что сначала он выполнит очистку,
а затем выполнит копию и выполнит задачу imagemin.
Таким образом, он делает все эти три, и тогда вы сразу увидите, что
папка дистрибутива создана в моей папке проекта здесь.
И внутри папки дистрибутива можно увидеть, что шрифты были скопированы,
изображения были скопированы и
три HTML-файла были скопированы в папку дистрибутива.
Ты только на полпути.
Теперь нам нужно иметь возможность обрабатывать эти файлы с помощью плагина usemin.
Итак, давайте перейдем к следующему.
Теперь я собираюсь установить несколько модулей NPM
, которые полезны для создания папки распространения.
Поэтому, чтобы сделать это, я бы сказал NPM установить.
Я могу указать здесь набор модулей, поэтому,
я бы сказал, grunt-contrib-concat.
Итак, это используется для конкатенации файлов, затем grunt-contrib-cssmin,
grunt-contrib-htmlmin, затем скажем, grunt-contrib-uglify.
Потом хрюнт-filerev.
Вы увидите причину использования filerev через короткое время,
а затем grunt-usemin, а затем сохраните def, а затем
установите все эти grunt модули.
После того, как все они были установлены,
следующим шагом является переход и настройка,
usemin задача, которая также использует
задачи cssmin Uglify Concat для выполнения построения папки распространения.
Теперь давайте приступаем к настройке задачи usemin.
Поэтому возвращаясь к файлу grunt после imagemin,
я собираюсь добавить в следующую задачу для usemin для работы с grunt.
Первая задача, которую мне нужно настроить, называется UseMinPrepare.
Эта задача UseMinPrepare подготовит файлы, а затем также настроить
Concache CSS min и Uglify и file ref плагины,
так что они могут выполнять свою работу правильно.
Таким образом, это причина useMinPrepare.
Так вот, как был разработан плагин grant usemin.
Несколько отличается от того, как usemin, который мы использовали с конца игры скрипты wooks.
Итак, в UseMinPrepare
просто какое-то случайное имя, которое я собираюсь использовать, а затем сказать, что назначение - это dist.
И тогда я бы указал источник как все html-файлы здесь.
Поэтому я бы сказал contactus.html
, aboutus.html и index.html.
Таким образом, все эти три файла должны быть обработаны.
Следующая часть этой конфигурации usemin, конфигурация
UseMinPrepare, где я указываю параметры.
Это то, что я понял с помощью проб и ошибок.
Просто следуйте по шагам.
Поэтому мне нужно настроить
несколько вещей здесь внутри, где мне нужно настроить что-то под названием Flow.
И затем внутри мне нужно настроить другую часть под названием Steps,
а затем здесь я указываю шаги здесь, а затем говорю cssmin,
а затем после этого я скажу, что js uglify.
Итак, это то, что мне нужно указать здесь, а затем после этого я говорю сообщение,
и здесь я могу позволить этому предоставить
некоторые варианты для своих конкретных задач, которые я настроил.
Итак, я предоставляю некоторые дополнительные опции для css.
Таким образом, это поставляется внутри поста здесь.
Теперь, опять же, это то, как должна быть выполнена конфигурация.
Итак, мы только что узнали это, посмотрев документацию там.
Итак, здесь внутри post css,
я бы указал имя как cssmin.
До сих пор это задача cssmin.
Я бы сказал CreateConfig:
блок контекста функции, а затем внутри этой функции
я должен предоставить определенные параметры.
Итак, я бы сказал, что
генератор параметров контекста var.
Таким образом, это некоторая переменная JavaScript, которую мне нужно
указать там, объект JavaScript по существу.
Таким образом, этот объект содержит это свойство, называемое options,
где я могу указать некоторые параметры, которые передаются
в CSS min, задаваемый задачей usemin prepare.
Таким образом, там, сохраняйте
специальные комментарии, а затем,
rebase является ложным.
По-видимому, мне нужно предоставить это, чтобы моя задача cssmin в настоящее время обрабатывала
удивительную модификацию шрифта и включение в конкатенированный файл.
Если я этого не сделаю,
похоже, сломает шрифт удивительным, и это то, что я понял,
выполнив небольшое
исследование переполнения стека и некоторых из этих мест и выяснив,
что их проблема, вызванная шрифтом, может быть
исправлена, включив это в моя вонючий конфигурация.
Итак, снова я только что просмотрел
предложения от некоторых людей, которые пытались и исправить проблему.
Итак, если вы столкнетесь с такими проблемами,
это один из способов решения проблем, которые могут возникнуть при
работе с этими различными инструментами.
Позвольте мне добавить в следующую задачу для Concat.
Здесь я уточню некоторые вещи и варианты.
Я указываю эту точку с запятой,
поэтому это то, что мне нужно указать для Concat,
а затем после
опций я указываю dist как пустой.
Теперь эти параметры Concat будут настроены UseMinPrepare, который запускается ранее.
Таким образом, мы можем оставить большую часть этого пустым там,
а затем это будет перенастроено UseMinPrepare.
Следующий - углифий.
Внутри uglify также мне просто нужно указать этот dist как пустой.
Если я не указываю их,
то задача usemin работает неправильно.
Поэтому мне нужно четко указать все эти вещи.
Поэтому для cssmin также я бы сказал, что dist пустой.
И затем следующая задача, которую я собираюсь настроить, называется filerev.
Итак, вы видели, как я устанавливал плагин filerev для Grunt.
Что делает этот файлерев?
Что делает filerev, это когда usemin готовит файл main.css и main.js,
то, что делает filerev, это добавляет дополнительное расширение к этому главному имени,
так что, когда вы подготавливаете новую версию своего сайта и загружаете ее на веб-страницу,
если кто-то видел ваш Сайт раньше,
то их браузер мог обналичить файлы main.css и main.js.
Если вы не прикрепите этот filerev то, что происходит,
браузер ниже загружает новую версию вашей веб-страницы.
Он может не загружать файл main.js и main.css,
потому что он находит их уже в локальном кэше.
Таким образом, ваша веб-страница может быть некорректно отображена.
Итак, чтобы справиться с проблемой,
то, что мы делаем, это каждый раз, когда мы готовим новую папку дистрибутива,
мы добавим ревизию файла.
Вот что означает filerev,
номер версии файла,
как дополнительное расширение к имени этих файлов css и js.
Main.ss и main.js файлы предварительно подготовленные.
Так вот что делает Filerev.
Теперь, как этот filerev может вычислить это значение?
Он принимает содержимое этих файлов, а затем выполняет некоторую обработку, а затем генерирует
md5 сжатый номер 20 символов, который будет прикреплен к основному файлу.
Итак, я собираюсь настроить эту часть здесь.
Итак, в опциях
я указываю здесь, говоря, как предполагается вычислять это число там.
Итак, я говорю кодирование utf8,
а затем я говорю, что алгоритм, который он использовал для вычисления этого хэша,
то, что мы называем хэшем, является md5.
Теперь это станет яснее, когда мы на самом деле запускаем
задачу usemin, а затем посмотрим, что она делает, длина 20.
Итак, я вернусь и объясню, что
делает эта штука, когда мы действительно запускаем задачу usemin.
Итак, позвольте мне закончить варианты здесь, а затем я бы сказал, релиз.
Итак, мне нужно настроить еще несколько вещей здесь, а затем освободить,
а затем мне нужно указать файлы, для которых должен действовать мой filerev.
Итак, я бы сказал файлы filerev.
Итак, внутри файла.
Итак, вы начинаете видеть шаблон в том, как вещи указаны здесь.
Итак, когда вы укажете файлы здесь,
вы скажете источник,
а затем там вы укажете dist CSS,
а затем star dot CSS,
а затем следующий dist js*.js.
Таким образом, с этим вы настроили filerev.
Таким образом, конфигурируется часть filerev.
И, наконец, нам нужно настроить задачу usemin.
Итак, чтобы настроить задачу usemin,
я иду сюда и говорю usemin,
и здесь позвольте мне указать некоторые параметры для задачи usemin.
Итак, здесь я указываю html.
Итак, здесь я указываю ему, какие файлы он должен изменить,
его нужно обновить.
Таким образом, файлы, которые были скопированы в папку распространения.
И последний - «dist/index.html».
Итак, это три файла, которые он должен обработать,
а затем некоторые варианты для этого здесь.
Итак, параметры я буду указывать «AssetsDirs».
Итак, здесь все активы, которые я использую, существуют.
Таким образом, CSS и JavaScript файлы существуют.
Итак, я укажу «dist/css» и «dist/js».
При этом вы завершили настройку задачи «usemin».
Далее настраиваем задачу «htmlmin».
Для задачи «htmlmin»
мы указали цель «dist», папку распространения
и «htmlmin» для
всех HTML-файлов, находящихся в этой папке распространения.
Параметры, которые мы указываем для этого состояния, что, скажем,
«CollapsedWhiteSpace: True» означает, что
все пробелы в HTML-файлах будут свернуты,
так что [неслышно] содержат только минимальный HTML-код.
Модификация по существу удаляет
все посторонние символы из файлов «htmlmin».
Теперь мы также указываем, что словарь файлов,
те файлы, которые нужно настроить.
Это указывается как место назначения, двоеточие, источник.
Таким образом, мы указываем «dist/index.html»: «dist/index.html»,
что означает, что «index.html» в папке дистрибутива
будет [неслышным], а затем поместим обратно в файл «index.html»,
также в папку дистрибутива.
Аналогичным образом, «contactus.html» указан там, а затем
«aboutus.html» также указывается, как показано в этом списке файлов.
Причина, по которой мы выполняем «htmlmin» после того, как закончим
«usemin», заключается в том, что «usemin
» заменит все скрипты основным файлом «.js», а также все, что
код CSS объединяется и заменяется основным файлом «.css».
Таким образом, «htmlmin» будет выполняться на
результирующих HTML-файлах после того, как «usemin» завершит свою работу.
Вот как это работает в Grunt.
Таким образом, Grunt «htmlmin» должен быть применен после того, как «usemin» завершит свою работу.
Поэтому, как только все это настроено,
тогда один маленький шаг, который мне нужно сделать, это вернуться сюда,
а затем, где мы указываем для «jit-grunt»,
нам нужно указать, что этот «jit-grunt»,
вы помните, что мы ввели что-то под названием
«UsemInPrepare» [неслышно], поэтому вам нужно сообщите «jit-grunt»,
заявив, что конфигурация «UseMinPrepare», которую мы ввели, будет
обрабатываться этим плагином «grunt-usemin».
Поэтому мне нужно явно указать,
иначе «jit-grunt» будет искать плагин «UseMinPrepare» Grunt.
Поэтому, чтобы указать на это,
я бы сказал «UseminPrepare» и сказал «grunt-usemin»,
по существу информируя «jit-grunt», говоря, что «UseminPrepare» будет
обрабатываться плагином «grunt-usemin» там.
Наконец, давайте переконфигурируем задачу «сборки» внизу.
Перейдя к этой задаче «сборки» после «imagemin».
Поэтому мы сделали «clean», «copy», «imagemin»,
затем следующая задача, которую я должен выполнить, - «useMinPrepare», а затем после
«useMinPrepare» выполнить «contact», затем я выполняю «cssmin»,
затем я выполняю «uglify».
Итак, вы видите, что мы должны сделать их в определенный набор шагов.
После запуска «cssmin» и «uglify»
будут созданы основные «.css» и основные «.js» файлы.
Поэтому на данный момент я собираюсь запустить
«filerev», а затем, наконец, запустить задачу «usemin».
Так вы видите секреты: «чистый», «копия»,
«имиджемин», «useMinPrepare», «concat», «cssmin», «uglify».
На данный момент, файлы «.css» и «.js»,
основные «.css» и основные «.js» готовы.
Я могу сделать «filerev» на них, а затем, наконец, запустить «usemin».
Но это, давайте сохраним изменения, а затем
посмотрим, как задача «сборки» на самом деле готовит дистрибутив.
[ неслышно] Перейдя к нашему терминалу,
в подсказке я набираю «grunt build», а затем жду выполнения всех задач.
Таким образом, вы увидите, что он будет проходить через весь набор задач,
а затем, наконец, когда
это будет сделано, он просто уточнит, что все задачи выполнены.
Поэтому, если вы хотите вернуться и посмотреть последовательность задач, которые были выполнены,
вы можете просто прокрутить назад и посмотреть, что он делает.
Сначала он очищает,
затем копирует HTML-файлы,
затем копирует файлы шрифтов,
затем выполняет задачу «imagemin»,
затем он выполняет «UseminPrepare»,
затем он выполняет «concat»,
затем он выполняет «cssmin»,
как распределение, так и сгенерированный,
а затем выполняет» uglify»,
затем задача «uglify», затем она запускает «filerev», а затем, наконец, задачу «usemin».
И тогда наша папка дистрибутива должна быть готова.
Перейдя в наш редактор,
вы увидите, что папка дистрибутива подготовлена.
Давайте конкретно рассмотрим основные «.css» и основные «.js» файлы.
Обратите внимание на имена этих файлов.
Обратите внимание, что после main
есть точка, а затем
есть 20-символьный хэш, который был добавлен «filerev» здесь.
Так что произойдет, если я подготовлю новую папку распространения,
каждый раз, когда я готовлю новую папку распространения, этот хэш изменяется,
что означает, что каждый раз, когда я развертываю новую версию моего веб-сайта,
если какие-либо браузеры ранее просматривали мой веб-сайт, то их записи кэша,
где они возможно, кэшировал основной «.css», а основной «.js» стал
недействительным, потому что у нас есть новая версия основного «.css» и основного «.js».
Таким образом, браузер повторно загрузит эти вещи.
Я не показывал «filerev» со сценариями NPM,
но я просто добавил его здесь, чтобы показать вам, как это делается с Grunt.
Таким образом, мы завершим это упражнение.
Давайте быстро посмотрим на сайт в нашем браузере.
Перейдя в ваш браузер,
вы можете видеть, что я теперь загружаю в «dist/index.html».
Так что это из папки дистрибутива,
поэтому я проверяю, и это выглядит просто отлично.
« aboutus.html» также выглядит отлично, как и раньше.
И контактная страница также выглядит хорошо подготовленной к развертыванию.
Таким образом, мы завершим это упражнение.
После всех хрюкающих,
я уверен, что тебе нужно задохнуться.
Прежде чем сделать это, обязательно сделайте хороший комментарий с сообщением «Grunt Part 2».