I have a website hosted to Ubuntu (and working locally on Ubuntu).
I have just started working with Gulp build system and I am a stuck for half a day trying to set up "BrowserSync".
Following this youtube tutorial [25:00] explaining how to set BrowserSync on a NodeJS server (port 3000) - which isn't exactly my case.
Following this tutorial: https://fettblog.eu/php-browsersync-grunt-gulp/
Suggesting to use a package called "gulp-connect-php" (which I'm not quite sure what is it doing to get the job done)
My local URL for the website is: http://local.example.com
and the main .php file within my websites files in located inside public/
.
This is my current Gulpfile.js
- Which I am not sure how to set up the PHP connect task and BrowserSync:
////////////////////////////////////////////////////
// Required Modules
////////////////////////////////////////////////////
var gulp = require('gulp'),
php = require('gulp-connect-php'),
uglify = require('gulp-uglify'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
plumber = require('gulp-plumber'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
concat = require('gulp-concat'),
rename = require('gulp-rename');
////////////////////////////////////////////////////
// END Required Modules
////////////////////////////////////////////////////
////////////////////////////////////////////////////
// HTML Task - When HTML changes - update the bowser
////////////////////////////////////////////////////
gulp.task('html', function(){
gulp.src([
'application/modules/**/*.phtml',
'application/modules/**/**/*.phtml',
'application/modules/**/**/**/*.phtml',
'application/modules/**/**/**/**/*.phtml',
]);
});
////////////////////////////////////////////////////
// END HTML Task
////////////////////////////////////////////////////
////////////////////////////////////////////////////
// Styles Task
////////////////////////////////////////////////////
gulp.task('styles', function() {
return gulp.src([
'public/static/rcss/bootstrap.min.css',
'public/static/rcss/style.css',
'public/static/rcss/responsive.css',
'public/static/rcss/font-awesome.min.css',
'public/static/rcss/yamm.css'
])
.pipe( plumber() )
// .pipe(sass({ style: 'expanded' })) // Don't have SASS here.
// .pipe(autoprefixer({ // Currently doesn't work - will work with SASS if installed in the future.
// browsers: ['last 4 version']
// }))
.pipe( gulp.dest('public/static/rcss/finalCSS') )
.pipe( rename( {suffix: '.min'} ) )
.pipe( minifycss() )
// .pipe(uglify()) // ^ same as minifycss() actually...
.pipe( concat('all.min.js') )
.pipe( gulp.dest('public/static/rcss/finalCSS') )
.pipe( reload( { stream: true } ) );
});
////////////////////////////////////////////////////
// END Styles Task
////////////////////////////////////////////////////
////////////////////////////////////////////////////
// PHP Connect Task
////////////////////////////////////////////////////
gulp.task('php', function() {
php.server({
base: 'public',
port: 8010,
keepalive: true
});
});
////////////////////////////////////////////////////
// END Task
////////////////////////////////////////////////////
////////////////////////////////////////////////////
// Browser-Synd Task
////////////////////////////////////////////////////
gulp.task('browser-sync',['php'], function() {
browserSync({
proxy: '127.0.0.1:8010',
port: 8080,
open: true,
notify: false
});
});
////////////////////////////////////////////////////
// END Browser-Synd Task
////////////////////////////////////////////////////
////////////////////////////////////////////////////
// Scripts Task
////////////////////////////////////////////////////
gulp.task('scripts', function() {
/*gulp.src([''])
.pipe(uglify())
.pipe(gulp.dest(''));*/
});
////////////////////////////////////////////////////
// END Scripts Task
////////////////////////////////////////////////////
////////////////////////////////////////////////////
// Watch Task
////////////////////////////////////////////////////
gulp.task('watch', function(){
// Listen to CSS changes:
gulp.watch('public/static/rcss/*.css', ['styles']);
// Listen to Javascript code changes:
gulp.watch('public/static/*.js', ['scripts']);
// Listen to HTML changes:
gulp.watch('application/modules/**/*.phtml', ['html']);
gulp.watch('application/modules/**/**/*.phtml', ['html']);
gulp.watch('application/modules/**/**/**/*.phtml', ['html']);
gulp.watch('application/modules/**/**/**/**/*.phtml', ['html']);
// Listem to index.php
gulp.watch(['public/*.php'], [reload]);
});
////////////////////////////////////////////////////
// END Watch Task
////////////////////////////////////////////////////
////////////////////////////////////////////////////
// Default Task
////////////////////////////////////////////////////
gulp.task( 'default', [ 'scripts', 'styles', 'html', 'browser-sync', 'watch'] );
////////////////////////////////////////////////////
// END Default Task
////////////////////////////////////////////////////
When running in the terminal gulp
, I get an error message pointing on php = require('gulp-connect-php'),
- commenting it out get't all the rest working with no problem.
myubuntuuser@myubuntuuser-874X:/var/www/example$ gulp
/var/www/example/node_modules/gulp-connect-php/index.js:16
[...arguments].forEach((x) => { this[x] = Symbol(x) });
^^^
SyntaxError: Unexpected token ...
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object.<anonymous> (/var/www/example/gulpfile.js:5:15)
at Module._compile (module.js:410:26)
at Object.Module._extensions..js (module.js:417:10)
via Rick Sanchez
No comments:
Post a Comment