В этом уроке мы рассмотрим, как использовать Grunt , в частности, чтобы помочь и ускорить рабочий процесс разработки WordPress.
Grunt — это программа запуска JavaScript, которая устанавливается через NPM и работает на вашем сервере. Чтобы использовать информацию, приведенную в этом руководстве, вам потребуется доступ из командной строки к серверу. Для краткости я отсылаю вас к этому руководству по настройке и запуску Grunt.
Grunt — это проверенный исполнитель задач, используемый различными способами на разных платформах. Здесь мы рассмотрим определение прочной основы, на которой будет основываться ваша разработка WordPress.
Общие задачи
Сообщество Гранта невероятно сильное, что привело к разработке огромного каталога плагинов. Легко потеряться и тратить много времени на поиск и проверку того, какие из них использовать.
Итак, какие общие задачи должна выполнять или обеспечивать любая тема или плагин WordPress?
- Локализация языковых строк с использованием функций перевода WordPress
- Управление файлами активов. То есть работа с разрабатываемыми и минимизированными версиями файлов JavaScript и CSS.
локализация
У Grunt есть очень успешный пакет локализации для WordPress, называемый grunt-wp-i18n . Этот пакет Grunt неоценим, так как он сканирует папку вашей темы / плагина, находит все строки перевода и компилирует файл .pot в указанном месте. Этот файл .pot может быть использован для преобразования файлов .po и .mo другим пользователям для перевода вашей темы / плагина.
Чтобы настроить пакет, добавьте следующее в ваши параметры Gruntfile.js initConfig :
|
01
02
03
04
05
06
07
08
09
10
|
makepot: {
target: {
options: {
include: [
‘path/to/some/file.php’
],
type: ‘wp-plugin’ // or `wp-theme`
}
}
}
|
Затем вызовите задачу Grunt следующим образом (находясь в папке Gruntfile.js ):
|
1
|
grunt makepot
|
Вся ваша папка сканируется, и все строки соответствуют файлу банка.
Файлы активов
Все темы и плагины регулярно используют файлы JavaScript и CSS. К сожалению, большую часть времени необходимость разработки и выпуска версий файлов игнорируется.
Принимая подсказки от самого WordPress, я хочу убедиться, что я полностью прокомментировал и минимизировал файлы:
-
filename.js -
filename.min.js -
filename.css -
filename.min.css
Почему? Мне нравится знать, что происходит в этих файлах, но я также хотел бы знать, что мои посетители получают оптимизированные версии файлов.
Чтобы сделать это без какой-либо формы выполнения задач, это означало бы переключение URL-адресов активов, зарегистрированных в WordPress во время разработки, для просмотра измененной, не минимизированной версии, использования какой-либо формы JavaScript и CSS-компрессора перед выпуском обновления, а затем переключение обратно зарегистрированных URL-адресов , И это не весело.
С Grunt вы можете использовать пакет Uglify для минимизации и оптимизации файлов JavaScript на лету, а для дальнейшего развития CSS мы можем использовать задачу Sass для компиляции файлов Sass в CSS на лету. Что бы это ни стоило, я использую Sass, потому что это то, что WordPress использует под капотом, но есть и LESS- компилятор для Grunt.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
uglify: {
dist: {
options: {
banner: ‘/*!
report: ‘gzip’
},
files: {
‘assets/js/filename.min.js’ : [
‘assets/path/to/file.js’,
‘assets/path/to/another/file.js’,
‘assets/dynamic/paths/**/*.js’
]
}
},
dev: {
options: {
banner: ‘/*!
beautify: true,
compress: false,
mangle: false
},
files: {
‘assets/js/filename.js’ : [
‘assets/path/to/file.js’,
‘assets/path/to/another/file.js’,
‘assets/dynamic/paths/**/*.js’
]
}
}
}
|
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
sass: {
dist: {
options: {
banner: ‘/*!
style: ‘compressed’
},
files: [{
expand: true,
cwd: ‘assets/scss’,
src: [
‘*.scss’
],
dest: ‘assets/css’,
ext: ‘.min.css’
}]
},
dev: {
options: {
banner: ‘/*!
style: ‘expanded’
},
files: [{
expand: true,
cwd: ‘assets/scss’,
src: [
‘*.scss’
],
dest: ‘assets/css’,
ext: ‘.css’
}]
}
}
|
Совет: Если вы используете задачу .sass-cache добавьте .sass-cache в ваш .gitignore чтобы предотвратить добавление кеша компилятора в ваш репозиторий.
Расширенные задачи
Мы рассмотрели две ключевые области, которые Grunt может помочь в разработке WordPress, но давайте сделаем еще один шаг и найдем дополнительные возможности в использовании бегуна задач.
Просмотр файлов
Мы уже предоставляем задачи для работы с файлами, так почему бы не оптимизировать его? При выполнении вышеуказанной задачи нам нужно будет запускать grunt *** каждый раз, когда мы вносим изменения, почему бы не установить пакет grunt-contrib-watch ? После настройки Grunt будет выполнять эти задачи каждый раз при обнаружении изменения файла.
|
1
|
grunt watch
|
Presto! Больше не нужно запускать Grunt при каждом изменении файла, просто запустите наблюдатель и измените ваши файлы.
Качество JavaScript
Разве не было бы неплохо запустить JSHint для наших файлов JavaScript, чтобы отследить эти ошибки или пропущенные точки с запятой? Просто установите задачу grunt-contrib-jshint и передайте ей задачу watcher, прежде чем файлы будут скомпилированы. Теперь Grunt предупредит вас о любых ошибках и прекратит выполнение дальнейших задач.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
jshint: {
files: [
‘assets/js/filename.js’,
‘assets/dynamic/paths/**/*.js’
],
options: {
expr: true,
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
}
|
Объединение активов
Это было особенно полезно для меня при разработке Fluent Framework . Fluent Framework — это набор классов, которые, помимо прочего, создают страницы параметров и мета-блоки.
Чтобы упростить разработку отдельных полей, у меня есть такая файловая структура:
|
01
02
03
04
05
06
07
08
09
10
|
assets/
├── js/
|
├── fields/
├── text/
|
|
├── select/
├── js/
├── select.js
|
Это позволяет очень легко найти поле, над которым я работаю, и изменить только JavaScript, необходимый для этого поля.
С точки зрения пользователя, я просто хочу обслужить один файл JavaScript со всеми общими и основанными на полях JavaScript вместе. Давайте используем задачу grunt-contrib-uglify, чтобы выполнить это.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
uglify: {
dist: {
options: {
banner: ‘/*!
report: ‘gzip’
},
files: {
‘assets/js/filename.min.js’ : [
‘assets/path/to/file.js’,
‘assets/path/to/another/file.js’,
‘assets/dynamic/paths/**/*.js’
]
}
},
dev: {
options: {
banner: ‘/*!
beautify: true,
compress: false,
mangle: false
},
files: {
‘assets/js/filename.js’ : [
‘assets/path/to/file.js’,
‘assets/path/to/another/file.js’,
‘assets/dynamic/paths/**/*.js’
]
}
}
}
|
В этой конфигурации после прохождения JSHint он объединит все файлы JavaScript в файл разработки и рабочий файл.
Копировать файлы
Для WordPress.org требуется файл Readme.txt подробной информацией о теме / плагине, но системы контроля версий, такие как GitHub и BitBucket, предпочитают файлы Readme.md . Нам не нужно дублировать вручную или синхронизировать эти файлы. Давайте просто позволим Гранту сделать это для нас!
Установите задачу grunt-contrib-copy и настройте ее следующим образом:
|
1
2
3
4
5
6
|
copy: {
dist: {
src: ‘readme.txt’,
dest: ‘README.md’
}
}
|
Скачать данные
Еще одна полезная задача Grunt — пакет Grunt cURL . Для одного из полей Fluent Framework необходим доступ к данным API Google Fonts. Загрузка этого в качестве рекомендации Google будет HTTP-запросом при каждой загрузке страницы. Кроме того, если вы вручную скопируете содержимое файла, вы рискуете устареть. Лучшее из обоих миров — использовать Grunt Curl, чтобы сохранить нам запрос и получать обновления.
Чтобы быть в курсе, мы просто загрузили задачу cURL, дали ей URL-адрес, из которого можно получить данные о шрифтах, и место сохранения ответа.
|
1
2
3
4
5
6
|
curl: {
‘google-fonts-source’: {
src: ‘https://www.googleapis.com/webfonts/v1/webfonts?key=*******’,
dest: ‘assets/vendor/google-fonts-source.json’
}
}
|
Теперь каждый раз, когда мы запускаем задачу, последний список шрифтов загружается и сохраняется в файле инфраструктуры.
Документация
Эту задачу лучше всего использовать в темах, плагинах и фреймворках, где многие любопытные будут любопытны. И контекст никогда не бывает плохим для тех, кто ковыряется в кодовой базе.
PHP Documentor — отличный инструмент для автоматической генерации этих данных. Это также поможет вам сосредоточиться на предоставлении значимых DocBlocks в вашем коде.
|
1
2
3
4
5
6
7
|
phpdocumentor: {
dist: {
options: {
ignore: ‘node_modules’
}
}
}
|
Совет: Добавьте docs в свой .gitignore если вы не хотите фиксировать документацию и все ее файлы кэша.
Собираем все вместе
Вот package.json и Gruntfile.js для задач, описанных выше.
package.json
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
{
«name»: «package-name»,
«version»: «1.0.0»,
«description»: «…»,
«main»: «filename.php»,
«scripts»: {
«test»: «echo \»Error: no test specified\» && exit 1″
},
«repository»: {
«type»: «git»,
«url»: «http://repo-url.com»
},
«keywords»: [
«wordpress»
],
«author»: «Your Name»,
«license»: «GPL»,
«devDependencies»: {
«grunt»: «~0.4.2»,
«grunt-contrib-copy»: «~0.5.0»,
«grunt-contrib-jshint»: «~0.8.0»,
«grunt-contrib-sass»: «^0.7.3»,
«grunt-contrib-uglify»: «~0.3.3»,
«grunt-curl»: «*»,
«grunt-phpdocumentor»: «~0.4.1»,
«grunt-wp-i18n»: «~0.4.0»
}
}
|
Gruntfile.js
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
copy: {
dist: {
src: ‘readme.txt’,
dest: ‘README.md’
}
},
curl: {
‘google-fonts-source’: {
src: ‘https://www.googleapis.com/webfonts/v1/webfonts?key=*******’,
dest: ‘assets/vendor/google-fonts-source.json’
}
},
makepot: {
target: {
options: {
include: [
‘path/to/some/file.php’
],
type: ‘wp-plugin’ // or `wp-theme`
}
}
},
jshint: {
files: [
‘assets/js/filename.js’,
‘assets/dynamic/paths/**/*.js’
],
options: {
expr: true,
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
phpdocumentor: {
dist: {
options: {
ignore: ‘node_modules’
}
}
},
sass: {
dist: {
options: {
banner: ‘/*!
style: ‘compressed’
},
files: [{
expand: true,
cwd: ‘assets/scss’,
src: [
‘*.scss’
],
dest: ‘assets/css’,
ext: ‘.min.css’
}]
},
dev: {
options: {
banner: ‘/*!
style: ‘expanded’
},
files: [{
expand: true,
cwd: ‘assets/scss’,
src: [
‘*.scss’
],
dest: ‘assets/css’,
ext: ‘.css’
}]
}
},
uglify: {
dist: {
options: {
banner: ‘/*!
report: ‘gzip’
},
files: {
‘assets/js/filename.min.js’ : [
‘assets/path/to/file.js’,
‘assets/path/to/another/file.js’,
‘assets/dynamic/paths/**/*.js’
]
}
},
dev: {
options: {
banner: ‘/*!
beautify: true,
compress: false,
mangle: false
},
files: {
‘assets/js/filename.js’ : [
‘assets/path/to/file.js’,
‘assets/path/to/another/file.js’,
‘assets/dynamic/paths/**/*.js’
]
}
}
}
});
grunt.loadNpmTasks(‘grunt-contrib-copy’);
grunt.loadNpmTasks(‘grunt-contrib-jshint’);
grunt.loadNpmTasks(‘grunt-contrib-sass’);
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-curl’);
grunt.loadNpmTasks(‘grunt-phpdocumentor’);
grunt.loadNpmTasks(‘grunt-wp-i18n’);
grunt.registerTask(‘default’, [
‘jshint’,
‘uglify:dev’,
‘uglify:dist’,
‘sass:dev’,
‘sass:dist’,
‘makepot’,
‘copy’
]);
grunt.registerTask(‘docs’, [
‘phpdocumentor:dist’
]);
grunt.registerTask(‘googlefonts’, [
‘curl:google-fonts-source’
]);
};
|
Совет: добавьте node_modules и npm-debug.log в ваш .gitignore чтобы предотвратить добавление задач в качестве связанных файлов в ваш репозиторий.
Вывод
Как видно из приведенных выше задач, Grunt можно использовать для автоматизации разработки WordPress и дать вам больше времени, чтобы сосредоточиться на написании кода, а не на его управлении.
Мы подробно описали только несколько задач для WordPress, но есть много других пакетов для конкретных проектов, таких как задачи оптимизации изображений и многое, многое другое, так что продолжайте изучать !
Grunt теперь хорошо зарекомендовал себя, и документация находится на одном уровне с самим WordPress, почему бы не подумать о создании задачи, о которой еще не думали, и о том, чтобы поделиться ею с сообществом?