Заставим Grunt работать с нашим препроцессором




Последний пункт нашего списка в начале статьи — использование Sass. И вновь, Grunt отлично подходит для этой задачи. Но, спросите вы, как же так? Разве Sass работает не на Ruby? Да, это действительно так. Правда, есть версия Sass, работающая на Node, но, она не добавляет в проект дополнительные зависимости, да и не такая свежая по сравнению с версией на Ruby. Так что мы будем использовать официальный плагин grunt-contrib-sass, который просто считает, что Sass уже установлен на вашей машине. Если это не так, изучите инструкцию по установке Saas из командной строки.

Действительно крутая фишка Sass в том, что он самостоятельно производит объединение и минификацию файлов. Так что в нашем маленьком проекте достаточно просто скомпилировать наш основной файл global.scss:

sass: {

dist: {

options: {

style: 'compressed'

},

files: {

'css/build/global.css': 'css/global.scss'

}

}

}

И, конечно, нам бы не хотелось запускать эту задачу вручную. У нас ведь уже есть плагин для отслеживания изменений, так что давайте его используем! В конфигурации watch добавим ещё одну подзадачу:

css: {

files: ['css/*.scss'],

tasks: ['sass'],

options: {

spawn: false,

}

}

Готово. И теперь, всякий раз, когда мы вносим изменения в Sass файлы, исходящий CSS файл будет автоматически обновляться.

Давайте пойдём немного дальше, это определённо того стоит, и добавим поддержку LiveReload. С LiveReload вам больше не придётся переключаться в окно браузера и обновлять страницу. Страница будет обновляться автоматически, а в случае CSS, новые стили будут внедряться в страницу также, без перезагрузки. Особенно полезно для тех сайтов, отображение которых зависит от различного состояния страниц.

Это очень легко устроить, потому как LiveReload уже включён в плагин watch. Всё, что нам надо сделать:

1.Установить плагин для браузера;

2.Добавить пару строк в настройки watch: watch: { options: { livereload: true, }, scripts: { /* и т.д. */

3.Перезапустить браузер и щёлкнуть на иконку LiveReload, чтобы включить его;

4.Отредактировать файл Sass и увидеть, как изменения появляются на странице без перезагрузки.

Загляденье.

Предпочитаете видео?

Если вы лучше воспринимаете информацию в формате видеоуроков, то, специально для вас я подготовил небольшой скринкаст, отлично дополняющий эту статью. Он опубликован на CSS-Tricks: First Moments with Grunt

Получаем level-up

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

Какие-нибудь заумные приверженцы DevOps могут смотреть свысока на нашу простую конфигурацию. Но я бы посоветовал им умерить пыл. Даже то, что мы сделали уже сейчас чрезвычайно значимый шаг. И не забывайте, что это всё бесплатно, с открытыми исходниками, и это поразительно.

Вы можете получить настоящий level-up, используя следующие полезные задачи Grunt:

·Обработка CSS Автопрефиксером (Пятёрка с плюсом, рекомендую) вместо аддонов препроцессора.

·Написание и запуск юнит-тестов JavaScript (например, Jasmine).

·Создание спрайтов и иконок SVG автоматически (например, Grunticon).

·Запуск сервера, чтобы вы смогли подключать на страницу ресурсы с нужными путями и использовать сервисы, требующие настоящие URL, вроде TypeKit и подобного, без использования других похожих утилиты, вроде MAMP.

·Поиск проблем в коде при помощи HTML-Inspector, CSS Lint, или JS Hint.

·Помощь в работе с репозиториями систем контроля версий, таких, например, как GitHub.

·Добавление номеров версий в имена файлов ваших ресурсов (проталкивание кэша).

·Помощь в сборке на стейджинге или продакшене (например, DPLOY).

А также вы можете прокачаться ещё больше, просто поняв принцип работы самого Grunt:

·Прочитайте Grunt Boilerplate авторства Mark McDonnell.

·Прочитайте Grunt Tips and Tricks авторства Nicolas Bevacqua.

·Организуйте ваш Gruntfile.js, разбив его на меньшие файлы.

·Изучите Gruntfile.js написанные другими людьми и на других проектах.

·Узнайте больше про Grunt, покопайтесь в исходниках, изучите API.

Делимся знаниями

Я думаю, в завершении этой темы было бы неплохо организовать обмен знаниями между заинтересованными сторонами. Если вы установили Grunt в первый раз (или хорошо помните, как это делали), будьте особенно внимательны к неприятным мелочам, которые вы испытали и превозмогли. Это — те мелочи, которыми следует поделиться тут, в комментариях. Так мы сделаем из этой статьи полезный ресурс, помогающий преодолеть эти неприятные моменты без смущения. Мы все, вместе, занимаемся этой штукой!

 

Примечания

1. Может быть, кто-нибудь когда-нибудь сделает красивый UI под Grunt для вашей операционной системы. Но я до конца не уверен, что этот день наступит. Конфигурация плагинов — это важный атрибут использования Grunt. Каждый плагин немного отличается от остальных, в зависимости от того, что он делает. Это означает уникальный интерфейс для каждого отдельного плагина, и его воплощение — довольно рискованное занятие.

Возможно, неплохим компромиссом станет плагин Grunt DevTools для Chrome.

2. Gruntfile.js в документации и примерах часто называется Gruntfile. Не называйте этот файл буквально, Gruntfile, он не заработает.

 



Поделиться:




Поиск по сайту

©2015-2024 poisk-ru.ru
Все права принадлежать их авторам. Данный сайт не претендует на авторства, а предоставляет бесплатное использование.
Дата создания страницы: 2016-04-27 Нарушение авторских прав и Нарушение персональных данных


Поиск по сайту: