Grunt: система сборки для фронтенд-разработчиков

Артём Сапегин

• JavaScript-программист в Badoo.
• Использую Grunt с начала года.
• Во всех проектах.
• Пишу плагины для Grunt.

Системы сборки

Автоматизируют подготовку проекта к боевому окружению:

• cклеивают и минифицируют файлы;
• запускают препроцессоры и компиляторы;
• оптимизируют изображения;
• и т. д.

Зачем нам это нужно?

Сборка JS, CSS, картинок и прочего фронтенда — забота технолога.

Ant

• XML.
• Развесистый.
• Есть встроенные задачи.
• Но их очень мало для фронтенда.

Make

• Краткий.
• Нужно уметь писать shell-скрипты.
• Нужно уметь пользоваться утилитами Unix.
• Сложность быстро растёт.

Grunt

• Привычный язык: JS/Node.
• Конфигурация отделена от реализациии.
• Множество готовых задач.
• Заточен на фронтенд.
• Легко расширяется.

Встроенные задачи

• concat — склеивание файлов;
• min — минификация JS (UglifyJS);
• lint — проверка JS (JSHint);
• qunit — запуск тестов (QUnit);
• watch — отслеживание изменений в файлах;
• server — простой веб-сервер для статики;
• init — инициализация проектов по шаблонам.

Дополнительные задачи (плагины)

• CSS-препроцессоры (SASS, LESS, Stylus).
• Тестовые фреймворки (Mocha, Jasmin, CasperJS).
• Оптимизация изображений.
• Создание архивов.
• И более 230 плагинов на gruntjs.com.

Мои плагины

• stylus.
• shower-markdown.
• imgo.
• fingerprint.
• sweet.

• SublimeGruntWatch (очень альфа).

Установка

Сначала Node.js, потом:

$ npm install grunt -g

Gruntfile: grunt.js

module.exports = function(grunt) {
    grunt.initConfig({
        /* ... */
    });
};

Задачи

module.exports = function(grunt) {
    grunt.initConfig({
        concat: {
        }
    });
    grunt.registerTask('default', 'concat');
};

Подзадачи (multi task)

concat: {
    main: {
    },
    second: {
    }
}

Параметры задачи

concat: {
    main: {
        src: 'js/*.js',
        dest: 'build/scripts.js'
    }
}

Списки файлов

'js/main.js'
[ 'js/utils.js', 'js/main.js' ]
[ 'js/libs/*.js', 'js/mylibs/**/*.js' ]

* — любые символы.
/**/ — папка любой вложенности.

Шаблоны

Шаблонизатор из Underscore.

<%= concat.main.dest %>
<%= grunt.template.today("m-d-yyyy") %>

Шаблоны

concat: { main: {
    src: [ 'js/utils.js', 'js/main.js' ],
    dest: 'build/scripts.js'
}},
min: { main: {
    src: '<%= concat.main.dest %>',
    dst: 'build.<%= grunt.template.today("m-d-yyyy") %>.js'
}}

Банеры

meta: {
    banner: '/* © Ivan Pupkin */'
},
min: { main: {
    src: [ '<banner>', 'build/build.js' ], ...
}}

Подключение плагинов

$ npm install grunt-stylus

Подключение плагинов

module.exports = function(grunt) {
    grunt.initConfig({
        stylus: { ... }
    });
    grunt.loadNpmTasks('grunt-stylus');
    grunt.registerTask('default', 'stylus');
};

Запуск

$ grunt
$ grunt concat
$ grunt concat:main
­
$ grunt --debug
­
$ grunt.cmd  # Windows :-)

Собственные задачи

Будем запускать из Гранта imgo —
консольный оптимизатор веб-графики.

См. также grunt-imgo, grunt-exec.

Конфиг

imgo: {
    images: {
        files: 'images/**'
    }
}

Задача

grunt.registerMultiTask('imgo', '…', function() {
    // this.data.files ===
    //   <%= imgo.images.files %>
});

Цикл по исходным файлам

var done = this.async();
var files = grunt.file.expandFiles(this.data.files);
grunt.utils.async.forEach(files,
    function(file, next) {
        // Обрабатываем каждый файл
    }
, done);

Обработка файла

function(file, next) {
    grunt.utils.spawn({
        cmd: 'imgo',
        args: [file]
    }, next);
}

Использование

module.exports = function(grunt) {
    grunt.initConfig({
        imgo: {...}
    });
    grunt.registerMultiTask('imgo', ...);
    grunt.registerTask('default', 'imgo');
};

grunt watch

concat: { main: {
    src: [ 'js/utils.js', 'js/main.js' ],
    dest: 'build/scripts.js' }},
watch: { concat: {
    files: '<%= concat.main.src %>',
    tasks: 'concat' }}

grunt server

server: {
    port: 8000,
    base: '.'
}

$ grunt server watch → http://localhost:8000/

grunt init

Упрощает инициализацию проектов и отдельных файлов (scaffolding).

• Создание файлов и структуры папок.
• Шаблоны.
• Таблица переименования файлов.
• Вопросы пользователю.
• gruntfile, jquery, node + всё, что придумаете.

Главная страница реального проекта.

• 39 JS-файлов
• 5 CSS-файлов

JavaScript: min

min: {
    main: {
        src: [ '<%= concat.main.dest %>' ],
        dest: 'build/scripts.min.js'
    }
}

CSS

concat: { main: {
        src: [
            'Content/css/main.css',
            'Content/css/articul/pit.css', ...
        ],
        dest: 'build/styles.css'
} }

HTML

...
<link rel="stylesheet" href="/build/styles.css">
<script src="/build/scripts.js"></script>
...

• @sapegin
• sapegin.ru
• artem@sapegin.ru

Презентация: sapegin.ru/pres/grunt
Примеры: github.com/sapegin/grunt-talk-examples