ChocoDevDay — Grunt - Advanced Tips (NIkita Bayev)

GRUNT — ADVANCED TIPS

Nikita Bayev Front-end developer @ Chocomart.kz !

!1

gruntjs.com

nodejs.org

> grunt

!5

!6

Оптимизация

Автоматизация

Минификация

Генерация

!7

Autoprefixer

imgo

Borschik

banner

concurrent

!8

!9

Autoprefixer grunt.loadNpmTasks(‘grunt-autoprefixer');Чистка кода

Добавление нужны вендорных префиксов

Удаление устаревших ненужных вендорных префиксов

Используется база данных caniuse.com

Умеет работать с препроцессорами и source maps

!10

Конфигурация grunt-autoprefixer

!11

И это все?

!12

Добавим немного опций

!13

Добавим немного опций

!14

borschik grunt.loadNpmTasks('grunt-borschik');

Сборка статичных файлов

“Умная” минификация CSS и JS

!15

Конфигурация borschik

!16

imgo grunt.loadNpmTasks('grunt-imgo');

Оптимизация изображений

!17

!18

Создаем задачу imgo

!19

grunt.loadNpmTasks('grunt-concurrent');

Асинхронный запуск тасков

!20

Конфигурация grunt-concurrent

!21

Что еще?

grunt-remove-logging — удаление console.log()

grunt-dploy — помощь в деплое на дев/продакшн сервера

grunt-contrib-imagemin — оптимизация изображений

grunt-dev-update — обновление npm-зависимостей

И еще много всего на github.com и gruntjs.com

!22

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

twitter.com/Nikita_Bayev | github.com/drugoi