Пора начать хрюкать.
В этом и следующем упражнении мы собираемся повторить
такую же настройку, как мы сделали со сценариями NPM.
В первой части мы собираемся настроить преобразование из SCSS в CSS.
Затем мы установим задачу часов, а также обслуживаем код с помощью синхронизации браузера.
Во второй части упражнения
мы будем использовать Усман и различные задачи, чтобы подготовить складку распределения.
Эти упражнения ни в коем случае не являются единственным способом
реализации конфигураций Grunt или файлов вызовов.
Это всего лишь иллюстрация того, как мы можем использовать эти инструменты.
Вы можете придумать свой собственный способ настройки файла
Grunt и файла вызова для ваших проектов.
Наш первый шаг в использовании Grunt заключается в создании Grunt CLI в качестве глобального модуля NPM.
Для этого добавьте тип приглашения: NPM -g install Grunt CLI.
Это интерфейс командной строки для Grunt.
После того, как это
будет установлено, мы установим локальный модуль Grunt NPM для использования в наших проектах.
Grunt CLI позволяет нам использовать Grunt.
Мы создали интерфейс командной строки Grunt.
Затем следующим шагом является настройка - Grunt локально,
поэтому; NPM установить Grunt минус save dev.
Затем установите Grunt локально.
После того, как вы завершили эти два шага,
следующий шаг, чтобы перейти к нашему проекту, а затем создать новый файл,
и мы назовем его как Gruntfile.js.
Внутри этого Gruntfile.js мы настроим код для настройки наших задач Grunt.
В этом файле первым шагом является добавление «use strict» означает
«use strict» код JavaScript.
Затем вы говорите module.exports
= функция (ворчание).
Затем внутри, мы настроим конфигурацию Grunt для всех задач.
Как я уже упоминал ранее, Grunt - это бегун задач на основе конфигурации.
Итак, мы установим различные плагины Grunt для
различных задач, а затем настроим их в нашем файле Grunt.
Чтобы сделать конфигурацию,
мы добавим в код здесь,
говоря: grunt.initConfig
и внутри этого initConfig,
мы добавим в конфигурацию для задач Grunt колеса.
Как только вы завершите это,
давайте сохраним изменения.
На нашем следующем шаге
мы установим несколько плагинов Grunt, чтобы позволить нам конвертировать SCSS-код в CSS код.
Для этого я установлю модуль NPM под названием
Grunt SASS — Grunt SASS, сохраните def.
В дополнение к этому,
я настрою еще два модуля Grunt под названием,
NPM Install Time Grunt и Jit Grunt.
Эти два модуля — Time Grunt и Jit Grunt.
Модуль Time Grunt распечатывает статистику времени для выполнения различных задач Grunt.
Модуль Jit Grunt используется для загрузки в
эти плагины Grunt всякий раз, когда они необходимы в любом приложении.
Другой альтернативой является загрузка
различных модулей Grunt явно в вашем конфигурационном файле Grunt.
Я предпочитаю использовать Jit Grunt, чтобы он позаботился о загрузке
в любые плагины Grunt, которые мне нужны по мере необходимости,
как когда я использую их в коде.
Установите эти два времени Grunt и Jit Grunt и как только они установлены,
то пришло время настроить нашу задачу преобразования SASS.
Теперь вам, очевидно, должно быть интересно, почему мы набираем этот
module.exports, а затем функцию и так далее.
Вот как мы определяем модули узлов.
Мы будем иметь дело со структурой узлов модулей и почему мы используем этот подход
в курсе серверных узлов позже в специализации.
На данный момент просто примите, что так написан код для Grunt,
потому что файл Grunt сам по себе является
узловым модулем, который будет загружаться в различные плагины Grunt.
После того, как мы это сделаем, мы собираемся потребовать пару плагинов Grunt здесь.
Чтобы сделать это, мы скажем require ('time- grunt'),
и мы скажем grunt против конфигурации, которую мы используем для загрузки в Time Grunt.
Требование, как вы узнаете позже, когда вы узнаете о модулях узла,
это способ сказать, что нагрузка в модуле узла Time Grunt, который
будет использоваться в этом конкретном модуле узла.
Аналогично, мне потребуется модуль узла Jit Grunt.
Этот модуль узла Jit Grunt гарантирует, что он будет загружаться в
любые другие модули узла или любые другие плагины Grunt, которые являются модулями узлов, в
основном, как в том случае, когда они фактически подразумеваются в моем Grunt для выполнения различных задач.
Альтернативой было бы вручную загрузить каждый из
этих плагинов Grunt явно, используя требуемый оператор.
Я спасаю себя немного неприятностей, просто используя Jit Grunt,
который заботится о загрузке этих модулей узлов, когда это необходимо.
Теперь, переходя в конфигурацию,
как мы поняли, Grunt работает над конфигурацией,
поэтому каждый плагин Grunt, который мы хотим использовать для выполнения задачи,
он должен быть настроен внутри этого файла Grunt InitConfig.
Эта конфигурация в основном является объектом JavaScript в основном.
Если вы знакомы с объектами JavaScript,
вы начинаете понимать синтаксис очень, очень быстро.
Первая задача, которую я собираюсь настроить, - это SASS.
Итак, я набираю SASS здесь,
а затем внутри SASS, я говорю dist.
Теперь вы должны верить, что именно так выполняется конфигурация.
Итак, я говорю dist,
а затем внутри,
я говорю файлы, а затем там,
я указываю файлы, которые нужно преобразовать.
Я говорю, CSS/styles.CSS, который
зависит от CSS/Styles.scs.
С этим мы завершаем настройку задачи SASS здесь.
Как только мы завершим настройку задачи SASS,
если вы действительно хотите выполнить задачу SASS,
то ниже вы настроили задачу SASS, сказав «grunt.registerTask»,
а затем я назову эту задачу CSS,
а затем я
в скобках писца скажу «SASS».
Теперь, чтобы понять синтаксис здесь,
это, как вы можете видеть, говорит «grunt.registerTask», и имя этой задачи - CSS.
И что включает в себя эта задача?
Эта задача включает в себя выполнение задачи SASS, которая уже была настроена здесь.
Вот как мы читаем этот синтаксис здесь.
Если вы этого не хотите, вам не нужно настраивать это,
потому что мы будем использовать SASS вместе с задачей часов для автоматического
запуска SASS при изменении нашего SCSS-файла.
С этим, давайте сохраним изменения.
Позвольте мне показать вам эту конкретную задачу в действии.
Если вы настроили задачу с именем CSS там,
то добавьте приглашение,
вы можете ввести «grunt.CSS» и затем он выполнит
задачу преобразования кода sass в код CSS.
Перейдя в командную строку,
в командной строке введите «grunt.CSS», и вы увидите
выполнение задачи SASS, а затем преобразование файла styles.sess в файл styles.CSS.
Кроме того, как вы можете видеть,
Time Grunt распечатает такую статистику,
чтобы указать, сколько времени заняло каждая из этих задач.
Если это вас интересует,
то вы можете посмотреть на эти детали здесь.
В нашем следующем шаге, мы собираемся настроить часы и сервер,
чтобы держать часы на
SASS-файлах и автоматически конвертировать их, когда они будут изменены,
а затем мы настроим сервер,
используя BrowserSync для обслуживания нашего сайта.
Чтобы настроить Watch and Serve Tasks,
я собираюсь установить еще пару плагинов,
поэтому я скажу npm install,
grunt-contrib-watch минус save-dev.
Итак, это часы-контриб-часы.
Grunt плагин, который является модулем узла, поэтому установите его.
Таким образом, плагин Watch позволяет следить за различными файлами.
Следующий плагин, который я собираюсь
установить, - это grunt-browser-sync.
Модуль BrowserSync - это тот, который я собираюсь использовать,
для сохранения файлов из моей папки проекта,
чтобы я мог видеть веб-сайт в браузере.
Как только я установил эти два модуля,
пришло время перейти в мой grunt.initconfig,
а затем настроить две задачи.
Один для ведения часов,
второй для обслуживания файлов с помощью BrowserSync.
Итак, возвращаясь к моему initconfig,
поставьте запятую после SASS,
а затем переходите на следующую строку.
Всегда помните, чтобы поставить запятую.
Отсутствующая запятая вызывает много головной боли, когда вы пытаетесь запустить свои задачи ворчания.
Очень трудно определить, что вы пропустили запятую.
Поэтому важно обратить внимание на
синтаксис и убедиться, что вы не пропустите ни одну из этих запятых.
Он вернется, чтобы укусить тебя не в то время.
Таким образом, следующая задача,
которую я собираюсь настроить, - это WatchTask.
Итак, я говорю «Смотреть» и что я хочу посмотреть?
Я хочу посмотреть эти файлы, которые являются CSS/*.SCSS.
Итак, это файл SCSS, который я хочу посмотреть.
Все файлы SCSS в моей папке CSS.
Если какой-либо из них изменен,
то соответствующая задача, которую я собираюсь выполнить, - это SASS.
Задача SASS, которую я уже настроил ранее.
Таким образом, я настроил свой WatchTask,
чтобы держать часы на SCSS-файлах, а затем
автоматически конвертировать их, вызвав SASS.
Теперь с WatchTask я могу фактически наблюдать за несколькими файлами,
а затем автоматически вызывать соответствующие задачи для этих файлов.
Так, например, я могу следить за
своими файлами JavaScript, а затем автоматически делать подсказки JS,
когда мои файлы меняются.
Или делать идентификацию и так далее.
Теперь следующий, который я собираюсь настроить, - это BrowserSync.
Опять же не забудьте запятую после WatchTask,
а затем введите BrowserSync.
Я бы сказал, что BrowserSync здесь, а затем для BrowserSync,
я бы сказал, что настройте задачу внутри.
Теперь это синтаксис, который мы используем для ввода
конфигурации внутри нашего файла grunt.
Поэтому он говорит BrowserSync dev.
Теперь, если вы спросите меня почему,
нам просто нужно прочитать документацию
для каждого из этих плагинов, а затем выяснить, как настроить эти плагины.
Итак, я уже прочитал документацию, и я выяснил
некоторые основные настройки для каждой из этих задач, поэтому я просто вписываю их.
Очевидно, если вы хотите больше гибкости,
вы можете прочитать соответствующую документацию, а затем выяснить
другие способы настройки этих задач.
Моя конфигурация здесь - это всего лишь один из способов решения или решения проблем.
Поэтому здесь я указываю BSFiles,
поэтому этот файл указывает, какие файлы нужно отслеживать
моим BrowserSync, а затем, когда любой из этих файлов изменится,
мой BrowserSync приведет к перезагрузке браузера.
Поэтому я собираюсь смотреть все файлы в моей папке CSS,
HTML-файлы в моей папке проекта,
а затем все мои файлы JavaScript в папке JS.
Таким образом, с этим я настроил все те файлы, на которых я собираюсь держать часы,
а затем автоматически вызвать перезагрузку моей страницы, когда это необходимо.
И затем следующая конфигурация, которую мне нужно
сделать, - это еще несколько вариантов для моего BrowserSync.
Таким образом, параметры, которые я собираюсь указать,
watchTask true, что означает, что есть запущенный WatchTask
и базовый каталог для моего сервера.
Поэтому я говорю BaseDir,
а затем я указываю, точка косой черты.
Таким образом, текущий каталог,
как мой базовый каталог.
Поэтому с этими изменениями
позвольте мне сохранить изменения в моем файле grunt,
а затем я спущусь вниз, а затем настрою другую задачу grunt, здесь называемую default.
Итак, я бы указал задачу по умолчанию.
Что мне нужно сделать для этой задачи по умолчанию?
Мне нужно выполнить
BrowserSync, а также вторую задачу, которую я собираюсь сделать, это смотреть.
Сначала мне нужно будет выполнить задачу BrowserSync, а затем WatchTask позже.
Потому что задача BrowserSync начнет обслуживать мой сервер.
Если я сначала сделаю задачу WatchTask, а затем задачу BrowserSync,
WatchTask в основном
остановит все, а затем все оставшиеся задачи, которые не будут выполняться.
Поэтому, если вы используете WatchTask,
сделайте это как последний в последовательности, указанной в квадратных скобках.
С этим мой проект теперь настроен,
чтобы как следить за моими файлами SASS, так и обслуживать его всякий раз, когда это необходимо.
Итак, это завершает мой файл,
давайте вернемся к нашему терминалу.
Возвращаясь к моему терминалу,
я открыл другую вкладку, а затем на этой вкладке
я собираюсь запустить задачу grunt,
которая также будет держать мой BrowserSync и будет обслуживать
файлы и автоматически перезагружать веб-страницу,
если какой-либо из этих файлов изменится.
Поэтому, если вы настроили задачу по умолчанию, как мы это делали в упражнении,
тогда в подсказке
мне просто нужно ввести grunt, а затем он автоматически выполнит задачу по умолчанию.
Как только мои задачи grunt начнут работать,
вы можете видеть, что он запустил BrowserSync
и обслуживает файлы, а также запускает WatchTask,
который ждет любых изменений для автоматического запуска задачи SCSS.
Чтобы продемонстрировать вам, как будет запускаться задача SCSS,
всякий раз, когда я вношу какие-либо изменения в файл Styles.scs,
поэтому я поднял файл Styles.scss,
и я просто собираюсь сохранить этот файл.
И тогда вы заметите, что немедленно, с
левой стороны, вызывается и запускается задача SASS, а затем перекомпилируется, и это
также приведет к изменению файла Styles.scss после перекомпиляции.
Затем это вызовет BrowserSync для автоматической перезагрузки моей веб-страницы.
С помощью этого мы завершаем наше упражнение по первой части.
Это хорошее время, чтобы сохранить ваши файлы,
в репозиторий Git с сообщением Grunt часть первая.