Jump to content

How do you do Live Reloading?


OrganizedFellow
 Share

Recommended Posts

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.

 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

 

  • Like 2
Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

  • 1 month later...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...