1 / 45

USE GRUNT, LUKE

USE GRUNT, LUKE. Глеб Поспелов , Дневник.ру IT Life { JavaScript} 2014. Так что такое Grunt?. Grunt – это. Grunt – это. не минификатор JavaScript. Grunt – это. не минификатор JavaScript не синтаксический анализатор CSS. Grunt – это. не минификатор JavaScript

nerina
Download Presentation

USE GRUNT, LUKE

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. Устанавливается как обычный npmpackage • Либо через консоль • codefo:~ codefo$ npm install grunt grunt-cli --save-dev

  12. Устанавливается как обычный npmpackage • Либо через консоль • 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/> <filesetdir="${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) { • // Projectconfiguration. • 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' • } • } • }); • // Loadthepluginthatprovidesthe "uglify" task. • grunt.loadNpmTasks('grunt-contrib-uglify'); • // Defaulttask(s). • grunt.registerTask('default', ['uglify']); • };

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

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

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

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

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

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

  24. Grunt в Дневнике

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

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

  27. Предыстория

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

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

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

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

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

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

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

  35. Any questions?

  36. Спасибо за внимание! codefo@codefo.com http://facebook.com/codefo

More Related