Модернизация разработки WordPress Theme с помощью Sage

 bower uninstall jquery 

Используя глоток

Чтобы использовать gulp, сначала нужно установить плагины gulp, используемые Sage:

 npm install gulp-autoprefixer gulp-changed gulp-imagemin gulp-less --save 

После этого мы можем использовать команду gulp для компиляции и оптимизации ресурсов вашего проекта. Выполнение команды gulp показывает следующий вывод:

 [08:50:10] Using gulpfile ~/www/wordpress/wp-content/themes/my-theme/gulpfile.js [08:50:10] Starting 'clean'... [08:50:10] Finished 'clean' after 45 ms [08:50:10] Starting 'default'... [08:50:10] Starting 'build'... [08:50:10] Starting 'wiredep'... [08:50:11] Finished 'default' after 1.39 s [08:50:12] Finished 'wiredep' after 1.57 s [08:50:12] Starting 'styles'... [08:50:22] Finished 'styles' after 10 s [08:50:22] Starting 'jshint'... [08:50:23] Finished 'jshint' after 638 ms [08:50:23] Starting 'scripts'... [08:50:29] Finished 'scripts' after 6.51 s [08:50:29] Starting 'fonts'... [08:50:29] Starting 'images'... [08:50:29] Finished 'fonts' after 162 ms [08:50:37] gulp-imagemin: Minified 2 images (saved 405.06 kB - 35.1%) [08:50:37] Finished 'images' after 7.79 s [08:50:37] Finished 'build' after 27 s 

В первой строке вы видите, что он использует файл gulpfile.js . Этот файл содержит все инструкции, которые должны быть выполнены Gulp. Первая задача — «очистить», она удаляет все файлы в каталоге dist . Здесь хранятся все скомпилированные и оптимизированные файлы. Затем вызывается задача «по умолчанию». Это в основном просто вызывает задачу «сборки». Затем задача ‘build’ вызывает задачи со стилями, сценариями, шрифтами и изображениями.

На этом этапе вы можете открыть gulpfile.js чтобы я мог gulpfile.js вас через каждое задание. Во-первых, это «стили». Это зависит от ‘wiredep’, который позволяет нам main.css зависимости Less и Sass Bower в файл main.css находящийся в каталоге dist/styles . После этого он компилирует файлы Sass и Less в директорию assets/styles .

 gulp.task('styles', ['wiredep'], function() { var merged = merge(); manifest.forEachDependency('css', function(dep) { var cssTasksInstance = cssTasks(dep.name); if (!enabled.failStyleTask) { cssTasksInstance.on('error', function(err) { console.error(err.message); this.emit('end'); }); } merged.add(gulp.src(dep.globs, {base: 'styles'}) .pipe(cssTasksInstance)); }); return merged .pipe(writeToManifest('styles')); }); 

Если вы хотите добавить CSS для конкретной страницы, вы можете сделать это с помощью файла manifest.json который находится в корне каталога assets .

Вот пример, где я добавил other-page.css . Затем вы можете указать файлы, которые будут использоваться в качестве источника, указав массив путей в свойстве files . В этом случае я использую только файл other-page.less в каталоге styles .

 { "dependencies": { "main.js": { "files": [ "scripts/main.js" ], "main": true }, "main.css": { "files": [ "styles/main.scss" ], "main": true }, "editor-style.css": { "files": [ "styles/editor-style.scss" ] }, "other-page.css": { "files": [ "styles/other-page.less" ] }, "modernizr.js": { "bower": ["modernizr"] } }, "config": { "devUrl": "http://example.dev" } } 

Далее идет задача «скрипты». Это зависит от задачи jshint, которая проверяет качество вашего кода JavaScript. Например, всегда ставьте фигурные скобки или запрещайте использование == или != В своем коде, потому что они могут вызвать ошибки, связанные с равенством переменных, которые вы пытаетесь сравнить.

 gulp.task('scripts', ['jshint'], function() { var merged = merge(); manifest.forEachDependency('js', function(dep) { merged.add( gulp.src(dep.globs, {base: 'scripts'}) .pipe(jsTasks(dep.name)) ); }); return merged .pipe(writeToManifest('scripts')); }); 

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

 { "bitwise": true, "browser": true, "curly": true, "eqeqeq": true, "eqnull": true, "esnext": true, "immed": true, "jquery": true, "latedef": true, "newcap": true, "noarg": true, "node": true, "strict": false } 

