Автообновления при изменении PHP файлов в WordPress c использованием Gulp

  • Вконтакте

Всем привет друзья, на связи Валерий Столярчук. В этом материале я расскажу о том, как реализовать автообновление страницы сайта в браузере после изменения PHP файлов. И в целом о настройке Gulp для разработки WordPress темы или посадки клиентского проекта на WordPress.

Вспомните, сколько раз вам приходилось обновлять страницу в браузере после внесенных изменений в PHP файлы? И как же это надоедает.. Знакомое чувство ? В этой статье мы решим эту проблему. Погнали!

Приступим к настройке livereload с использованием Gulp . В своем примере я буду проводить настройку именно для работы с WordPress. Также, вам ничего не помешает перенести эти настройки для работы с любой другой CMS или PHP фреймворком. Для работы на компьютере должен быть в обязательном порядке установлен Node.js с пакетным менеджером NPM.

Шаг 1. Настраиваем Livereload с помощью gulp

После установки Node.js необходимо глобально в систему установить Gulp, делается это командой: npm i gulp -g далее:

  1. Создаем папку gulp в по следующему пути: wordpress/content/gulp
  2. Создаем 2 файла: package.json и gulpfile.js

Содержимое файла: package.json

{
    "name": "Project",
    "version": "1.0.0",
    "description": "",
    "devDependencies": {
        "browser-sync": "^2.18.6",
        "gulp": "^3.9.1",
        "gulp-autoprefixer": "^3.1.1",
        "gulp-sass": "^3.1.0",
    }
}

После сохранения данного файла можно приступить к установке компонентов для Gulp. Используя команду npm i (вы должны открыть терминал в ранее созданном каталоге gulp )

снимок экрана

После успешной установки всех компонентов вы увидите примерно такое окно, с сообщением в количестве добавленных пакетов и затраченному времени на добавление:
added 743 packages in 6.547s

Шаг 2

Настройка файла gulpfile.js

В своем примере я использую Gulp не только для Livereload, а также для работы с SASS файлами, вы можете оставить или удалить эти таски.

var gulp         = require('gulp'),
    sass         = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    browserSync  = require('browser-sync').create();

gulp.task('browser-sync', [], function() {
    browserSync.init({
        proxy: 'localhost:8888/bober', //ссылка на локальный сайт
        notify: false
    });	
});

gulp.task('styles', function () {
    return gulp.src('../themes/your-theme/assets/sass/**/*.sass')  //Название папки вашей темы (your-theme)
    .pipe(sass({
        includePaths: require('node-bourbon').includePaths
    }).on('error', sass.logError))
    .pipe(autoprefixer({browsers: ['last 15 versions'], cascade: false}))
    .pipe(gulp.dest('../themes/your-theme/assets/css')) //Название папки вашей темы
    .pipe(browserSync.stream());
});


gulp.task('watch', function () {
    gulp.watch('../themes/your-theme/assets/sass/**/*.sass', ['styles']); //Название папки вашей темы (your-theme)
    gulp.watch('../themes/your-theme/*.php').on("change", browserSync.reload); //Название папки вашей темы (your-theme)
});

gulp.task('default', ['browser-sync', 'watch']);

Шаг 3

Это последний шаг настройки автообновления в браузере, в котором вам останется лишь:

  1. Запустить ваш сервер
  2. Запустить Gulp
  3. Наслаждатся работой Livereload

Запуск Gulp делается командой gulp в терминале (вы должны открыть терминал в ранее созданном каталоге gulp )

После чего в вашем браузере автоматически откроется новая ссылка.
Пример: localhost:3000

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

Результат урока:

Если у вас в браузере открылась ссылка сгенерированная при помощи Gulp и ваш сайт отображается в браузере, спешу вас поздравить - мы настроили Livereload. А если что-то пошло не так, обращайтесь за помощью в комментарии.

Понравилась статья ? Расскажи друзьям
Вконтакте
Telegram
Читать еще: