PHP Gulp Livereload -
i have gulp file have grabbed here , modified 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 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 run 'gulp' works when go apache host live reload no longer working.
i not familiar live reload please walk me through solutions.
i have installed live reload plugin , turned on, still not working.
am missing step host?
alright, don't know gulpfile promised in first place, missing 2 things here:
- any connection up-and-running server.
- the place in html file insert livereload. livereload needs know injected , doesn't work automatically out of box
this can tricky, when have server , running, , requires lot of configuration. 1 tool can integrated gulp rather , have livereload setup out of box browsersync. can boot , create proxy running server have. take care of inserting livereload snippet. i'd suggest switch one, if pretty new topic. :-)
i wrote browsersync here, here changes have make work:
setup browsersync
add anywhere gulpfile:
var browsersync = require('browser-sync'); browsersync({ proxy: 'localhost:80', port: 8080, open: true, notify: false });
(don't forget npm install --save-dev browser-sync
first). create new server, proxying mamp , injecting need livereload. open page @ localhost:8080
(browsersync yourself), , ready go
add reload-call
everywhere put livereload
, change to
.pipe(browsersync.reload({stream: true}))
like 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 trigger livereload , refresh sources. make sure have everywhere, change stuff.
than should able go. luck!
one more thing
please write little return
statement before every gulp.src
. let gulp know working streams, making lot more able work streams.
Comments
Post a Comment