Вступление
При разработке современных сайтов важно учитывать, что они должны быть простыми в использовании, привлекательными для посетителей, и одинаково производительными на разных платформах и браузерах. Как видите, это довольно большой объём работы. К счастью, существует удивительный инструмент, который пригодится и при создании приложения, и для его дальнейшей работы – это инструмент для сборки проектов с использованием задач под названием Grunt.
Grunt может выполнять определённые задачи (например, конкатенацию или минификацию кода), отслеживая изменения в исходном коде.
Данное руководство объяснит, как упомянутые выше задачи влияют на производительность сайта и почему их нужно использовать.
Конкатенация
Конкатенация исходных файлов снижает количество запросов браузера, совмещая несколько файлов JavaScript (или CSS) в один файл или группируя их в зависимости от потребностей приложения. Это очень эффективно, потому что каждый запрос браузера занимает, по крайней мере, несколько миллисекунд вне зависимости от размера файлов. Конечно, это время кажется незначительным, но большинство сайтов состоит из нескольких скриптов, таблиц стилей, изображений и других объектов, и обработка каждого из них существенно влияет на производительность сайта. Пользователи не любят ждать, пока сайт загрузится, и могут просто закрыть его.
Минификация кода
Конечно, одна только конкатенация не даст желаемого результата. Разработчики, как правило, тратят много пространства на комментарии и структурирование исходного кода, чтобы сделать его более удобным для чтения и устранения неполадок. Это не плохо, и многие профессионалы рекомендуют делать именно так. Но браузер не интересует, как красиво структурирован код, он будет обрабатывать его независимо от того, как он выглядит. Минификация – это процесс удаления всех ненужных символов из исходных файлов, который при этом не нарушает и не изменяет его функциональности. Комментарии, пробелы и символы новой строки занимают много лишнего места, и их не нужно обрабатывать. Существуют и другие способы оптимизации: сокращения имён переменных в файлах JavaScript, сжатие определённых операторов, и т.д. Это значительно уменьшает количество данных, которые нужно передать браузеру, что приводит к дальнейшему сокращению времени загрузки страницы.
Автоматизация задач при помощи Grunt
Grunt – довольно простой инструмент, способный автоматизировать почти всё. К примеру, вышеописанные процессы конкатенации и минификации запускать вручную очень неудобно, поскольку это нужно делать при любом малейшем изменении кода. Grunt способен сделать работу проще и быстрее.
Еще одним преимуществом Grunt является его постоянное развитие и появление новых плагинов. Так, некоторые из наиболее часто выполняемых задач уже давно стали специальными плагинами для Grunt; чтобы автоматизировать такие задачи, нужно только найти в списке нужный плагин и настроить его.
Требования
Для выполнения данного руководства необходимы навыки работы с node.js и npm, понимание базовых задач Linux, и – главное – наличие базового проекта на основе веб-фреймворка.
Чтобы ознакомиться с node.js и получить инструкции по установке программы, читайте специальный раздел этого сайта.
Установка и настройка Grunt
Для начала установите командную строку Grunt (Grunt CLI), выполнив команду:
npm install -g grunt-cli
В Linux, OSX, BSD и т.п. можно использовать:
sudo npm install -g grunt-cli
В Windows запустите команду с правами администратора.
Теперь нужно перейти в каталог веб-проекта при помощи команды:
cd /path/to/your/project/
Чтобы установить Grunt и необходимые плагины в каталог проекта, используйте:
npm install grunt grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-contrib-watch --save-dev
Создайте новый конфигурационный файл Grunt по имени Gruntfile.js в корне проекта и внесите в него следующий код:
module.exports = function(grunt) {
grunt.initConfig({
jsDir: 'public/javascripts/',
jsDistDir: 'dist/javascripts/',
cssDir: 'public/stylesheets/',
cssDistDir: 'dist/stylesheets/',
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
options: {
separator: ';'
},
src: ['<%=jsDir%>*.js'],
dest: '<%=jsDistDir%><%= pkg.name %>.js'
},
css: {
src: ['<%=cssDir%>*.css'],
dest: '<%=cssDistDir%><%= pkg.name %>.css'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%=grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'<%=jsDistDir%><%= pkg.name %>.min.js': ['<%= concat.js.dest %>']
}
}
},
cssmin: {
add_banner: {
options: {
banner: '/*! <%= pkg.name %> <%=grunt.template.today("dd-mm-yyyy") %> */\n'
},
files: {
'<%=cssDistDir%><%= pkg.name %>.min.css': ['<%= concat.css.dest %>']
}
}
},
watch: {
files: ['<%=jsDir%>*.js', '<%=cssDir%>*.css'],
tasks: ['concat', 'uglify', 'cssmin']
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', [
'concat',
'uglify',
'cssmin',
'watch'
]);
};
Отредактируйте переменные jsDir, jsDistDir, cssDir и cssDistDir согласно вашим требованиям. Эти переменные определяют исходные каталоги файлов Javascript и CSS и каталоги, готовые к распространению (dist). Каталоги dist содержат файлы после конкатенации и минификации.
Выполните задачу Grunt, запустив в терминале
grunt
На экране появится такой вывод:
Running "concat:js" (concat) task
File "dist/js/application-name.js" created.
Running "concat:css" (concat) task
File "dist/css/application-name.css" created.
Running "uglify:dist" (uglify) task
File "dist/js/application-name.min.js" created.
Running "cssmin:add_banner" (cssmin) task
File dist/css/application-name.min.css created.
Running "watch" task
Waiting...
Теперь Grunt будет отслеживать изменения в исходном коде и выполнять конкатенацию и минификацию кода.
Больше информации о работе Grunt можно найти на официальном сайте проекта.