use grunt, luke

USE GRUNT, LUKEГлеб Поспелов, Дневник.ру

IT Life {JavaScript} 2014

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

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

<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>

Вместо XML-soup чистый JavaScript

grunt.initConfig({ uglify: { main: { src: '**/*.js', dest: 'assets/main.min.js' } }});

2. Простота

Gruntfile.js

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

Gruntfile.jsmodule.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']); };

Задачи

• Все задачи имеют общую структуру (Имеют атрибуты 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?

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

codefo@codefo.comhttp://facebook.com/codefo