search

gulp-community / gulp-livereload

gulp plugin for livereload
768 stars 67 forks source link

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

Open israndi opened 8 years ago

israndi commented 8 years ago

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

@Apache Config: 1) 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.

2) 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

3) 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: 1) Do > npm init 2) Do > npm install gulp --sav-dev 3) Do > npm install gulp-livereload --sav-dev 4) Do > npm install gulp-open --sav-dev 5) 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']);

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