How do you do Live Reloading?

[OrganizedFellow]

I found this little gem just the other day: https://github.com/felippe-regazio/php-hot-reloader

 

How do you do live reloading?

[louisstephens]

I use gulp with browser-sync in my current workflow. I really like it as I can specify what files extensions (php, css, etc etc) to watch for changes and once it detects a file change, it automatically reloads the page. I also will be using gulp-cache for cache busting (for changes with my scss/css). So far I have been very happy with the results.

 

[OrganizedFellow]

1 hour ago, louisstephens said:

I use gulp with browser-sync in my current workflow

I never could get that to work reliably. Never figured out why.

 

[pwired]

Quote

this gem php-hot-reloader

Good find ! Now I can use this together with my browser console to see what I am doing.
Thanks for posting.

 

[louisstephens]

13 hours ago, OrganizedFellow said:

I never could get that to work reliably. Never figured out why.

 

To be honest, it also took me a while to get it all working. Apparently I started using it with an outdated syntax of gulp (1 version behind) and when I went to add some new node modules, everything just blew up in my face. 

If you are interested, I would be more than happy to share my gulp file with you or anyone.

[OrganizedFellow]

5 hours ago, louisstephens said:

If you are interested, I would be more than happy to share my gulp file with you or anyone.

Surely please. that would be most helpful when I get back into using Gulp.

[louisstephens]

Sure thing! Here you go:

var gulp = require("gulp");
var sass = require("gulp-sass");
var browserSync = require("browser-sync").create();
var autoprefixer = require("autoprefixer");
var rename = require("gulp-rename");
var cssnano = require("cssnano");
var postcss = require("gulp-postcss");
var minify = require("gulp-minify");
//var bourbon = require("bourbon").includePaths;
//var neat = require("bourbon-neat").includePaths;

// Put this after including our dependencies
var paths = {
styles: {
    // By using styles/**/*.sass we're telling gulp to check all folders for any sass file
        src: "./src/scss/*.scss",
    // Compiled files will end up in whichever folder it's found in (partials are not compiled)
        dest: "./dist/css/"
},php: {
        src: './*.html',
},
scripts: {
    src: "./src/js/*.js",
    dest: "./dist/js/"
}



// Easily add additional paths
// ,html: {
//  src: '...',
//  dest: '...'
// }
};




function style() {
    return gulp
    .src(paths.styles.src)
        .pipe(sass({ outputStyle: "expanded" }))
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(rename({ suffix: ".min" }))
        .pipe(postcss([autoprefixer({ browsers: ['> 1%', 'last 3 versions', 'Firefox >= 20', 'iOS >=7'] }), cssnano()]))
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(browserSync.stream())


}
exports.style = style;


function php() {
    return gulp
        .src(paths.php.src)
        .pipe(browserSync.stream())
}
exports.php = php;


function script() {
    return gulp
    .src(paths.scripts.src)
    .pipe(minify({noSource: true}))
    .pipe(gulp.dest(paths.scripts.dest))
    .pipe(rename({ suffix: ".min" }))

}

exports.script = script;





function watch() {


    browserSync.init({
      // You can tell browserSync to use this directory and serve it as a mini-server
      port: 8181,
        proxy: "http://localhost:8888/project-folder/"
      // If you are already serving your website locally using something like apache
      // You can use the proxy setting to proxy that instead
      // proxy: "yourlocal.dev"
    });


    //I usually run the compile task when the watch task starts as well
    style();
    script();

    gulp.watch(paths.styles.src, style);
    gulp.watch(paths.scripts.src, script);
    gulp.watch(paths.php.src, php);






}
exports.watch = watch

 

[BillH]

Prepros (https://prepros.io/) works well for me for most things.

It's (much) less customizable than gulp and similar tools, but makes life simple, and in practice I've rarely wanted it to do something it couldn't - though obviously YMMV. It can slow up when watching large numbers of files, and the FTP could be developed, but although it may not be quite as cool as gulp etc, it saves me a good amount of time!

 

[wbmnfktr]

On 12/21/2020 at 9:35 PM, OrganizedFellow said:

How do you do live reloading?

Similar to @BillH I use Prepros to build my static versions (which I keep in each and every step of a project).

YES... There is in 95% of all projects a static copy/version of all my projects. Just to be able to change and tweaks things even without any database and PW instance.
It makes devlife so much easier - at least on my side.

New projects will be build totally static before I even start using PW.

Somewhere here in the forums I posted a detailed workflow I use for a couple of years now. Sadly I can't find it right now.

So... in short: no livereload in PW projects, only in static versions.

[OrganizedFellow]

On 12/23/2020 at 3:41 PM, BillH said:

Prepros (https://prepros.io/) works well for me for most things.

 

What's the catch? Regular price is $30 ? hhmm, still gonna give it a shot.

[OrganizedFellow]

I keep searching and I keep finding.

Here's another method but as an extension to VS Code.

 

[kongondo]

8 hours ago, OrganizedFellow said:

but as an extension to VS Code.

This will not work with PHP, so no ProcessWire if that was your intention.

[OrganizedFellow]

1 hour ago, kongondo said:

This will not work with PHP, so no ProcessWire if that was your intention.

Very true,

[wbmnfktr]

11 hours ago, OrganizedFellow said:

What's the catch? Regular price is $30 ? hhmm, still gonna give it a shot.

As it says... the trial is unlimited in terms of time. Sometimes a message pops up but that's it. For testing purposes absolutely fine.

[dotnetic]

I use a combination of gulp and BrowserSync for live reloading.

Maybe take a look at my setup repo jmartsch/acegulp4: A set of gulp tasks with JS transpilation, webpack, SVG Sprites and minification (github.com)

It has the following features:

• Gulp 4
• Webpack 5 with Babel
• SVG Sprites with minification
• Browsersync with proxy for existing webservers
• File revving
• JavaScript transpilation with Babel and minification
• SCSS compilation with minification and sourcemaps
   

If you like it, leave a star, or ask me questions.

Edit: If you didn't manage to get BrowserSync working, the cause could be, that you have to proxy your already existing webserver.

[OrganizedFellow]

On 12/23/2020 at 3:41 PM, BillH said:

Prepros (https://prepros.io/) works well for me for most things.

I FINALLY got around to testing Prepros out, and as a live reload, work well - quick!

Thanks for the recommend.

[totoff]

On 12/21/2020 at 9:35 PM, OrganizedFellow said:

How do you do live reloading?

cmd+r on my mac. works great!