Веб-разработка Добавление номера ревизии к именам файлов и gzip-сжатие с помощью Grunt на примере Yeoman 1.0.0-rc.1.1

В предыдущей статье я упоминал про возможность автоматического добавления номеров ревизий к именам файлов (это позволит избежать многих проблем с кешированием контента в браузерах при обновлении сайта), а также про то, что можно сжать всю получившуюся статику в gzip-файлы на этапе сборки веб-приложения в Grunt (иначе придется настраивать веб-сервер на сжатие в gzip «на лету»). В случае с веб-сервером Nginx для включения динамического gzip-сжатия, скорее всего, придется пересобирать Nginx из исходников с включением модуля ngx_http_gzip_module, так как версии в репозиториях чаще всего собраны без поддержки этого модуля (в них есть лишь ngx_http_gzip_static_module). Впрочем, с точки зрения производительности, лучше освободить веб-сервер от необходимости собирать архивы и сжать всю статику в gzip заранее.

Для того, чтобы добавить номера ревизий к именам файлов, в Grunt есть плагин grunt-rev, который по умолчанию установлен в Yeoman (по крайней мере в версии 1.0.0-rc.1.1). Если плагин не установлен, то устанавливаем его локально в тот же каталог, где уже установлен grunt:

npm install grunt-rev --save-dev

Если плагин grunt-rev используется отдельно от Yeoman, то нужно будет его подгрузить следующей командой:

grunt.loadNpmTasks('grunt-rev');

В Yeoman, к слову, в файле Gruntfile.js используется команда, которая автоматически грузит плагины с префиксом «grunt-«, так что нет смысла подгружать плагины по отдельности:

require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

И останется лишь описать задачу «rev» в конфигурационном файле Gruntfile.js. Вот так это будет выглядеть на примере Yeoman 1.0.0-rc.1.1:

rev: {
    dist: {
        files: {
            src: [
                '<%= yeoman.dist %>/scripts/{,*/}*.js',
                '<%= yeoman.dist %>/styles/{,*/}*.css',
                '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}',
                '<%= yeoman.dist %>/styles/fonts/*'
            ]
        }
    }
}

Если плагин grunt-rev по умолчанию присутствует в Yeoman 1.0.0-rc.1.1, то плагина для gzip-сжатия по умолчанию нет. Наиболее подходящим плагином мне кажется grunt-contrib-compress. Для начала его нужно установить локально в каталог веб-приложения, в котором установлен Grunt:

npm install grunt-contrib-compress --save-dev

Описываем задачу «compress» в Gruntfile.js так, чтобы для каждого файла, который получился в результате сборки приложения, была создана его gzip-копия:

compress: {
    main: {
        options: {
            mode: 'gzip'
        },
        expand: true,
        cwd: '<%= yeoman.dist %>/',
        src: ['**/*'],
        dest: '<%= yeoman.dist %>/'
    }
}

И, в заключение, не забываем добавить задачи «rev» и «comress» в таск «build», который будет выглядеть примерно так:

grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'concurrent:dist',
    'concat',
    'cssmin',
    'uglify',
    'copy:dist',
    'rev',
    'usemin',
    'compress'
]);

В результате после сборки нашего приложения командой «grunt» или «grunt build» получим файлы статики с проставленными номерами ревизий и с gzip-сжатием.