Sunday, 28 May 2017

How do I get BrowserSync + Gulp + Zend MVC Framework to work

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