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

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

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

3 Grunt – это

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

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

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

7 Grunt – это JavaScript Task Runner

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

9 1. JavaScript

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

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

12 Устанавливается как обычный 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" }

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

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

15 2. Простота

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

17 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']); };

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

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

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

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

22 Создать собственный плагин не намного труднее 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

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

24

25

26

27

28

29

30

31

32

33 Grunt в Дневнике

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

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

36 Предыстория

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

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

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

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

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

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

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

44 Any questions?

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