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