Приступая к работе с Grunt


Содержание

bot.kz — Новости IT

В этой статье мы рассмотрим, как можно использовать 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, выполните следующую команду:

Для того чтобы убедиться в правильности установки Grunt, вы можете запустить следующую команду:

Следующий шаг заключается в создании файлов package.json и gruntfile.js в корневом каталоге вашего проекта.

Создание файла package.json.

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

Создайте файл со следующим содержимым в корневом каталоге вашего проекта:

После того как вы сделали это, выполните следующую команду:

Эта команда позволяет установить npm зависимости и разместить их в node_modules папке.

Создание файла gruntfile.js.

Gruntfile.js – это по существу функция, создающая оболочку и которая принимает grunt как аргумент.

Сейчас вы можете делать настройки работы Grunt прямо из командной строки в корневом каталоге вашего проекта. Но если вы сделаете это на данном этапе, то получите следующее предупреждение:

Данное сообщение появится потому, что мы не указали ни одного задания или зависимости. Итак, давайте сделаем это. Но сначала давайте посмотрим, как можно расширить package.json файл.

Расширение файла package.json.

Самое лучшее в работе с Node.js – это то, что он может найти подходящие пакеты обновлений и установить их, руководствуясь содержимым файла пакета. Для установки всех новых зависимостей, просто добавьте следующий код в файл:

Как же завершить процесс? Вы уже, наверное, догадались:

Загрузка npm задач в Grunt.

После того, как все необходимые пакеты будут установлены, они должны быть загружены в Grunt прежде, чем мы начнем с ними работать. Мы можем загрузить все задачи автоматически с помощью одной строки кода, используя matchdep зависимость. В процессе разработки такая возможность довольно удобна, поскольку теперь список зависимостей будет находиться только в упаковочном файле.

В верхней части файла gruntfile.js , выше grunt.initConfig вставьте следующую строку:


В случае отсутствия matchdep , мы должны были бы прописать grunt.loadNpmTasks(«grunt-task-name»); для каждой зависимости и установить плагины.

После того, как плагины будут загружены в Grunt, мы можем начать определять подходящие опции. Прежде всего, это HTML файл ( index.html ), который содержит следующую разметку:

Проверка с помощью HTMLHint.

Добавьте следующую конфигурацию в файл grunt.initConfig :

Данный плагин обычно настраивается следующим образом: название плагина (без префикса grunt-contrib-/grunt- ), затем один или несколько целевых объектов по вашему выбору (которые могут быть использованы для создания пользовательских параметров плагина для различных файлов), объект options , а также файлы, которые он затрагивает. Теперь, когда мы запустили grunt htmlhint из терминала, он будет выполнять проверку исходного файла и позволит убедиться в том, что наш HTML код не имеет ошибок! Тем не менее, быстро вводить вручную эту команду несколько раз в час довольно утомительно.

Автоматизация задач, которые выполняются каждый раз, когда сохраняется файл.

Команда watch , используя цели, может запустить уникальный набор задач в соответствии с сохраняемым файлом. Добавьте следующую конфигурацию в файл grunt.initConfig :

Затем запустите grunt watch в терминале. Теперь, попробуйте закомментировать index.html . Вы заметите, что при сохранении файла выполняется автоматическая проверка! Такая возможность очень полезна в процессе разработки, поскольку команда watch будет выполнять скрытую проверку, по мере того, как вы будете писать код. Проверка не будет выполнена, если код не прошел релевантное тестирование (в этом случае вы не сможете определить наличие ошибки в коде).

Заметим, что grunt watch будет продолжать работать, пока терминал не будет закрыт или пока он не будет остановлен ( Control + C на Mac).

СоХранение JavaScript в минимально возможном размере.

Давайте настроим файл JavaScript для проверки имени пользователя. Чтобы немного упростить поставленную задачу, мы будем выполнять проверку только для не-букве …

Приступая к работе с Grunt

Во время процесса веб-разработки возникает много задач, которые нам требуется периодически выполнять. Это задачи вроде минимизации JavaScript и CSS-файлов, модульного тестирования, проверки файлов на наличие ошибок, компиляции препроцессорных файлов (Less, Sass) в CSS и многое другое. Grunt предназначен для запуска задач, а значит повторяющиеся задачи, с которыми мы имеем дело каждый день, становятся автоматизированы. Это лишь простой взгляд на то, как запускается и работает Grunt. Мы рассмотрим как выполнять следующие основные задачи:

  • анализ JS-файлов;
  • минимизация JS-файлов;
  • компиляция Less-файлов;
  • минимизация CSS-файлов;
  • отслеживание изменения файлов и выполнение вышеперечисленных задач.

Руководство Приступая к работе с Grunt от Криса Севилеха ориентировано на новичков и поможет вам упростить процесс разработки сайтов за счёт оптимизации типовых задач.

Отправить сообщение об ошибке
Если нашли ошибку в тексте выделите ее мышкой и нажмите сочетание клавиш Ctrl+ENTER, укажите правильный текст без ошибки.

Введение в Grunt, настройка проекта и запуск задач