После проверки качества вашего кода задача ‘scripts’ объединяет все файлы JavaScript в ваших зависимостях Bower вместе с вашим файлом scripts/main.js Наконец, он минимизирует полученный скрипт с помощью uglify.js. Обратите внимание, что вы можете настроить поведение по умолчанию через файл manifest.json . Например, если вы не хотите, чтобы все ваши зависимости Bower объединялись с вашим основным скриптом. Затем вы можете удалить main свойство в вашем main.js Затем добавьте свойство bower , это займет массив компонентов Bower, от которых зависит ваш скрипт. В приведенном ниже примере я установил jQuery в качестве зависимости.

 "main.js": { "files": [ "scripts/main.js" ], "main": true, //remove this line "bower": ["jquery"] }, 

Далее идет задача «шрифты». Он получает все шрифты в каталоге assets/fonts а также все шрифты, используемые вашими зависимостями Bower. Он помещает их все в каталог dist/fonts . Эта задача использует gulp-flatten который выравнивает структуру каталогов. Это означает, что вы найдете шрифты только в каталоге dist/fonts . Это хорошо, так как вам больше не нужно указывать множество каталогов при связывании ваших шрифтов.

 gulp.task('fonts', function() { return gulp.src(globs.fonts) .pipe(flatten()) .pipe(gulp.dest(path.dist + 'fonts')) .pipe(browserSync.stream()); }); 

Наконец, у нас есть задача «изображения». Это сжимает изображения в каталоге assets/images используя сжатие без потерь. Это эффективно уменьшает размер изображения без ощутимого снижения качества изображения. Оптимизированные изображения затем сохраняются в каталоге dist/images .

 gulp.task('images', function() { return gulp.src(globs.images) .pipe(imagemin({ progressive: true, interlaced: true, svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}] })) .pipe(gulp.dest(path.dist + 'images')) .pipe(browserSync.stream()); }); 

Помимо команды gulp , есть также команда gulp watch . Вы можете использовать это, чтобы ускорить процесс разработки. Она делает то же самое, что и команда gulp , только она делает это каждый раз, когда вы вносите изменения в актив. Но прежде чем вы сможете его использовать, вы должны обновить файл assets/manifest.json так, чтобы devUrl с URL-адресом вашей установки WordPress.

 "config": { "devUrl": "http://localhost/wordpress/" } 

Как только это будет сделано, теперь вы можете выполнить команду gulp watch , внести некоторые изменения в свои активы и посмотреть, как браузер вводит изменения, которые вы только что внесли. Это работает путем создания прокси-URL для devUrl, который вы указали в вашей конфигурации. Он содержит скрипт, который вносит изменения на страницу.

 http://localhost:3000/wordpress/ 

Если вы хотите одновременно провести тестирование с другим устройством, подключенным к вашей домашней сети, вы можете определить локальный IP-адрес вашего компьютера и получить доступ к нему из браузера на вашем устройстве. URL должен выглядеть примерно так:

 http://192.168.xxx.xxx:3000/wordpress/ 

Ускорение Вещи

Пока я тестировал Sage, я заметил, что gulp watch требуется около 10 секунд, чтобы завершить выполнение всех задач. Это не хорошо, так как вы не можете увидеть изменения сразу. По этой причине мы должны внести несколько изменений в файл gulpfile.js . Сначала enabled переменная. Это используется для включения или отключения определенных задач путем указания параметра при использовании команды gulp watch .

 var enabled = { // Enable static asset revisioning when `--production` rev: argv.production, // Disable source maps when `--production` maps: argv.maps, // Fail styles task on error when `--production` failStyleTask: argv.production, // minify only when `--minify` is specified minify: argv.minify }; 

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

 gulp watch --minify --maps 

Теперь нам нужно изменить cssTasks и jsTasks чтобы они использовали изменения, которые мы внесли в переменную enabled Во-первых, это исходные карты, мы используем gulpif чтобы проверить, gulpif ли исходные карты, и вызываем только функцию, которая генерирует исходные карты, когда она включена.

 .pipe(function() { return gulpif(enabled.maps, sourcemaps.init()); }) 

Далее идет задача «минифицировать».

 .pipe(function(){ return gulpif(enabled.minify, minifyCss({ advanced: false, rebase: false })); }) 

Ваши cssTasks теперь должны выглядеть следующим образом:

 var cssTasks = function(filename) { return lazypipe() .pipe(function() { return gulpif(!enabled.failStyleTask, plumber()); }) .pipe(function() { return gulpif(enabled.maps, sourcemaps.init()); }) .pipe(function() { return gulpif('*.less', less()); }) .pipe(function() { return gulpif('*.scss', sass({ outputStyle: 'nested', // libsass doesn't support expanded yet precision: 10, includePaths: ['.'], errLogToConsole: !enabled.failStyleTask })); }) .pipe(concat, filename) .pipe(autoprefixer, { browsers: [ 'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12' ] }) .pipe(function(){ return gulpif(enabled.minify, minifyCss({ advanced: false, rebase: false })); }) .pipe(function() { return gulpif(enabled.rev, rev()); }) .pipe(function() { return gulpif(enabled.maps, sourcemaps.write('.')); })(); }; 

Далее следует jsTask , измените задачу «uglify», чтобы она сначала проверяла, включено ли minify, прежде чем выполнять функцию, которая минимизирует сценарии:

 .pipe(function(){ return gulpif(enabled.minify, uglify()) }) 

Ваши jsTasks теперь должны выглядеть следующим образом:

 var jsTasks = function(filename) { return lazypipe() .pipe(function() { return gulpif(enabled.maps, sourcemaps.init()); }) .pipe(concat, filename) .pipe(function(){ return gulpif(enabled.minify, uglify()) }) .pipe(function() { return gulpif(enabled.rev, rev()); }) .pipe(function() { return gulpif(enabled.maps, sourcemaps.write('.')); })(); }; 

Вывод

Это оно! Из этого урока вы узнали, как работать с Sage, чтобы модернизировать ваш процесс разработки темы WordPress. Вы также узнали, как использовать такие инструменты, как Bower, gulp и Browsersync, чтобы ускорить разработку.