PHP Gulp Livereload

Question

I have a gulp file that I have grabbed from here and modified to this:

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);
});

Now if I run 'gulp' everything works however when I go the my apache host the live reload is no longer working.

I am not that familiar with live reload so please walk me through any solutions.

I have installed live reload plugin and turned it on, still not working.

Am I missing a step with my host?

Answer 1

Alright, I don't know what this Gulpfile promised you in the first place, but I am missing two things here:

• Any connection to your up-and-running server.
• The place in your HTML file where you insert Livereload. Livereload needs to know where to be injected and just doesn't work automatically out of the box

This can be tricky, especially when you already have a server up and running, and it requires a lot of configuration. One tool which can be integrated with Gulp rather easily and does have a good Livereload setup out of the box is BrowserSync. You can just boot it up and create a proxy to any running server that you have. It will also take care of inserting the LiveReload snippet. I'd strongly suggest you switch to that one, especially if you are pretty new to that topic. I does just all for you :-)

I wrote about BrowserSync here, but here are the changes you would have to do to make it work:

Setup BrowserSync

Add this anywhere to your Gulpfile:

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

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

(Don't forget to npm install --save-dev browser-sync first). This will create a new server, proxying your MAMP and injecting everything you need for LiveReload. Open your page at localhost:8080 (BrowserSync would do it for yourself), and you are ready to go

Add a reload-Call

Everywhere where you put livereload, change it to

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

Like this for example:

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

This will trigger LiveReload and will refresh your sources. Make sure that you have it everywhere, where you change stuff.

Than you should be able to go. Good luck!

One more thing

Please write a little return statement before every gulp.src. This will let Gulp know that you are working with streams, making it a lot more able to work with streams.