Перезагрузка PHP Gulp Livereload

У меня есть gulp-файл, который я взял здесь и изменил так:

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 и включил его, но он все еще не работает.

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


person Otis Wright    schedule 29.04.2015    source источник
comment
Дайте мне некоторую информацию: ваш Apache запущен и работает... можете ли вы сказать мне порт и IP? Это на локальном хосте: 8080?   -  person ddprrt    schedule 30.04.2015
comment
Использование порта MAMP — 80. Использование пользовательского хоста.   -  person Otis Wright    schedule 01.05.2015


Ответы (1)


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

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

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

Я писал о 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 узнать, что вы работаете с потоками, что сделает его более способным работать с потоками.

person ddprrt    schedule 01.05.2015
comment
Спасибо, звучит действительно хорошо, но что вы подразумеваете под оператором возврата для потоков? Извините :( очень новичок в этом. - person Otis Wright; 02.05.2015
comment
Посмотрите на последний пример, который я написал... вы видите, что перед gulp.src есть ключевое слово return. Это означает, что ваша функция фактически возвращает поток, с которым может работать Gulp, а не просто выполняется. Это незначительная деталь, но абсолютно полезная, когда вы идете параллельно :-) - person ddprrt; 02.05.2015
comment
Большое спасибо за это! Единственная проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я запускаю свою задачу наблюдения, она пытается открыть localhost:8080, но затем перенаправляет на мой внутренний IP-адрес без порта. Если я затем добавлю :8080, все будет работать нормально, но это перенаправление странное. Любые идеи? - person JacobTheDev; 28.04.2016
comment
Не берите в голову! Мне просто нужно было изменить open: true на open: "external". Я потратил массу времени, пытаясь отследить, как это сделать, большое спасибо за четкий и лаконичный ответ! - person JacobTheDev; 28.04.2016