В предыдущем посте из этой серии я рассказал вам о настройке Grunt в вашем проекте. Теперь, когда у нас все настроено, я хотел бы поговорить о нескольких продвинутых методах, которые вы можете использовать с Grunt.
В частности, я собираюсь сосредоточиться на конфигурации ваших существующих задач и как создавать собственные задачи.
конфигурация
Каждый проект уникален, и способ настройки вашего Gruntfile.js будет полностью отличаться, скажем, от того, как кто-то другой может настроить его самостоятельно. Конечно, Grunt готов к работе, но вы хотите настроить каждую задачу.
гнездование
Отличной особенностью Grunt является то, что вы можете вкладывать свои конфигурации для каждого плагина. Это может быть вызвано несколькими причинами, например, изменением параметров для определенных файлов, или же вы хотите выделить файлы для своей задачи наблюдения .
Чтобы сделать это, вы просто создадите несколько объектов внутри объекта плагина Grunt. Распространенным вариантом использования будет создание нескольких файлов для вашей темы, как темы, так и администратора. Давайте используем этот пример, чтобы увеличить файлы JavaScript темы при их изменении, а затем увеличить файлы JavaScript панели мониторинга при их изменении.
Не забудьте добавить плагин в свой проект:
grunt.loadNpmTasks('grunt-contrib-uglify');
Затем мы можем настроить конфигурацию для нашего процесса uglify:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
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’
}
}
}
|
А теперь мы настроим нашу задачу наблюдения для запуска определенных задач при изменении разных файлов:
|
01
02
03
04
05
06
07
08
09
10
|
watch: {
theme_js: {
files: ‘js/dev/theme.*.js’,
tasks: ‘uglify:theme’
},
admin_js: {
files: ‘js/dev/admin.*.js’,
tasks: ‘uglify:admin’
}
}
|
Теперь, когда вы запускаете часы, они запускают только соответствующую конфигурацию, основанную на файле, который был изменен. Вы также можете grunt uglify:theme задачу Grunt самостоятельно, введя в командной строке grunt uglify:theme или grunt uglify:admin .
Использование package.json
Иногда вашим задачам требуется доступ к чему-либо из вашего файла package.json, например, к имени, версии, автору, домашней странице и т. Д. Это часто видно по баннеру, который добавляется в начале скомпилированного файла JavaScript или CSS. Я также использовал его вместе с плагином grunt-contrib-compress .
Для того, чтобы прочитать элементы в файле package.json, вам нужно добавить следующее в вашу функцию initConfig, чтобы задачи могли читать это так:
|
1
2
3
|
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’)
)}
|
Теперь, когда у вас есть эта строка кода, вы можете получить доступ к различным элементам, например так:
-
<%= pkg.name %> -
<%= pkg.version %> -
<%= pkg.author %>
В Bootstrap Gruntfile есть отличный пример этого. Вы можете видеть, что они используют несколько элементов в файле package.json в своем объекте баннера, который они создают.
|
1
2
3
4
5
|
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
Я также упомянул, что нужно обязательно загрузить все свои задачи перед выполнением. Это может немного усложнить ситуацию, если вы часто добавляете и удаляете плагины. Если вы не хотите беспокоиться об этом, есть отличный плагин, который вы можете использовать под названием load-grunt-tasks .
Это существенно изменило бы это:
|
1
2
3
4
5
6
|
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 — создать пользовательские задачи. Я собираюсь поделиться с вами тремя, которые я обычно добавляю в проект.
По умолчанию
Рекомендуется использовать задание по умолчанию в вашем проекте. По сути, это то, что вы хотите, когда вы просто вводите grunt в командной строке. Это зависит от вашего проекта, но во многих случаях я по умолчанию хочу запустить задачу наблюдения.
Вот как бы вы это сделали:
grunt.registerTask('default', ['watch']);
Вы можете выбрать любые задачи, которые хотите запустить, просто разделив их запятыми. Допустим, вы хотели запустить uglify, а затем посмотреть, вот как это сделать:
grunt.registerTask('default', ['uglify, watch']);
На что нужно обратить внимание при выполнении нескольких задач: они будут выполняться в указанном вами порядке. В случае сбоя одной задачи она завершит процесс в этой точке выполнения и не запустит остальные задачи, которые вы определили.
Dist
Другая задача, которую я обычно настраиваю, — это задача для распространения. Допустим, я закончил разработку для релиза и хочу подготовить свой проект для распространения.
В этом примере у меня есть ряд задач, которые я хочу выполнить для файлов JavaScript и SASS.
Для моих файлов JavaScript я буду использовать JSLint, чтобы проверить мой синтаксис, объединить несколько из них в один файл, а затем увеличу окончательный файл. Далее я запустлю компиляцию для всех моих файлов SASS. Наконец, я запусту команду copy, чтобы переместить все файлы в соответствующие места, а затем сожму проект в файл .zip, чтобы кто-нибудь смог установить его через панель управления WordPress.
Вот пример:
grunt.registerTask('dist', ['jslint, concat, uglify, sass, copy, compress']);
Вывод
Теперь вы должны иметь представление о некоторых более продвинутых методах Grunt для вашего проекта. Есть еще немного техник, которые вы откроете, проводя время с Grunt.
На этом мы завершаем серию использования Grunt с вашим проектом WordPress. Мы поговорили о том, что такое Grunt, о причинах его использования, настроили в вашем проекте и рассказали о некоторых передовых методах. Grunt продолжает набирать популярность наряду с другими передовыми технологиями. Я надеюсь, что это только начало ваших экспериментов с Grunt и другими подобными инструментами.