Как использовать Grunt для автоматизации вашего рабочего процесса [Учебники]
Я огромный сторонник автоматизации потому что это делает жизнь намного проще. Зачем тратить время на простые, монотонные задачи, которые высасывают жизненную силу, когда у вас есть компьютер, который делает что-то для вас? Это особенно актуально для веб-разработки.
Многие задачи разработки могут быть рутиной. При разработке вы можете скомпилировать код, при развертывании версии разработки вы можете объединять и минимизировать файлы, удалять только ресурсы для разработки и так далее. Даже относительно простые, такие как удаление файлов или переименование папок может занять большую часть нашего времени.
В этой статье я покажу вам, как вы можете сделать свою жизнь проще, используя отличные функциональные возможности, предоставляемые Grunt, Javascript Runner. Я проведу вас через весь процесс, поэтому не беспокойтесь, даже если вы не волшебник Javascript!
Больше на Hongkiat.com:
- CSSMatic делает CSS легким для веб-дизайнеров
- Автоматизация задач в Mac с помощью действий с папками
- Автоматизируйте ваши файлы Dropbox с помощью действий
- 10 приложений для автоматизации задач на вашем Android-устройстве
- Как (автоматически) сделать резервную копию вашего сайта в Dropbox
Установка Grunt
Установить Grunt довольно просто, потому что он использует менеджер пакетов узлов. Это означает, что вам также может понадобиться установить сам нод. Откройте терминал или командную строку (с этого момента я буду называть этот терминал) и введите NMP-V.
Если вы видите номер версии у вас есть НПМ установлен, если вы видите ошибку «команда не найдена», вам нужно будет установить ее, перейдя на страницу загрузки узла и выбрав нужную версию.
Как только Node установлен, получение Grunt зависит от одной команды, выполняемой в терминале:
npm install -g grunt-cli
Основное использование
Вы будете использовать Grunt на индивидуальной основе, поскольку у каждого проекта будут свои требования. Давайте начнем проект сейчас, создав папку и перейдя к ней через наш терминал..
Два файла составляют сердце Grunt: package.json а также Gruntfile.js. Файл пакета определяет все сторонние зависимости, которые будет использовать ваша автоматизация, Gruntfile позволяет вам контролировать как именно они используются. Давайте теперь создадим файл пакета «голыми руками» со следующим содержимым:
"name": "test-project", "version": "1.0", "devDependencies": "grunt": "~ 0.4.5",
Название и версия зависит от вас, зависимости должны содержать все пакеты, которые вы используете. Мы ничего не делаем в данный момент, поэтому мы просто убедимся, что сам Grunt добавлен как зависимость.
Вы можете спросить себя, что там делает эта волнистая линия (~) под названием тильда.
Версии могут потребоваться с использованием правил семантического версионера для npm. В двух словах:
- Вы указываете точную версию как
4.5.2 - Вы можете использовать больше или меньше чем для указания минимальной или максимальной версии, такой как
> 4.0.3 - Использование тильды определяет блок версии. С помощью
~ 1,2считается1.2.x, любая версия выше 1.2.0, но ниже 1.3
Доступно намного больше способов указания версий, но этого достаточно для большинства потребностей. Следующим шагом является создание Gruntfile, который будет выполнять нашу автоматизацию.
module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ; Это в основном скелет для Gruntfile; Есть две достопримечательности. Одно место находится внутри initConfig () функция. Это где все настройки вашего проекта. Это будет включать в себя такие вещи, как обработка компиляции LESS / SASS, минимизация скриптов и т. Д..
Второе место находится ниже той функции, где вы указываете задачи. Вы можете увидеть одну задачу с именем “дефолт”. В данный момент он пуст, поэтому ничего не делает, но об этом мы поговорим позже.. Задачи, по сути, ставят в очередь кусочки и кусочки из конфигурации нашего проекта и выполняют их.
Например, задача с именем “скрипты” может объединить все наши сценарии, затем свернуть полученный файл и затем переместить его в его окончательное местоположение. Эти три действия все определены в конфигурации проекта, но “собрал” по заданию. Если это не ясно, просто не волнуйтесь, я покажу вам, как это сделать.
Наша первая задача
Давайте создадим задачу, которая минимизирует один файл JavaScript для нас.
В любое время, когда мы хотим добавить новую задачу, нам нужно сделать четыре вещи:
- Установите плагин при необходимости
- Требовать это в Gruntfile
- Написать задание
- Добавьте его в группу задач, если это необходимо
(1) Найти и установить плагин
Самый простой способ найти нужный плагин - напечатать что-то вроде этого в Google: “минимизировать плагин Grunt JavaScript”. Первый результат должен привести вас к плагину grunt-contrib-uglify, который нам нужен.
Страница Github расскажет вам все, что вам нужно знать. Установка - это одна строка в терминале, вот что вам нужно использовать:
npm install grunt-contrib-uglify --save-dev
Возможно, вам придется запустить это с правами администратора. Если вы получите что-то вроде нпм ERR! Пожалуйста, попробуйте снова запустить эту команду от имени root / Administrator.. по пути просто введите sudo перед командой и введите свой пароль при появлении запроса:
sudo npm install grunt-contrib-uglify --save-dev
Эта команда фактически анализирует ваши package.json файл и добавляет его в качестве зависимости, вам не нужно делать это вручную.
(2) Требовать в Gruntfile
Следующий шаг - добавить ваш Gruntfile в качестве требования. Я хотел бы добавить плагины вверху файла, вот мой полный Gruntfile после добавления grunt.loadNpmTasks ( 'Грунт-вно-уродовать');.
module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json')); grunt.registerTask ('default', []); ; (3) Создать задачу для минимизации скриптов
Как мы уже говорили, это должно быть сделано в рамках initConfig () функция. Страница Github для плагина (и большинства других плагинов) дает вам много информации и примеров. Вот что я использовал в своем тестовом проекте.
uglify: build: src: 'js / scripts.js', dest: 'js / scripts.min.js'
Это довольно просто, я указал scripts.js файл в каталоге js моего проекта и место назначения для уменьшенного файла. Есть много способов указать исходные файлы, мы рассмотрим это позже.
А теперь давайте посмотрим на полный Gruntfile после того, как он был добавлен, чтобы убедиться, что вы знаете, как все сочетается.
module.exports = function (grunt) grunt.loadNpmTasks ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('package.json'), uglify: build: src: 'scripts.js', dest: 'scripts.min.js'); grunt.registerTask ('default', []); ; (4) Добавить эту конфигурацию в группу задач
Прямо сейчас вы можете пойти в свой терминал и набрать хрюкать но нам понадобятся группы задач для запуска нескольких задач позже. У нас задание по умолчанию пустое, просто ждем, когда что-то будет добавлено, поэтому давайте изменим его следующим образом:
grunt.registerTask ('default', ['uglify']); На этом этапе вы должны быть в состоянии пойти в терминал, введите хрюкать и увидеть минификацию. Не забудьте создать scripts.js файл конечно!
Это не заняло много времени, не так ли? Даже если вы новичок во всем этом, и вам потребовалось некоторое время для прохождения этапов, сэкономленное время превзойдет время, потраченное на него в течение нескольких использований..
Объединение файлов
Давайте посмотрим на объединение файлов и Узнайте, как указать несколько файлов в качестве цели по пути.
Конкатенация - это процесс объединения содержимого нескольких файлов в один файл. Нам понадобится плагин grunt-contrib-concat. Давайте работать через шаги:
Для установки плагина используйте npm install grunt-contrib-concat --save-dev в терминале. После этого обязательно добавьте его в свой Gruntfile, как и перед использованием. grunt.loadNpmTasks ( 'Грунт-вно-CONCAT');.
Далее идет конфигурация. Давайте объединим три конкретных файла, синтаксис будет знаком.
concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], dest: 'js / scripts.js', ,,
Приведенный выше код берет три файла, указанные в качестве источника, и объединяет их в файл, указанный в качестве места назначения..
Это уже довольно мощно, но что, если новый файл добавлен? Нужно ли нам возвращаться сюда все время? Конечно, нет, мы можем указать целую папку файлов для объединения.
concat: dist: src: 'dev / js / *. js "], dest:' js / scripts.js ',,,
Теперь любой файл javascript в папке dev / js будет объединен в один большой файл: JS / scripts.js, намного лучше!
Теперь пришло время создать задачу, чтобы мы могли объединить некоторые файлы..
grunt.registerTask ('mergejs', ['concat']); Это больше не задание по умолчанию, поэтому нам нужно будет ввести его имя в терминале, когда мы выдадим хрюкать команда.
хрюкать Mergejs
Автоматизация нашей автоматизации
Мы уже добились большого прогресса, но это еще не все! На данный момент, когда вы хотите объединить или минимизировать, вам нужно пойти в терминал и набрать соответствующую команду. Давно пора взглянуть на часы Команда, которая сделает это за нас. Также мы узнаем, как выполнять несколько задач одновременно.
Чтобы начать, нам нужно взять grunt-contrib-watch. Я уверен, что вы можете установить его и добавить его в Gruntfile самостоятельно, поэтому я начну с того, что покажу вам, что я использую в своем тестовом проекте..
watch: scripts: files: ['dev / js / *. js'], задачи: ['concat', 'uglify'],,
Я назвал набор файлов для просмотра “скрипты”, Просто я знаю, что он делает. В этом объекте я указал файлы для просмотра и задачи для запуска. В предыдущем примере объединения мы собрали все файлы в каталоге dev / js..
В примере минификации мы минимизировали этот файл. Имеет смысл следить за изменениями в папке dev / js и запускать эти задачи, когда есть какие-либо.
Как видите, несколько задач можно легко вызывать, разделяя их запятыми. В этом случае они будут выполняться последовательно, сначала конкатенация, затем минификация. Это также можно сделать с помощью целевых групп, поэтому они существуют..
Теперь мы можем изменить нашу задачу по умолчанию:
grunt.registerTask ('default', ['concat', 'uglify']); Теперь у нас есть два варианта. Всякий раз, когда вы хотите объединить и минимизировать ваши скрипты, вы можете переключиться на терминал и набрать хрюкать. Вы также можете использовать команду watch, чтобы начать просмотр ваших файлов: хрюкать часы.
Он будет сидеть там, ожидая, пока вы измените эти файлы. Как только вы это сделаете, он выполнит все порученные ему задачи, попробуйте, попробуйте.
Это намного лучше, никакой информации от нас не требуется. Теперь вы можете работать с вашими файлами, и все будет хорошо сделано для вас.
обзор
Обладая этими элементарными знаниями о том, как можно устанавливать и использовать плагины и как работает команда watch, вы все готовы сами стать наркоманом автоматизации. Grunt - это гораздо больше, чем мы обсуждали, но ничего, с чем бы вы не справились самостоятельно.
Использование команд для компиляции SASS, оптимизации изображений, автофиксации и многого другого - это всего лишь вопрос следования шагам, которые мы обсуждали, и чтения синтаксиса, который требует плагин.
Если вам известны некоторые особенно полезные варианты использования Grunt, сообщите нам об этом в комментариях. Нам всегда интересно узнать, как вы используете такие инструменты, как Grunt.!
