PHP Gulp Livereload

Question

PHP Gulp Livereload

У меня есть файл глотка, который я взял с Вот и модифицировано к этому:

var gulp            =   require('gulp'),
path            =   require('path'),
del             =   require('del'),
run             =   require('run-sequence'),
sass            =   require('gulp-sass'),
autoprefixer    =   require('gulp-autoprefixer'),
include         =   require('gulp-include'),
imagemin        =   require('gulp-imagemin'),
svgmin          =   require('gulp-svgmin'),
cache           =   require('gulp-cache'),
watch           =   require('gulp-watch'),
livereload      =   require('gulp-livereload')
//lr              =   require('tiny-lr'),
//server          =   lr()
;

var config = {
// Source Config
src                 :    'src',                         // Source Directory
src_assets          :    'src/assets',                  // Source Assets Directory
src_fonts           :    'src/assets/fonts',            // Source Fonts Directory
src_images          :    'src/assets/img',              // Source Images Directory
src_javascripts     :    'src/assets/js',               // Source Javascripts Directory
src_stylesheets     :    'src/assets/styles',              // Source Styles Sheets Directory
src_main_scss       :    'src/assets/styles/main.scss',    // Source main.scss
src_main_js         :    'src/assets/scripts/main.js',       // Source main.js
// Destination Config
dist                :    'dist',                        // Destination Directory
dist_assets         :    'dist/assets',                 // Destination Assets Directory
dist_fonts          :    'dist/assets/fonts',           // Destination Fonts Directory
dist_images         :    'dist/assets/img',             // Destination Images Directory
dist_javascripts    :    'dist/assets/js',              // Destination Javascripts Directory
dist_stylesheets    :    'dist/assets/css',             // Destination Styles Sheets Directory
// Auto Prefixer
autoprefix          :    'last 3 version'             // Number of version Auto Prefixer to use
};

gulp.task('styles', function () {
return gulp.src(config.src_main_scss)
.pipe(sass({
outputStyle: 'expanded',
precision: 10,
sourceComments: 'none'
}))
.pipe(autoprefixer(config.autoprefix))
.pipe(gulp.dest(config.dist_stylesheets))
.pipe(livereload())
});

gulp.task('scripts', function () {
gulp.src(config.src_main_js)
.pipe(include())
.pipe(gulp.dest(config.dist_javascripts))
.pipe(livereload())
});

gulp.task('php', function() {
return gulp.src([path.join(config.src, '/**/*.php')])
.pipe(gulp.dest(config.dist))
.pipe(livereload())
});

gulp.task('images', function() {
gulp.src(path.join(config.src_images, '/**/*.png'))
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
.pipe(gulp.dest(config.dist_images))
});

gulp.task('svg', function() {
gulp.src(path.join(config.src_images, '/**/*.svg'))
.pipe(svgmin())
.pipe(gulp.dest(config.dist_images))
});

gulp.task('clean', function() {
del(path.join(config.dist, '/**/*'))
});

gulp.task('watch', function() {
//server.listen(35729, function (err) {
//    if (err) {
//        return console.log(err)
//    };
gulp.watch(path.join(config.src_stylesheets, '/**/*.scss'), ['styles']);
gulp.watch(path.join(config.src_javascripts, '/**/*.js'), ['scripts']);
gulp.watch(path.join(config.src, '/**/*.php'), ['php']);
//});
});

gulp.task('default', function(cb) {
run('build', ['watch'], cb);
});

gulp.task('build', function (cb) {
run('clean', 'styles', 'scripts', 'php', 'images', 'svg', cb);
});

Теперь, если я запускаю «gulp», все работает, однако, когда я захожу на хост apache, живая перезагрузка больше не работает.

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

Я установил плагин live reload и включил его, все еще не работая.

Я пропустил шаг с моим хозяином?

2

gulp gulp-livereload livereload php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Хорошо, я не знаю, что этот Gulpfile обещал вам в первую очередь, но я здесь упускаю две вещи:

Любое подключение к вашему работающему серверу.
Место в вашем HTML-файле, куда вы вставляете Livereload. Livereload должен знать, куда вводиться и просто не работает автоматически из коробки

Это может быть сложно, особенно если у вас уже есть запущенный и работающий сервер, и это требует много настроек. Один инструмент, который может быть легко интегрирован с Gulp и имеет хорошую настройку Livereload из коробки — BrowserSync. Вы можете просто загрузить его и создать прокси на любом работающем сервере. Он также позаботится о вставке фрагмента LiveReload. Я настоятельно рекомендую вам перейти к этому, особенно если вы новичок в этой теме. Я делаю все для тебя 🙂

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

Настройка BrowserSync

Добавьте это куда угодно в свой Gulpfile:

var browserSync = require('browser-sync');

browserSync({
proxy: 'localhost:80',
port: 8080,
open: true,
notify: false
});

(Не забудьте npm install --save-dev browser-sync первый). Это создаст новый сервер, проксируя ваш MAMP и внедряя все, что вам нужно для LiveReload. Откройте свою страницу на localhost:8080 (BrowserSync сделает это для себя), и вы готовы к работе

Добавить перезарядку

Везде, где вы положили livereloadизмените его на

.pipe(browserSync.reload({stream: true}))

Вот так например:

gulp.task('scripts', function () {
return gulp.src(config.src_main_js)
.pipe(include())
.pipe(gulp.dest(config.dist_javascripts))
.pipe(browserSync.reload({stream:true}))
});

Это запустит LiveReload и обновит ваши источники. Убедитесь, что у вас это есть везде, где вы меняете вещи.

Чем ты должен быть в состоянии пойти. Удачи!

Еще кое-что

Пожалуйста, напишите немного return заявление перед каждым gulp.src, Это позволит Gulp узнать, что вы работаете с потоками, что значительно повысит его способность работать с потоками.

1