use grunt, luke
DESCRIPTION
USE GRUNT, LUKE. Глеб Поспелов , Дневник.ру IT Life { JavaScript} 2014. Так что такое Grunt?. Grunt – это. Grunt – это. не минификатор JavaScript. Grunt – это. не минификатор JavaScript не синтаксический анализатор CSS. Grunt – это. не минификатор JavaScript - PowerPoint PPT PresentationTRANSCRIPT
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?
