gulp-livereload working with apache 2.4 web server (PHP HTML CSS JS) #122

israndi · 2016-10-28T07:41:14Z

gulp-livereload working with apache 2.4 web server (PHP HTML CSS JS)

Make sure mod_filter and mod_substitute are available, you have compiled versions of them available to Apache 2.4.

This is to do script insertion on every tag <head> html page.

In your Apache configuration file (httpd.conf on Windows and likely apache2.conf on Linux, depending on distro), make sure uncommented this:

LoadModule filter_module modules/mod_filter 
LoadModule substitute_module modules/mod_substitute

Add the following to your site configuration in Apache to do script insertion

    <Location "/">
        AddOutputFilterByType SUBSTITUTE text/html
        Substitute "s|<head>|<head><script type=\"text/javascript\" src=\"http://localhost:35729/livereload.js?snipver=1\"></script>|ni"
    </Location>

reference http://feedback.livereload.com/knowledgebase/articles/86180-how-do-i-add-the-script-tag-manually-
and auto insert script by apache web server to modified tag html, http://httpd.apache.org/docs/2.4/mod/mod_substitute.html http://httpd.apache.org/docs/2.4/mod/mod_filter.html

If your web site is running on another server, you need to specify the IP address of your local computer instead:

    src=\"http://192.168.0.1:35729/livereload.js?snipver=1\"

However, if you use Apache virtual hosts, you will add these lines to whichever virtual host container(s) you want to have the script load for (that is, for every site you want to monitor). For example:

    <VirtualHost *:80> 
        ServerName example.org 

        ServerAlias www.example.org 
        DocumentRoot "/path/to/file" 

        <Location / > 
            AddOutputFilterByType SUBSTITUTE text/html 
            Substitute "s|<head>|<head>Substitute "s|<head>|<head><script type=\"text/javascript\" src=\"http://localhost:35729/livereload.js?snipver=1\"></script>|ni" 
        </Location> 
    </VirtualHost>

@node.js and npm at project directory:

Do > npm init
Do > npm install gulp --sav-dev
Do > npm install gulp-livereload --sav-dev
Do > npm install gulp-open --sav-dev
Make gulpfile.js like this (you can modified as you need):

        var gulp = require('gulp'),
              livereload = require('gulp-livereload'),
              open = require('gulp-open');

        /* Watch 
        ================================= */
        gulp.task('html', function () {
            gulp.src('/path/to/file/**/*.html').pipe(livereload({ start: true }));
        });

        gulp.task('css', function () {
            gulp.src('/path/to/file/**/*.css').pipe(livereload({ start: true }));
        });

        gulp.task('js', function () {
            gulp.src('/path/to/file/**/*.js').pipe(livereload({ start: true }));
        });

        gulp.task('php', function () {
            gulp.src('/path/to/file/**/*.php').pipe(livereload({ start: true }));
        });

        gulp.task('watch', function(){
          livereload.listen();
            gulp.watch(['/path/to/file/**/*.html'],['html']);
            gulp.watch(['/path/to/file/**/*.css'],['css']);
            gulp.watch(['/path/to/file/**/*.js'],['js']);
            gulp.watch(['/path/to/file/**/*.php'],['php']);
        });

        /* Open Browser 
        ================================= */
        gulp.task('uri', function(){
          gulp.src(__filename)
          .pipe(open({uri: 'http://localhost/index.html'}));
        });
        /* you can use localhost or ip address
        ================================= */

        gulp.task('serve', [ 'watch', 'uri' ]);
        gulp.task('default', [ 'serve']);

restart apache
run gulp ---> from project directory
that is it and work for me.

The text was updated successfully, but these errors were encountered:

israndi changed the title ~~gulp-livereload working with apache 2.4 web server~~ gulp-livereload working with apache 2.4 web server (PHP HTML CSS JS) Oct 28, 2016

dmitriz mentioned this issue May 17, 2022

[Snyk] Security upgrade tiny-lr from 0.1.7 to 1.0.5 dmitriz/gulp-livereload#2

Open

dmitriz mentioned this issue Jan 10, 2023

[Snyk] Fix for 1 vulnerabilities dmitriz/gulp-livereload#4

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

gulp-livereload working with apache 2.4 web server (PHP HTML CSS JS) #122

gulp-livereload working with apache 2.4 web server (PHP HTML CSS JS) #122

israndi commented Oct 28, 2016 •

edited

Loading

gulp-livereload working with apache 2.4 web server (PHP HTML CSS JS) #122

gulp-livereload working with apache 2.4 web server (PHP HTML CSS JS) #122

Comments

israndi commented Oct 28, 2016 • edited Loading

gulp-livereload working with apache 2.4 web server (PHP HTML CSS JS)

israndi commented Oct 28, 2016 •

edited

Loading