Something about Grunt on IT Life {JavaScript} 2014

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

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

3. Grunt – это

4. Grunt – это
• не минификатор 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
<target name="js-compile-all" description="Compile JavaScript files with Closure" unless="skip-js-compile">
<echo>Compiling JS files in ${input.scripts.dir} in closure...</echo>
<apply executable="java" dest="${output.scripts.dir}">
<arg value="-jar"/>
<arg path="${jar.lib.dir}/closure-compiler.jar"/>
<arg line="--js"/>
<srcfile/>
<arg line="--js_output_file"/>
<targetfile/>
<fileset dir="${output.scripts.dir}" includes="**/*.js" />
<mapper type="glob" from="*.js" to="*assets/main.min.js"/>
</apply>
<echo>Finished compiling JS files</echo>
</target>

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: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.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?

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. Спасибо за внимание!
codefo@codefo.com
http://facebook.com/codefo