В этой статье мы рассмотрим, как можно использовать Grunt для ускорения и изменения способа разработки веб-сайтов. Сначала мы вкратце ознакомимся с основными возможностями Grunt, а затем уделим внимание настройкам и вариантам использования его различных плагинов, которые помогут сделать всю самую тяжелую работу в проекте.
Затем мы рассмотрим, как создать простое вводное контрольное устройство, используя Sass в роли препроцессора, как использовать grunt-cssc и CssMin для объединения и уменьшения каскадных таблиц стилей (CSS), как использовать HTMLHint для проверки правильности написания HTML кода, и как мгновенно сжимать цифровые объекты. Наконец, мы рассмотрим возможность использования UglifyJS для уменьшения размера JavaScript кода. Данный продукт также поможет убедиться в том, что наш веб-сайт использует минимально возможную полосу пропускания.
Grunt.js позволяет запускать различные JavaScript задания. Данный продукт предназначается для выполнения повторяющихся задач, таких как минимизация, компилирование, модульное тестирование или уменьшение веса.
Что нужно знать, приступая к работе с Grunt.
Большинство разработчиков согласится с утверждением о том, что показатели скорости и темпа развития JavaScript в течение последних нескольких лет просто поразительны. С появлением таких фреймворков, как Backbone.js и Ember.js или сообществ, таких как JS Bin, меняется само развитие этого языка. Меняется наше понимание не только того как мы должны взаимодействовать с веб-сайтами, но и то, как мы должны создавать их.
При работе с JavaScript на регулярной основе приходится выполнять некоторые задачи. В большинстве проектов приходится выполнять повторяющуюся работу, что отнимает достаточно много времени. Члены сообщества разработчиков знают, что существуют специальные инструментальные средства, которые позволяют автоматизировать и ускорить рабочий процесс. Именно таким инструментом является Grunt.
Что собой представляет Grunt?
Созданный на основе Node.js, Grunt – это инструмент для постановки задач, обладающий командной строкой, который ускоряет рабочие процессы за счет уменьшения прилагаемых усилий, необходимых для подготовки цифровых объектов. Составные части могут размещаться в пределах задачи, что позволяет выполнять их автоматическое компилирование. В принципе, вы можете использовать Grunt для выполнения большинства сложных задач, в ходе которых, как правило, вручную придется выполнять настройки и запуск.
Более ранние версии продукта шли совместно с такими плагинами, как JSHint и Uglyify, а последний релиз (версия 0.4) поддерживает большинство основных плагинов.
Какие же задачи вы можете решать? Список является довольно внушительным. Достаточно сказать, что Grunt обладает основными возможностями при работе с фрагментами кода, от уменьшения до объединения JavaScript кода. Он также может быть использован для решения различных задач, связанных с JavaScript, таких как компиляция CSS из LESS и Сасс. Мы даже использовали его с blink(1) для получения сообщений при ошибке сборки.
Почему стоит использовать Grunt?
Одно из наиболее ощутимых преимуществ Grunt, заключается в возможности организации последовательной работы команды. Если вы занимаетесь совместной работой, то должны знать, какими проблемами может сопровождаться непоследовательность в программном коде. Grunt позволяет группе разработчиков работать с единым набором команд, и таким образом гарантирует, что каждый член команды будет создавать код, придерживаясь единого стандарта. В конце концов, нет ничего более ужасного, чем неудачная сборка, вызванная маленьким несоответствием в манере написания кода командой разработчиков.
Grunt объединяет вокруг себя очень активное сообщество разработчиков, которые регулярно выпускают новые плагины. Барьер для доступа является относительно низким, поскольку уже доступен для использования широкий спектр инструментов и автоматизированных задач.
Настройка.
Первое, что нужно сделать для того, чтобы использовать Grunt – это установить Node.js (Если вы ничего не знаете о Node.js, не волнуйтесь — он должен быть установлен просто для того, чтобы Grunt имел возможность работать).
После установки Node.js, выполните следующую команду:
$ npm install -g grunt-cliДля того чтобы убедиться в правильности установки Grunt, вы можете запустить следующую команду:
$ grunt --versionСледующий шаг заключается в создании файлов package.json и gruntfile.js в корневом каталоге вашего проекта.
Создание файла package.json.
JSON файл позволяет нам отслеживать и устанавливать любые зависимости, которые образуются в процессе проектирования. В этом случае все, кто работает над проектом, будут иметь самые последние зависимости, что в конечном итоге поможет сохранить идентичность в различных средах разработки.
Создайте файл со следующим содержимым в корневом каталоге вашего проекта:
{
"name" : "SampleGrunt",
"version" : "0.1.0",
"author" : "Brandon Random",
"private" : true,
"devDependencies" : {
"grunt" : "~0.4.0"
}
}
После того как вы сделали это, выполните следующую команду:
$ npm install
Эта команда позволяет установить npm зависимости и разместить их в node_modules папке.
Создание файла gruntfile.js.
Gruntfile.js – это по существу функция, создающая оболочку и которая принимает grunt как аргумент.
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json')
});
grunt.registerTask('default', []);
};
Сейчас вы можете делать настройки работы Grunt прямо из командной строки в корневом каталоге вашего проекта. Но если вы сделаете это на данном этапе, то получите следующее предупреждение:
$ grunt
> Task "default" not found. Use --force to continue.
Данное сообщение появится потому, что мы не указали ни одного задания или зависимости. Итак, давайте сделаем это. Но сначала давайте посмотрим, как можно расширить package.json файл.
Расширение файла package.json.
Самое лучшее в работе с Node.js – это то, что он может найти подходящие пакеты обновлений и установить их, руководствуясь содержимым файла пакета. Для установки всех новых зависимостей, просто добавьте следующий код в файл:
{
"name" : "SampleGrunt",
"version" : "0.1.0",
"author" : "Mike Cunsolo",
"private" : true,
"devDependencies" : {
"grunt" : "~0.4.0",
"grunt-contrib-cssmin": "*",
"grunt-contrib-sass": "*",
"grunt-contrib-uglify": "*",
"grunt-contrib-watch": "*",
"grunt-cssc": "*",
"grunt-htmlhint": "*",
"matchdep": "*"
}
}
Как же завершить процесс? Вы уже, наверное, догадались:
$ npm installЗагрузка npm задач в Grunt.
После того, как все необходимые пакеты будут установлены, они должны быть загружены в Grunt прежде, чем мы начнем с ними работать. Мы можем загрузить все задачи автоматически с помощью одной строки кода, используя matchdep зависимость. В процессе разработки такая возможность довольно удобна, поскольку теперь список зависимостей будет находиться только в упаковочном файле.
В верхней части файла gruntfile.js, выше grunt.initConfig вставьте следующую строку:
require("matchdep").filterDev("grunt-*").forEach(grunt.loadNpmTasks);В случае отсутствия matchdep, мы должны были бы прописать grunt.loadNpmTasks("grunt-task-name"); для каждой зависимости и установить плагины.
После того, как плагины будут загружены в Grunt, мы можем начать определять подходящие опции. Прежде всего, это HTML файл (index.html), который содержит следующую разметку:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<title>Enter your first name</title>
<link rel="stylesheet" href="build/css/master.css">
</head>
<body>
<label for="firstname">Enter your first name</label>
<input id="firstname" name="firstname" type="text">
<p id="namevalidation" class="validation"></p>
<script type="text/javascript" src="build/js/base.min.js"></script>
</body>
</html>
Проверка с помощью HTMLHint.
Добавьте следующую конфигурацию в файл grunt.initConfig:
htmlhint: {
build: {
options: {
'tag-pair': true,
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'doctype-first': true,
'spec-char-escape': true,
'id-unique': true,
'head-script-disabled': true,
'style-disabled': true
},
src: ['index.html']
}
}
Данный плагин обычно настраивается следующим образом: название плагина (без префикса grunt-contrib-/grunt-), затем один или несколько целевых объектов по вашему выбору (которые могут быть использованы для создания пользовательских параметров плагина для различных файлов), объект options, а также файлы, которые он затрагивает. Теперь, когда мы запустили grunt htmlhint из терминала, он будет выполнять проверку исходного файла и позволит убедиться в том, что наш HTML код не имеет ошибок! Тем не менее, быстро вводить вручную эту команду несколько раз в час довольно утомительно.
Автоматизация задач, которые выполняются каждый раз, когда сохраняется файл.
Команда watch, используя цели, может запустить уникальный набор задач в соответствии с сохраняемым файлом. Добавьте следующую конфигурацию в файл grunt.initConfig:
watch: {
html: {
files: ['index.html'],
tasks: ['htmlhint']
}
}
Затем запустите grunt watch в терминале. Теперь, попробуйте закомментировать index.html. Вы заметите, что при сохранении файла выполняется автоматическая проверка! Такая возможность очень полезна в процессе разработки, поскольку команда watch будет выполнять скрытую проверку, по мере того, как вы будете писать код. Проверка не будет выполнена, если код не прошел релевантное тестирование (в этом случае вы не сможете определить наличие ошибки в коде).
Заметим, что grunt watch будет продолжать работать, пока терминал не будет закрыт или пока он не будет остановлен (Control + C на Mac).
СоХранение JavaScript в минимально возможном размере.
Давайте настроим файл JavaScript для проверки имени пользователя. Чтобы немного упростить поставленную задачу, мы будем выполнять проверку только для не-букве …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров