Sunday, 28 May 2017

BrowserSync Doesn't inject styles - just refreshes - and

I got my BrowserSync installed with Gulp. When runnin gulp in the command line I have my website (http://local.example.com) opened under this URL: http://localhost:8080

When changing any stylesheet I get this output:

[Mon May 29 09:19:20 2017] 127.0.0.1:45076 [200]: /
[09:19:31] Starting 'styles'...
[BS] Reloading Browsers...
[BS] 1 file changed (all.min.js)
[09:19:31] Finished 'styles' after 401 ms
[Mon May 29 09:19:41 2017] 127.0.0.1:45588 [200]: /

This refreshes my page (Which I prefer it injecting styles rather than refreshing the whole page) and doesn't add the style either way after it's refreshed.

This is my Gulpfile.js content for you to examine:

////////////////////////////////////////////////////
// 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: 'http://local.example.com: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 
////////////////////////////////////////////////////

  • Using Apache2 with Ubuntu


via Rick Sanchez

No comments:

Post a Comment