USE GRUNT, LUKE Глеб Поспелов, Дневник.ру IT Life {JavaScript} 2014

Так что такое Grunt?

Grunt – это

не минификатор JavaScript

Grunt – это не минификатор JavaScript не синтаксический анализатор CSS

Grunt – это не минификатор JavaScript не синтаксический анализатор CSS не сборщик Jade

Grunt – это JavaScript Task Runner

В чем преимущества Grunt?

1. JavaScript

Все, что нужно для начала использования:

Устанавливается как обычный npm package Либо через консоль codefo:~ codefo$ npm install grunt grunt-cli --save-dev

Устанавливается как обычный npm package Либо через консоль codefo:~ codefo$ npm install grunt grunt-cli --save-dev Либо через package.json { "name": "your-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.4", "grunt-cli": "~0.1.13" }

Вместо XML-soup чистый JavaScript Compiling JS files in ${input.scripts.dir} in closure... Finished compiling JS files

Вместо XML-soup чистый JavaScript grunt.initConfig({ uglify: { main: { src: '**/*.js', dest: 'assets/main.min.js' } });

2. Простота

Gruntfile.js Внутри себя он содержит: Функцию-обертку Конфигурацию проекта и задач Загрузку плагинов Custom tasks

Gruntfile.js module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { options: { banner: '/*! */\n' }, build: { src: 'src/.js', dest: 'build/.min.js' } }); // Load the plugin that provides the "uglify" task. grunt.loadNpmTasks('grunt-contrib-uglify'); // Default task(s). grunt.registerTask('default', ['uglify']); };

Задачи Все задачи имеют общую структуру (Имеют атрибуты options, src, dest) В задачах могут быть цели (подзадачи) В качестве значения атрибутов src и dest можно указывать как отдельные имена файлов, так списки имен, пользуясь при этом шаблонами Задачи можно объединять с другими задачами

3. Расширяемость

Plugins Grunt всего лишь предоставляет простое API для запуска и остановки задач, все существенные действия реализуются с помощью плагинов. На момент подготовки презентации в npm registy было более 2500 плагинов для Grunt Более 25 из них поддерживаются командой разработчиков.

Написать свою задачу до безобразия просто grunt.registerTask('custom', 'My "custom" task description.', function() { grunt.log.writeln('Currently running the "custom" task.'); });

Создать собственный плагин не намного труднее codefo:~ codefo$ npm install -g grunt-init codefo:~ codefo$ git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin codefo:~ codefo$ grunt-init gruntplugin

Кто уже использует Grunt?

Grunt в Дневнике

Предыстория Нам необходима была система для сборки и минификации JavaScript и CSS

Предыстория Мы пробовали использовать WebOptimization Framework, Google Closure Compiler, YUI Compressor и даже…

Предыстория

Основным недостатком была необходимость использования дополнительного ПО и лишние «телодвижения» со стороны разработчика

Предыстория Плюс в будущем хотелось иметь возможность перейти на модульную архитектуру и покрыть часть кода тестами, не изменяя при этом систему сборки

Как теперь все работает Сейчас мы используем 11 плагинов (clean, copy, concat, csshint, jshint, cssjoin, requirejs, cssmin, uglify, qunit, hash) У нас зарегистрировано две задачи: check и deploy Установлен собственный npm репозиторий Запуск проверки кода на TeamCity после каждого изменения в VCS

Problems? Grunt плохо дружит с потоками ввода\вывода Windows Очень редко, но случаются какие-то затыки при скачивании пакетов с локального npm репозитория Gruntfile стал слишком большой

А что на счет Gulp?

Отличия и недостаки: Gulp – это потоковая система сборки Относительно небольшой возраст (разработка началась в июле 2013 года) Меньше комьюнити, а следовательно, меньше плагинов и поддержки

Преимущества: Императивный подход Время работы Node.js-way

Any questions?

Спасибо за внимание!