Open
Description
gulp-livereload working with apache 2.4 web server (PHP HTML CSS JS)
@apache Config:
- 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.
Metadata
Metadata
Assignees
Labels
No labels