GRUNT — это система автоматизации (например, минимизация и конкатенация файлов, проверка ошибок, удаление логов, отслеживание изменений проекта, компиляция SASS, LESS и т.д.).

Зачем использовать Grunt?

Экосистема Grunt огромна и растет с каждым днем. Сотня плагинов на выбор; вы можете использовать Grunt, чтобы автоматизировать практически все что угодно и с минимальными усилиями. При желании Вы можете написать и опубликовать свой плагин для Grunt. Быстрый старт (http://gruntjs.com/getting-started).

Зачем использовать task runner (таск-менеджер)?

Одно слово – автоматизация. Ваша работа уменьшится при выполнении таких задач как минификация, компиляция, тестирование и т.д. Вам будет легче делать свою работу. После того как вы настроите его через Gruntfile (http://gruntjs.com/sample-gruntfile) все вышеописанные задачи будут сделаны без каких-либо усилий с вашей стороны.

Доступные плагины GRUNT

Доступные плагины GRUNT, на которые стоит обратить внимание:

  • Плагин grunt-contrib-jshint(jshint) — проверяет js-код.
  • Плагин grunt-contrib-concat(concat) — это плагин, который соединяет файлы одного типа (css,js) в один.
  • Плагин grunt-contrib-uglify (uglify) — минификатор, используется для минимизации js-файлов.
  • Плагин grunt-contrib-cssmin (cssmin) — минификатор CSS.
  • Плагин grunt-contrib-sass (sass) — преобразуем SASS в CSS.
  • Плагин grunt-contrib-watch (watch) — отслеживание изменений в файлах.
  • Плагин grunt-contrib-imagemin (imagemin) — оптимизация изображений.
  • Плагин grunt-autoprefixer (autoprefixer) — парсит CSS и добавляет вендорные префиксы, используя данные с Can I Use.
  • grunt-express используем для Livereload https://github.com/gruntjs/grunt-contrib-cssmin
Илон Маск рекомендует:  Что такое код socket_iovec_add

Grunt и его плагины устанавливаются и управляются посредством npm (менеджера пакетов Node.js). Для справки (освежить в памяти): Gruntfile пример — sample-gruntfile, настраиваем задачи — configuring-tasks.

Устанавливаем grunt:
npm install -g grunt-cli

Это позволит находить команду grunt по системному пути и запускать из любого каталога.

Работаем с существующим проектом

  • 1. Перейдите в корневой каталог проекта
  • 2. Установите зависимости проекта с помощью npm install

  • 3. Запустить Grunt с grunt

Использование, опции, возможные задачи для Grunt можно узнать через команду
grunt –help .

Подготовка проекта

package.json: этот файл используется npm, чтобы сохранить метаданные проекта при публикации проекта как npm модуля. devDependencies (зависимости) перечисляются также в этом файле.

Gruntfile: Этот файл называется Gruntfile.js и используется, чтобы настроить или определить задачи и загрузить Grunt плагины. Когда в документации упоминается Gruntfile, речь идет о Gruntfile.js или Gruntfile.coffee.

package.json

Создать package.json можно:

  • 1. Командой npm init
  • 2. Начните с примером ниже и расширьте его, следуя спецификации

В файле package.json имеется свойство scripts , в котором можно определить скрипты. Эти скрипты помогут автоматизировать некоторые процессы. Названием свойства в объекте scripts будет название скрипта, в качестве значение укажем команду, которую мы вводили в терминале. В нашем случае транспилируем код помощи babel: «babel es2015.js -o es5.js» . Далее в терминале достаточно будет ввести команду:
npm run build
для выполнение команды babel es2015.js -o es5.js .

Установка Grunt и gruntplugins (плагинов/зависимостей)

Самый простой способ добавить Grunt и gruntplugins к существующему package.json:
npm install —save-dev .

Например, это позволит установить последнюю версию Grunt в ваш проект с добавлением его в devDependencies:
npm install grunt —save-dev

Устанавливаем модуль JSHint:
npm install grunt-contrib-jshint —save-dev

Установить все зависимости, уже перечисленные в файле package.json, можно командой
npm install .

Gruntfile

Gruntfile состоит из следующих частей:

  • Функция-обертка
  • Проект и настройка задач
  • Загрузка плагинов и задач
  • Пользовательские задачи

Пример Gruntfile

Функция-обертка

Каждый Gruntfile использует этот базовый формат; весь ваш код должен быть определен внутри этой функции:

Проект и настройка задачи

Большинство Grunt задач полагаются на данные, которые передаются как объект методу grunt.initConfig (grunt.initconfig). Пример настройки задачи uglify , настройки этой задачи задаются в одноименном свойстве.

Обратите внимание на использование данных из JSON-файла.

Загрузка плагинов и задач

Большинство задач (минификация, компиляция, тестирование, анализ кода) доступны как плагины grunt. После того как плагин указан в package.json как зависимость и установлен через npm install , его нужно подключить внутри вашего Gruntfile простой командой:

Пользовательские задачи

Вы можете настроить Grunt, чтобы запускать одну или несколько задач по умолчанию, определив задачу default . В следующем примере команда grunt запустит задачу uglify (что также равнозначно командам grunt uglify и grunt default ). Любое количество задач можно указать в массиве:

Если вашему проекту требуются задачи не предусмотренные плагином Grunt, вы можете определить свою задачу прямо внутри Gruntfile.

Приступая к работе с Grunt

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you’ve configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort.


Why use Grunt?

The Grunt ecosystem is huge and it’s growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn’t already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze. See how to get started.

Available Grunt plugins

Many of the tasks you need are already available as Grunt Plugins, and new plugins are published every day. While the plugin listing is more complete, here’s a few you may have heard of.

Here’s a preview!

While installing grunt is simple, it’s slightly more involved to get it running on your project. To see what your effort will win you, take a look at this example output from running Grunt in a sample project.

Who uses Grunt?

These are just a few companies and projects that are using Grunt. See more here.

How do I get started?

Read the Getting Started guide for instructions on using Grunt in your projects. Once you’ve done that, check out a Sample Gruntfile and learn more about Configuring Tasks.

Latest Version

  • Stable: v1.0.3 (npm)
  • Development: master (GitHub)

Latest News

Getting Started

Read the Getting Started guide for instructions on using Grunt in your projects. Once you’ve done that, check out a Sample Gruntfile and learn more about Configuring Tasks.

Немного о Grunt. Создание спрайтов с помощью Grunt

В одной из предыдущих заметок я писал об одном полезном и современном инструменте для фронтенд-разработчиков,который называется Bower. Сегодня мне бы хотелось продолжить ознакомление читателя с популярными и современными инструментами. На этот раз мой взгляд остановился на таком инструменте, как Grunt.

Grunt — это инструмент для сборки приложений на JS, который позволяет автоматизировать множество различных задач. Команды Grunt выполняются в консоли. В процессе написания статьи я пользовался консолью git-bush.

Устанавливаем Grunt

  • Запускаем консоль от имени Администратора (в Windows)
  • Устанавливаем (Grunt Comand Line Interface): $ npm install grunt-cli -g
  • Переходим в папку проекта и устанавливаем Grunt: $ cmd
    C:\> cd path\to\project
    C:\path\to\project> npm install grunt Для работы Grunt нужны 2 файла — package.json и Gruntfile.js
    • package.json можно создать вручную или с помощью команды: C:\path\to\project> npm init
    • Gruntfile.js создаем в текстовом редакторе (например, в Notepad++). Можно это сделать на основе примера с официального сайта Grunt.

Устанавливаем плагины

Устанавливаем необходимые плагины для Grunt (находясь при этом в папке проекта). Зависит от поставленных задач. Существует множество плагином для Grunt. Также можно писать свои плагины.

Например, плагины для компиляции CoffeeScript:

C:\path\to\project> npm install grunt-contrib-coffee grunt-contrib-watch grunt-contrib-uglify grunt-contrib-concat —save-dev

  • Ключ —save-dev сохраняет эти пакеты в файл package.json как модули для разработки
  • Ключ —save сохраняет эти пакеты в файл package.json как обычные модули


Работаем с Grunt

Как было сказано ранее: все задачи Grunt, а точнее их параметры, хранятся в файле Gruntfile.js. Его примерное содержание можно посмотреть на странице: http://gruntjs.com/sample-gruntfile .

Чтобы Grunt выполнил вашу задачу, ее параметры передаются в функцию grunt.initConfig() . Параметры передаются в виде JS-объекта.

Итак, давайте посмотрим, какие же задачи, можно решать с помощью Grunt. Вот небольшой список основных задач (в скобках я указал название плагинов, необходимых для определенных задач):

    Сжатие CSS-кода и объединение нескольких CSS-файлов в один (contrib-cssmin)

Создаем изображения-спрайты с помощью Grunt

Особое внимание хотелось бы обратить на такую полезную возможность Grunt, как создание спрайтов из нескольких графических файлов. Делается это с помощью плагина spritesmith

  • Создаем картинки в отдельных графических файлах
  • Добавляем в Gruntfile.js минимальный код, который требуется для создания спрайтов:
  • Запускаем команду ‘ grunt sprite ‘ и после того, как она выполнится мы получаем спрайт изображений и CSS-файл с правилами, сформированный на основе настроек:
    • src — путь к папке с файлами
    • dest — путь к папке, куда сохраняется файл со спрайтами
    • destCss — путь к папке, куда будет сохраняться CSS-файл
  • Имена классов в CSS-файле формируются на основе имен графических файлов. Например, я назвал один из файлов se1.png. В результате в CSS-файле появился класс с именем .icon-se1. Кроме обычных CSS-классов, можно работать с псевдоэлементами (например, :before или :after ). Правда для этого придется создавать свой шаблон CSS-кода и вызывать его в настройках ( cssTemplate ).

    У плагина grunt-spritesmith существует множество настроек, с которыми вы сможете ознакомиться на официальной странице плагина на GitHub.

    Например, в настройках можно указывать различные варианты расположения картинок внутри спрайта. Для этого нужно выбрать одно из возможных значений параметра algorithm: top-down, left-right, diagonal, alt-diagonal, binary-tree .

    Также существует возможность создавать спрайты для устройств с Retina-дисплеями. Замечу, что размеры изображений (ширина и высота) для дисплеев с высоким разрешением должны быть в 2 раза больше. Обычно в именах этих файлов добавляются символы «-2x» . Например, se1-2x.png . Чтобы создать спрайт для Retina-дисплеев, нужно добавить пару параметров:

    В результате запуска команды grunt sprite после добавления в файл Gruntfile.js указанных параметров, мы получим 2 варианта спрайтов: для обычных и Retina-дисплеев, а также CSS-файл с описанием классов для применения этих спрайтов в качестве фона элементов веб-страницы. Правила для Retina дисплеев в CSS-файле помещаются отдельно от обычных правил при помощи медиа-запросов (media-queries).

    Обычно, чтобы решить какую-нибудь задачу требуется ввести несколько команд по очереди. Бывает, что это нужно делать по несколько раз через определенные промежутки времени (в зависимости от изменения файлов).

    Чтобы каждый раз не вводить все команды, можно объединить их с помощью grunt.registerTask().

    Пример: grunt.registerTask(‘mytask’, [‘coffee’, ‘concat’, ‘uglify’, ‘watch’]);

    Существует возможность писать свои функции, которые будут выполнены вместе с другими командами или отдельно. Например:

    После создания функции ее можно добавить с список для выполнения:

    Если назвать задачу не mytask , а default , то она будет выполняться при вызове в консоли команды grunt без параметров.

    В заключении статьи хотелось бы упомянуть, что Grunt не единственный инструмент для автоматизации различных задач. Просто он один из самых популярных. Существует еще один известный альтернативный инструмент, который называет Gulp. Он ничем не уступает Гранту и даже по мнению некоторых веб-разработчиков выигрывает в плане быстродействия.

    Приступая к работе с Grunt

    Разрабатывайте всё в маленьких кусках CSS и JavaScript кода, чтобы вам было понятно, а дальше соберите их вместе для продакшн сайта. Сожмите ваш CSS и минифицируйте JavaScript, чтобы размеры файлов были минимальными в работающем сайте. Оптимизируйте ваши изображения для уменьшения их размера без ущерба для качества. Используйте Sass для создания CSS из-за возможности использования многочисленных полезных абстракций. Это не всеобъемлющий список действий, но некоторые из них мы должны делать. Вы можете называть их задания. Могу поспорить, что вы уже слышали о Grunt. Короче говоря, Grunt — это исполнитель заданий. Grunt может делать их за вас. После того, как вы его установили, что на самом-то деле и не особенно сложно, то он выполняет автоматически, без необходимости снова продумывать все задания. Но давайте начистоту: Grunt — это одна из новомодных штукенций, которой пользуются все крутые детишечки, но которая на первый взгляд кажется странной и недоступной. Я вас понимаю. Эта статья именно для вас.

    Давайте разберёмся со всеми вами

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

    Мне не нужно всё то, что делает Grunt

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

    Илон Маск рекомендует:  Что такое код open

    Grunt работает на Node.js — я совсем не знаю Node

    Вам не нужно знать Node. Совсем как вам не нужно знать Ruby, чтобы использовать Sass. Или PHP, чтобы использовать WordPress. Или C++, чтобы использовать Microsoft Word.

    У меня есть куча других способов сделать то, что может сделать для меня Grunt


    К вам вопрос: все они содержатся в одном месте и сконфигурированны для автозапуска по необходимости и расшарены между каждым членом команды, работающей над проектом? Ставлю на то, что навряд ли это так.

    Grunt это командная строка — а я же просто дизайнер

    Ну, я тоже дизайнер. Я предпочитаю нативные приложения с графическим интерфейсом, всегда когда только можно. Но я не думаю, что это нужно для Grunt.

    Максимум, когда нужно использовать командную строку:

    Перейти в директорию проекта. Напечатать grunt и нажать Enter. После установка, что опять же не очень сложно.

    Ну ладно. Давайте уже поставим этот GRUNT

    Условием для работы Grunt является предустановленная Node. Если Node у вас не установлена, то не волнуйтесь — это очень просто сделать. Вам просто нужно скачать установщик и запустить его — официальный сайт Node.

    Ставить Grunt нужно для каждого проекта. Перейдите в папку проекта. Нужно создать файл с названием package.json в корне:

    Со следующим содержимым:

    Можете спокойно менять название проекта и версию, но все devDependencies вещи должны оставаться такие как сейчас.

    Это то, как Node работает с зависимостями. У Node есть менеджер пакетов, который называется NPM (Node packaged modules) для управления Node зависимостями (например, как gem для Ruby, если вам такое знакомо). Вы даже можете думать об этом как о плагине для WordPress.

    После создания package.json в корне, перейдите в терминал и пройдите в вашу папку. Терминальные ламеры как я, например, делают это так:

    И дальше запустил команду:

    После запуска этой команды, появится новая папка в вашем проекте с названием node_modules.

    Другие файлы, что вы видите, README.md и LICENSE здесь потому что я собираюсь положить этот проект на GitHub и это стандарт в таких случаях.

    Последний шаг в инсталяции — это установить Grunt CLI (command line interface — интерфейс командной строки). Это то, что даёт возможность запускать grunt команды из строки. Без этого, любые grunt команды просто вызовут ошибку «Command Not Found». Эта отдельная установка нужна для эфективности. Иначе бы у вас было 10 проектов с 10 копиями Grunt CLI.

    Дальше запустите следующую команду в терминале:

    Дальше закройте и откройте терминал. Это один из способов проверить правильно ли всё работает. Схоже с перезапуском компьютера в старые добрые времена, как при установке какой-либо программы.

    Давайте соединим с помощью GRUNT некоторые файлы

    Допустим в нашем проекте есть три отдельных JavaScript файла:

    • jquery.js — используемая нами библиотека.
    • carousel.js — jQuery плагин.
    • global.js — Пользовательский JavaScript файл, где мы всё конфигурируем и вызываем наш плагин.

    В продакшене, мы могли бы объединить все эти файлы вместе из соображений производительности (один запрос лучше, чем три). Там нужно скомандовать Grunt сделать это.

    Но постойте. Grunt вообще-то не делает всё сам по себе. Это исполнитель задач. Задачи естественно нужно ещё добавить. Мы ещё не настраивали Grunt для какой-то работы, поэтому давайте сделаем это.

    Официальный Grunt плагин для объединения файлов — это grunt-contrib-concat. Вы можете прочитать о нём на Гитхабе, но для работы всё что нужно — это запустить следующую команду из строки (естественно в корне вашего проекта):

    Толково будет сделать это следующим образом: ваш package.json файл будет автообновится, чтобы включить эту новую зависимость. Откройте и проверьте файл. Вы увидите новую строку:

    Теперь можна использовать это. Нам нужно сконфигурировать Grunt и задать ему задачу.

    Вы сообщаете Grunt, что делать через конфигурационный файл с названием Gruntfile.js2

    Совсем как наш package.json файл, наш Gruntfile.js имеет специальный формат, который должен соблюдаться. Не важно что там значит каждое слово — просто взгляните на пример использования:

    Теперь нам нужно создать эту конфигурацию. Документация может быть просто огромной. Давайте сосредоточимся на очень простом примере.

    Как вы помните, у нас 3 JavaScript файла, которые нужно объединить. Укажим к ним пути в виде массива в src разделе (указываем пути в кавычках) и далее укажем результирующий файл в разделе dest. Наш результирующий файл может пока что не существовать. Он будет создан при запуске этой задачи и объединит все файлы.

    Оба наших файла jquery.js и carousel.js — это библиотеки. Скорее всего мы не будем их трогать. Поэтому для порядка, будем держать их в папке /js/libs/. Наш global.js файл — это место, где мы пишем наш код, поэтому он будет прямо в /js/ папке. Теперь давайте сообщим Grunt найти все эти файлы и объединить их вместе в один файл с названием production.js.

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


    С этой конфигурацией для объединения, перейдите в терминал и запустите команду:

    Смотрите что произойдёт! Будет создан файл production.js и произойдёт объединение наших 3х файлов. Это был огого момент для меня! Почувствуйте колебание силы. Давайте ещё сделаем пару штукенций!

    Минификация JAVASCRIPT с помощью GRUNT

    Мы сделали столько подготовительной работы, добавили новые задания для лёгкого запуска Grunt. Всё, что нам нужно:

    Найти Grunt плагин, который будет делать что нам нужно:

    • Изучить конфигурирование этого плагина
    • Написать рабочую конфигурацию для нашего проекта

    Официальный плагин для минификации кода — это grunt-contrib-uglify. Прямо как мы делали недавно, давайте запустим NPM команду для его установки:

    Далее внесём изменения в наш Gruntfile.js для загрузки плагина:

    Далее сконфигурируем его:

    Изменим это дефолтное задание для запуска минификации:

    Правда очень похоже на установки объединения файлов?

    Запустим grunt в терминале и на выходе получим чудестый минифицированный JavaScript:

    Этот production.min.js файл мы будем использовать в нашем index.html файле.

    Оптимизируем изображения с помощью Grunt

    Давайте перейдём дальше. Официальный плагин для минификации изображений — это grunt-contrib-imagemin. Установите его:

    Зарегистрируйте его в Gruntfile.js:

    Убедитесь, что он запущен:

    Запустите grunt и посмотрите как осуществляется чудестное сжатие изображений:

    Нравится мне всё это дело.

    Автоматизация всего процесса

    До этого момента мы делали очень полезные вещи, но есть пара моментов, которые сделают нас умнее и сделают некоторые вещи понятнее, в том числе Grunt:

    • Запускайте эти задания автоматически, когда их нужно запустить
    • Запускайте только те задания, которые нужно запускать в данный момент
    • Объединяйте и минифицируйте JavaScript, когда JavaScript изменяется
    • Оптимизируйте изображения, когда новое изображения добавлено или какие-то изменены

    Мы можем сделать это наблюдая за файлами. Мы можем сообщить Grunt смотреть на изменения в определённых местах и, когда там происходят изменения, запускать определённые задания. Наблюдение осуществляется через официальный плагин grunt-contrib-watch.

    Установите его сами. Это делается аналогично тому, как мы делали раньше. Мы сконфигурируем его указав определённые файлы (или папки, или оба варианта) для наблюдения. Под наблюдением, я имею в виду мониторинг, удаление или добавление файлов. Далее мы указываем ему какие задачи нужно выполнить при обнаружении изменений.

    Мы хотим запустить наше объединение и минификацию при обнаружении любых изменений в папке /js/. Когда это происходит, мы должны запустить задачи связанные с JavaScript. А когда эти вещи происходят где-то в другом месте, то не нужно запускать JavaScript-заданий, таким образом:

    Всё пока вроде просто, правда? Одной непонятной штукой может показаться spawn. И знаете что? Я и сам не знаю что это. Из всего, что написано в документациии — я понял что это дефолтное значение. Такая вселенная разработки. Просто оставьте как есть и будет всё ок, либо же почитайте доки.

    Внимание: Иногда очень разочаровывает, когда вроде всё понятно в уроке, а на практике ничего не полчается. Если вы не можете заставить Grunt запуститься после изменений, то скорее всего вы допустили ошибку в вашем Gruntfile.js файле. Это может выглядеть следующим образом в терминале:

    Обычно Grunt сам отлично сообщает о том, что случилось, просто смотрите сообщения об ошибке. В этом случае, синтаксическая ошибка в виде пропущенной запятой выдавало ошибку. Я добавил запятую и всё запустилось удачно.

    Добавим GRUNT к нашей предобработке

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


    Что прикольное в Sass — это то, что он может делать объединение и минификацию самостоятельно. Поэтому для нашего маленького проекта мы можем компилировать наш global.scss:

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

    Давайте это сделаем. Теперь каждый раз мы меняем любой из наших Sass файлов, то CSS будет автоматически обновлятся.

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

    LiveReload очень просто установить поскольку он уже встроен в наш плагин наблюдения. Всё что нужно сделать это:

    Установите плагин для браузера. Добавьте сверху конфигурации наблюдения:

    Перезапустите браузер и нажмите на LiveReload иконку для активации. Обновите Sass файл и наблюдайте как страница автоматически изменится. Live reloading browser Live reloading browser Круто!

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

    Если вы любите учится по видео, то я сделал видеоурок для этой статьи, который опубликовал в статье CSS-Tricks: First Moments with Grunt

    Поднятие уровня

    Как вы уже можете представить, существует много уровней, на которые вы можете поднятся в вашем процессе разработки. Это однозначно может случится на вашей работе на полную ставку в какой-то организации.

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

    Вы можете поднять свой уровень добавив ещё пару полезных задач:

    Запускать ваш CSS через Autoprefixer (5+ я советую) вместо препроцессорных дополнений. Писать и запускать JavaScript юнит тестов (например: Jasmine). Строить ваши спрайты изображений и SVG иконки автоматически, (пример: Grunticon). Запускать сервер, чтобы вы могли связать объекты с определённым файловым путём и использовать сервисы, которые требуют настоящий URL такие как TypeKit и другие, а также убрать необходимость использования других инструментов для этого, таких как MAMP. Устранять проблемы с кодом с помощью HTML-Inspector, CSS Lint или JS Hint. Вставлять новый CSS автоматически в браузер, каждый раз при изменении в стилях. Помогать вам коммитить или пушить в систему контроля версий, такой как GitHub. Добавлять номер версий к вашим объектам (переполнения кеша). Помогать вам размещать на тестовой и производственной среде (например: DPLOY). Вы можете поднять свой уровень, просто поняв как сам по себе работает Grunt:

    Илон Маск рекомендует:  Глава 10 клавиатура

    Читайте Grunt Boilerplate автор Mark McDonnell. Читайте Grunt Tips and Tricks автор Nicolas Bevacqua. Организуйте ваш Gruntfile.js просто разделив его на несколько маленьких файлов. Просмотрите Gruntfile.js файлы других проектов и людей. Изучайте больше по Grunt копаясь в исходниках и изучая его API.

    Давайте делится впечатлениями

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

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

    Приступая к работе с Grunt

    Grunt-плагин для сборки definer-модулей

    Приступая к работе

    Для работы этого плагина требуется Grunt

    Если вы не использовали Grunt раньше, то можете ознакомиться с вступительной инструкцией, в которой объясняется, как добавить Gruntfile в проект.

    Установить этот плагин можно следующей командой:

    После установки, можно будет подключить плагин в вашем Gruntfile:

    Для запуска сборки definer-модулей, достаточно выполнить команду: grunt definer .

    Сборка осуществляется с помощью Definer.

    Опция указывает путь до файла, в который будет сохранён результат.

    Тип: String String[]

    Опция указывает откуда следует начать искать модули в файловой системе. Поиск модулей выполняется рекурсивно по всем вложенным директориям.

    По умолчанию definer ищет модули в текущей директории.

    По умолчанию: js

    Опция задаёт постфикс файлов, в которых будет производиться поиск модулей.


    Тип: String Boolean

    По умолчанию: false

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

    По умолчанию собираются все найденные модули.

    Тип: String String[] Boolean

    По умолчанию: false

    Опция позволяет перечислить имена модулей, для которых предполагается запуск istanbul. Для всех остальных модулей будет добавлен комментарий, исключающий их из оценки покрытия тестами.

    По умолчанию комментарии не добавляются, поскольку запуск оценки покрытия тестами не предполагается.

    Опция настраивает вывод информации о сборке.

    Информация делится на типы:

    1. log — информация о процессе сборки (синим цветом)
    2. info — сообщение о результате сборки (зелёным)
    3. warn — предупреждения (жёлтым)
    4. error — ошибки (красным)

    По умолчанию выводятся все типы информации.

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

    Опция формирует JSDoc, содержащий информацию о собранном файле.

    Сборка всех модулей

    Будут получены все модули из директории modules/ и сохранены в файл all.js .

    Сборка всех модулей и внешних скриптов

    Кроме модулей, в файл all.js будет сохранён jQuery с его плагинами и Underscore.

    Сборка конкретного модуля

    Будут получены модули из файлов *.module.js , которые лежат в директориях modules/ и modules2/ . Из них будут отобраны модули, необходимые для работы модуля d и сохранены в файл d.js .

    Сборка с формированием JSDoc

    В собранный файл будет добавлен JSDoc.

    Тегу version установится значение одноимённого поля из файла package.json .

    Тег date будет указывать на текущую дату.

    Сборка с настройкой выводящейся информации

    Следующий пример будет выводить только предупреждения и ошибки.

    Grunt js — установка и настройка

    Grunt js — незаменимый инструмент любого font-end разработчика. Он поможет автоматизировать основные задачи сборки проекта:

    • сжатие CSS файлов
    • сжатие Javascript
    • сжатие HTML
    • расстановка вендорных (браузерных) префиксов (autoprefixer)
    • компиляция Sass (grunt sass)
    • компиляция Less (grunt less)
    • и многое другое

    Для установки на Windows и работы Grunt js вам потребуется установить Node.js и npm.
    Установим интерфейс командной строки. Для этого надо открыть консоль (Пуск — Выполнить — cmd) и запустить команду:

    Флаг — g указывает, что Grunt установится глобально и команду grunt можно будет запустить из любой директории.

    Настройка package.json


    package . json — файл с настройками nodejs, в которым мы пропишем модули, нужные для работы.
    Зайдите в папку с проектом и в корне создайте файл package . json . Пример заполнения файла:

    Приступая к работе с Grunt

    You are using an outdated browser. Please upgrade your browser.

    By signing up, you agree to our Terms of Service and Privacy Policy.

    Grunt и Gulp – популярные сборщики файлов, которыми пользуются много разработчиков. Рассмотрим особенности и возможности каждого из них.

    GruntJS – написан на JavaScript, использует Node.js и поддерживается разными платформами. Официальная страница – gruntjs.com . ПО имеет плагины для: уменьшение JavaScript и CSS, интеграции предварительных процессоров для CSS и JavaScript таких, как Sass/Compass, Less and Stylus, CoffeeScript или LiveScript Сасс / Compass, оптимизации размеров файлов изображения PNG и JPEG и автоматического встраивания изображений, и много другого полезного для Вашей работы. С помощью Grunt Вы сможете создать свой качественный продукт. На официальном сайте можно найти ссылки на все возможные плагины и начать ими пользоваться. Кроме того, данный продукт станет незаменимым помощником при написании больших веб-приложений. В чем же его особенности: программа интегрирует оптимизации для Require.js и Google Closure Compiler, позволяет предварительной компиляции шаблонов Handlebars, Jade, Underscore, Mustache, Eco или Hogan. В наличии плагины для популярных каркасов для тестирования – Jasmine, Mocha, QUnit и Cucumber.

    Как видим, преимуществ достаточно. Перейдем к подготовке работы с Grunt . Прежде нужно установить nodejs, файлы установки можно найти на официальном сайте. Далее создаем в папке с проектом два файла package.json и Grunfile.js, делаем их настройку. Создаем папку под проект, или заходим в уже существующую с помощью консоли, и выполняем команду npm install , для того что бы установить Grunt, и все нужные пакеты (которые описываем предварительно в package.json). Для запуска Grunt, запускаем команду grunt в консоли. Установка завершена!

    GruntJS – гибкий и полезный инструмент для автоматизации процесса повторяющихся заданий.

    Gulp – еще один сборщик проектов, который ускоряет разработку, автоматизируя запуск задач. Имеет большое количество плагинов. А также позволяет управлять файлами javascript и настраивать запуск задач другими задачами.

    Gulp.js использует код вместо конфигураций. Это делает его более простым в управлении. Для быстроты работы используется stream. Отличается от Grunt тем, что вместо создания input/output для каждого плагина Gulp передаёт исходные файлы через все установленные плагины, чтобы затем создать выходной файл.

    Для начала установки Вам необходимо установить прежде всего Node.JS и npm. Потом создаем директорию проекта, структуру каталогов и установливаем Gulp и все необходимые плагины. Для совершения данных действий в сети существует масса подробных инструкций.

    Таск-менеджер Gulp.js создан в качестве достойной альтернативы популярному GruntJS.

    Ознакомимся с основными различиями между GruntJS и Gulp.js.

    Gulp основан на принципе потоковой передачи данных, которая дает намного больше контроля над тем, что происходит и также избавляет от промежуточных папок и файлов. Вы передаете файл в gulp,потом лишь сохраняете результат в другой файл. Данная схема проста и понятна в использовании.

    В сборщики Gulp так как он более новый, разработчики сделали все, чтобы не повторить в нем недостатки Grunt. Прежде всего, не нужно использовать плагин watch, функция реагирования на изменения в файлах уже есть в ядре. Используется простой и понятный JavaScript-код, а в Grunt конфигурационные файлы напоминают объект JSON. Ну и в Grunt задачи работают с файлами вместо потоков данных, а в Gulp, как уже писалось выше, работа основана на потоковой передачи данных, что намного удобней.

    Более старый Grunt имеет больше плагинов чем Gulp, но это связано с тем, что Gulp менее зрелый проект. Плагины Grunt для оптимизации работы (имееются также в Gulp): grunt-contrib-watch, grunt-contrib-jshint, grunt-mocha, grunt-notify, grunt-contrib-uglify . Для Gulp есть специальный плагин gulp-grunt , который дает возможность запускать файлы Grunt.

    Что выбрать Gulp или Grunt? Выбор стоит делать исходя из своих потребностей. Grunt – легкий и зрелый продукт, Gulp – гибкий и акутальный, так как появился сравнительно недавно. Учитывайте все преимущества и недостакти каждого, и в любом случае независимо от выбора, любое из этих ПО поможет качественно автоматизировать процесс Вашей работы.

    Stepan Suvorov Blog

    Release 2.0

    Сборка javascript проектов с помощью Grunt

    Grunt – инструмент для сборки JavaScript проектов из командной строки. Молодой (зарелизился в январе 2012) и активно развивающийся(на данный момент для него написано уже 188 плагинов).

    Благодаря тому, что grunt имеет готовый npm-пакет для node.js, установка очень простая:

    Ставим grunt глобально, после чего нам доступна команда из консоли:

    Далее необходимо инициализировать проект, для этого у нас есть команда grunt init:TEMPLATE, где TEMPLATE – один из шаблонов:

    • commonjs
    • jquery
    • node
    • gruntfile – только главный файл
    • gruntplugin

    Перейдем в директорию где мы хотим создать grunt проект и выполним:

    после чего должно выдать серию вопросов о проекте(title, description, git-url…). После успешного прохождения этого квеста в выбранной директории появятся файлы сборщика.

    Установим также PhantomJs, наличие которого предполагает grunt.

    После чего можем смело запускать сборщик на выполнение:

    – вот так вот он работает: проверил код(JSHint), запустил тесты(QUnit), соединил и сжал файлы.

    Чтобы рассмотреть инструкции по конфигурированию сборщика, проинициализируем новый проект:

    Он создаст только заготовку для главного файла(grunt.js). Откроем ее и посмотрим что внутри.

    Начнем разбор с конца файла:

    Эта строчка говорит grunt какие задачи будут выполнены по умолчанию(т.е. запустив команду без параметров). Тут мы можем добавить свои варианты:

    Возможные варианты заданий:

    • concat – конкатенация файлов
    • init – Generate project scaffolding from a predefined template.
    • lint – валидация файлов с помощью JSHint.
    • min – сжатие файлов с UglifyJS.
    • qunit – Запуск QUnit юнит тестов на PhantomJS.
    • server – запускает статический веб сервер.
    • test – запуск юнит тестов на nodeunit.
    • watch – запуск заранее определенных заданий, для файлов из списка.

    Ну а теперь последовательно по секциям конфига(по сути конфигурация для каждого задания):

    Для каждой опции, где мы указываем список файлов существуют 2 подсекции: files и src. По умолчанию задание выполняется с командой files, но если мы хоти выполнить со списком файлов src, тогда стоит уточнить:

    Если встроенных заданий не хватает, можно писать свои и мотом подключать их с помощью методов:

    – второй вариант для дополнительных задач установленных через npm. Вот хорошая страничка, на которой перечислены самые распространенные варианты. Попробуем поставить requirejs:

    и подключим в файл конфигурации:

    Внимание! тут есть специфика: модули установленные через npm будут подхватываться только если установлены в директорию c grunt. Подробно проблема описана вот тут.

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL