Grunt и WordPress: Часть 4. Расширенные техники использования Grunt

В предыдущих записях данной серии статей мы раскрыли процесс установки и настройки Grunt для разных проектов. Теперь, когда все настроено, мы можем приступить к расширенным техникам использования Grunt. В частности, мы посмотрим, как сконфигурировать существующие задачи и как создать произвольные задачи.

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

Каждый проект является уникальным, поэтому путь, которым вы будете конфигурировать ваш Gruntfile.js, будем всегда разным. Естественно, Grunt всегда будет в состоянии обработать любую задачу, вне зависимости от того, как она настроена.

Вложение

Прекрасная возможность Grunt – вы можете вкладывать свои конфигурации к каждому плагину. Есть множество причин, по которым вы можете сделать это, начиная с изменения опций для определенных файлов и заканчивая выделением файлов под задачу отслеживания (watch task).

Чтобы сделать это, вы должны просто создать различные объекты внутри вашего плагина Grunt. Чаще всего создаются разные файлы для темы. Давайте используем этот пример, чтобы запустить плагин uglify для JS-файлов темы после того, как они изменятся, а затем то же самое проведем для JS-файлов консоли (плагин отвечает за минимизацию).

Не забудьте добавить плагин в свой проект:

grunt.loadNpmTasks('grunt-contrib-uglify');

Теперь мы можем настроить конфигурацию для нашего процесса uglify:

uglify: {
    theme: {
        options: {
            beautify: false,
            mangle: true
        },
        files: {
            'js/theme.main.min.js': 'js/dev/theme.*.js'
        }
    },
 
    admin: {
        options: {
            beautify: true,
            mangle: false
        },
        files: {
            'js/admin.min.js': 'js/dev/admin.*.js'
        }
    }
}

Затем мы можем сконфигурировать нашу задачу слежения для выполнения определенных задач при изменении разных файлов:

watch: {
    theme_js: {
        files: 'js/dev/theme.*.js',
        tasks: 'uglify:theme'
    },
    admin_js: {
        files: 'js/dev/admin.*.js',
        tasks: 'uglify:admin'
    }
}

Теперь, если вы запустите watch, то будет запущена соответствующая конфигурация uglify, основанная на файле, который был изменен. Вы можете запускать задачу Grunt самостоятельно, введя в командную строку либо grunt uglify:theme, либо grunt uglify:admin.

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

Иногда ваши задачи должны получить доступ к определенным элементам из файла package.json, таким как название, версия, автор, главная страница и т.д. Все это выводится в заголовке, который находится в самом начале скомпилированного JS- или CSS-файла. Я обычно использую это в связке с плагином grunt-contrib-compress.

Чтобы задачи могли получить элементы из файла package.json, вам нужно добавить следующий код в функцию initConfig:

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
)}

Теперь, когда у вас имеется данная строка кода, вы можете получить доступ к различным элементам:

<%= pkg.name %>
<%= pkg.version %>
<%= pkg.author %>

Хороший пример использования этого кода — Bootstrap Gruntfile. Вы можете видеть, что в нем используются разные элементы в файле package.json для создаваемого заголовка:

banner: '/*!\n' +
        ' * Bootstrap v<%= pkg.version %> (<%= pkg.homepage %>)\n' +
        ' * Copyright 2011-<%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' +
        ' * Licensed under <%= pkg.license.type %> (<%= pkg.license.url %>)\n' +
        ' */\n',

Загрузка Grunt задач

Я уже упоминал ранее, что нужно обязательно убедиться в том, что все ваши grunt задачи были загружены перед своим выполнением. Это достаточно рутинный процесс, особенно если вы часто удаляете и добавляете плагины. Если вы не хотите переживать по этому поводу, то в таком случае вы можете воспользоваться прекрасным плагином, который называется load-grunt-tasks.

С помощью данного плагина следующие строки кода:

grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-compress');
grunt.loadNpmTasks('grunt-contrib-watch');

Можно было бы легко заменить на:

require('load-grunt-tasks')(grunt);

Существуют и другие варианты применения этого плагина, в частности, связанные с очисткой вашего Gruntfile. Я не буду вдаваться в детали, поскольку это выходит за рамки данного руководства.

Произвольные задачи

Еще один хороший способ настройки вашего grunt файла заключается в создании произвольных задач. Я поделюсь с вами несколькими задачами, которые я обычно добавляю к своим проектам.

Default

Как и следует из названия, это дефолтная задача для вашего проекта. По существу, это именно то, что должно произойти, когда вы просто вбиваете grunt в командную строку. Все, конечно, зависит от вашего проекта, однако чаще всего я ощущаю необходимость в запуске watch задачи по умолчанию.

Вот как это сделать:

grunt.registerTask('default', ['watch']);

Вы можете выбирать любые задачи, которые вы хотите запускать, путем указания списка задач, разделенного запятыми. К примеру, вы хотите запустить uglify, а затем watch:

grunt.registerTask('default', ['uglify, watch']);

Если у вас имеются многочисленные задачи, то они будут выполняться в том порядке, который вы задали. Если одна из задач не будет выполнена, то процесс остановится в той точке выполнения, где стояла эта задача. Все остальное уже выполнено не будет.

Dist

Еще одна задача, которую я обычно устанавливаю, это dist. Данная задача связана с дистрибуцией (распространением) файлов. Допустим, что я закончил разработку релиза и хочу подготовить мой проект к дистрибуции.

К примеру, у меня есть много задач, которые я хочу выполнить для JS и SASS файлов.

Для JS-файлов я буду использовать JSLint, чтобы проверить синтаксис, затем объединю их в отдельный файл, после чего минимизирую с помощью uglify финальный файл. Затем я запущу компиляцию для всех моих SASS-файлов. Наконец я запущу copy для перемещения всех файлов в соответствующее расположение, и затем сожму проект в zip файл, чтобы любой пользователь мог установить его через WP консоль.

Вот пример:

grunt.registerTask('dist', ['jslint, concat, uglify, sass, copy, compress']);

Заключение

Теперь вы знаете, как можно использовать продвинутые техники Grunt для вашего проекта. Существуют и другие техники, с которыми вы обязательно познакомитесь, если будете активно работать с Grunt.

Это финальная часть серии о Grunt. Я надеюсь, что с помощью этой серии статей вы откроете для себя обширный мир Grunt, который поможет вам заметно упростить процесс разработки плагинов, тем и различных решений для WordPress.

Источник: code.tutsplus.com