When I change some scss file everything seems to work (scss is compiled to css file and the source files are watched):
[21:19:46] Starting 'sass'...
[BS] 1 file changed (principal.css)
[21:19:46] Finished 'sass' after 18 ms
But I need to reload the browser by hand to reflect the changes. This is my gulpfile:
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('default', ['sass'], function() {
browserSync.init({
proxy: "huertajalon/"
});
gulp.watch("./sass/**/*.scss", ['sass']);
gulp.watch("./*.php").on('change', browserSync.reload);
gulp.watch("./style.css").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("sass/principal.scss")
.pipe(sass())
.pipe(gulp.dest("./css"))
.pipe(browserSync.stream());
});
In other cases (for example, when I modify and save style.css) the browser reloads well.
What am I doing wrong? Thanks!
Are you using browser-sync version 2.6.0 or higher, since this is required to use browserSync.stream().
http://www.browsersync.io/docs/api/#api-stream
If not then you should update or you could try browserSync.reload({stream: true}) instead, which was the previous way to handle streams with browser-sync. If I remember correctly.
Try something like this.
gulp.task(default, ['sass'], browserSync.reload);
Also refer to http://www.browsersync.io/docs/gulp/#gulp-reload
Related
I am trying to set up very simple gulp file. I am using sass and browser sync there and I move everything to the build folder. But for unknown reason the browser does not sync.
I tried solutions from many resources but nothing seem to work so far. Maybe some of you would have any idea how to fix that.
var gulp = require('gulp');
var sass = require('gulp-sass');
var bs = require('browser-sync').create();
var reload = bs.reload;
gulp.task('styles', function() {
gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('build/css'))
.pipe(bs.reload({stream:true}));
});
gulp.task('serve', ['styles'], function() {
bs.init({
server: "./build"
});
gulp.watch('./sass/*.scss', ['styles']);
gulp.watch('build/css/*.css').on('change', reload);
gulp.watch("*.html").on('change', reload);
});
gulp.task('default', ['serve']);
My folder structure is:
- build
- css
- index.html
- sass
- index.html
And the command prompt shows this after running gulp:
Thank you so much for any help!
Browsersync works by injecting an asynchronous script tag (<script async>...</script>) right after the <body> tag during initial request. In order for this to work properly the <body> tag must be present.
check this out: https://browsersync.io/docs/#requirements
I am using Gulp to compile my bootstrap.less file into a bootstrap.css file. All the bootstrap LESS files are in a "less" folder and all of the CSS files are in a CSS folder. All of the bootstrap less files are #import'd into bootstrap.less and then that file is compiled to bootstrap.css. However I have one custom.less file that is in the bootstrap LESS folder. I would like to compile into a custom.css file in the CSS folder. I cannot get Gulp to do this. Here is my code.
var gulp = require('gulp');
var less = require('gulp-less');
var browserSync = require('browser-sync').create();
gulp.task('less', function() {
return gulp.src(['./less/bootstrap.less', './less/custom.less'])
.pipe(less())
.pipe(gulp.dest("./css"))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('serve', function(){
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('./less/*.less', ['less']);
gulp.watch(['./**/*.html', './js/custom.js']).on('change',
browserSync.reload);
});
gulp.task( 'default', ['less', 'serve']);
What I usually do is compile all .less or .scss files into css folder. You will end up with a few empty files (a good example would be .less files that contain variables) but on the other hand you can create a gulp task to clear those files out. I use the following code to compile:
return gulp.src("Styles/scss/*.scss")
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest("Styles/css"))
.pipe(reload({stream: true}));
I'm also generating sourcemaps here but you can remove that. If you would like to discover more checkout this post here
Hope this helps ;)
I have a gulp watch task:
gulp.watch([
basePath+'/css/**/*.css'
], ['css']);
This task listens to changes of css files and starts the "css" task.
The css task, uses browserSync to stream the changes:
var gulp = require('gulp'),
browserSync = require('browser-sync');
gulp.task('css', function() {
return gulp.src(basePath+'/css/**/*.css', {'read': false})
.pipe(browserSync.stream());
});
The problem is, when I change only 1 css file, browserSync see's all the css files in the folder (due to gulp.src) and, using web-sockets, streams the changes in the browser for all the files.
[BS] 3 files changed (custom.css, custom2.css, main.css)
This happens even if I change only custom2.css
Now, the question:
How to filter the gulp watch, or CSS task, in order to let browserSync stream only the actual modified files? and not all of them...
Any ideas?
You can invoke gulp.watch() with a glob and callback and use the event passed to the callback to know exactly which css file changed.
gulp.watch(basePath+'/css/**/*.css', function(event) {
gulp.src(event.path, {read: false})
.pipe(browserSync.stream());
});
After changing your watch to this, the css task in your example wouldn't be needed.
I'm new to using gulp and I think I have it setup correctly, but it does not seem to be doing what it should be doing.
My gulpfile.js has
gulp.task('compass', function() {
return gulp.src('sites/default/themes/lsl_theme/sass/**/*.scss')
.pipe(compass({
config_file: 'sites/default/themes/lsl_theme/config.rb',
css: 'css',
sass: 'scss'
}))
.pipe(gulp.dest('./sites/default/themes/lsl_theme/css'))
.pipe(notify({
message: 'Compass task complete.'
}))
.pipe(livereload());
});
with
gulp.task('scripts', function() {
return gulp.src([
'sites/default/themes/lsl_theme/js/**/*.js'
])
.pipe(plumber())
.pipe(concat('lsl.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
// .pipe(stripDebug())
.pipe(uglify('lsl.js'))
.pipe(rename('lsl.min.js'))
.pipe(gulp.dest('sites/default/themes/lsl_theme/js'))
.pipe(sourcemaps.write())
.pipe(notify({
message: 'Scripts task complete.'
}))
.pipe(filesize())
.pipe(livereload());
});
and the watch function
gulp.task('watch', function() {
livereload.listen();
gulp.watch('./sites/default/themes/lsl_theme/js/**/*.js', ['scripts']);
gulp.watch('./sites/default/themes/lsl_theme/sass/**/*.scss', ['compass']);
});
when I run gulp, the result is
[16:14:36] Starting 'compass'...
[16:14:36] Starting 'scripts'...
[16:14:36] Starting 'watch'...
[16:14:37] Finished 'watch' after 89 ms
and no changes are registered.
for file structure, my gulpfile.js is in the root directory and the sass, css, and js are all in root/sites/default/themes/lsl_theme with the sass folder containing the folder 'components' full of partials.
My assumption is that you are on windows? Correct me if I'm wrong.
There is this problem that gulp-notify tends to break the gulp.watch functions. Try commenting out
// .pipe(notify({
// message: 'Scripts task complete.'
// }))
and see if the problem still exists.
If that does fix the issue, a solution from this thread may be helpful.
You can use the gulp-if
plugin in combination with
the os node module
to determine if you are on Windows, then exclude gulp-notify, like
so:
var _if = require('gulp-if');
//...
// From https://stackoverflow.com/questions/8683895/variable-to-detect-operating-system-in-node-scripts
var isWindows = /^win/.test(require('os').platform());
//...
// use like so:
.pipe(_if(!isWindows, notify('Coffeescript compile successful')))
It turns out that a large part of my issue was just simply being a rookie with Gulp. When I removed 'scripts' from my gulp watch it started working.
I then made the connection that it was watching the same directory that it was placing the new concatenated and minified js files in so it was putting the new file, checking that file, and looping over and over causing memory issues as well as not allowing 'compass' to run.
After creating a 'dest' folder to hold the new js everything started working just peachy.
Building myself a gulpfile.js for a WordPress theme. Currently all the JS and CSS is working perfectly, and livereload is reloading on css/js change.
But I also want to refresh the browser whenever a PHP file is changed. I did some searching and found the following snipped which I'm using within my gulpfile.js
gulp.task('watch', function(){
// Listen on port 35729 for LiveReload
server.listen(35729, function (err) {if (err) {return console.log(err) };
gulp.watch("assets/scss/**/*.scss", ['sass']); // Watch and run sass on changes
gulp.watch("assets/js/_*.js", ['javascripts']); // Watch and run javascripts on changes
gulp.watch("assets/img/*", ['imagemin', 'svgmin']); // Watch and minify images on changes
gulp.watch('**/*.php').on('change', function(file) {
util.log('PHP FILES CHANGED!');
server.changed(file.path);
});
});
});
Whenever I change a PHP file I can see "PHP FILES CHANGED!" in the console, but livereload does not update the browser. What am I missing?
Did some further research and testing, and it turns there's no point in using tiny-lr since gulp-livereload does everything. So I changed my tasks to do the reloading by .pipe(livereload()); – and changed my watch task to the following:
gulp.task('watch', function(){
var server = livereload();
gulp.watch('**/*.php').on('change', function(file) {
server.changed(file.path);
util.log(util.colors.yellow('PHP file changed' + ' (' + file.path + ')'));
});
gulp.watch("assets/scss/**/*.scss", ['sass']); // Watch and run sass on changes
gulp.watch("assets/js/_*.js", ['javascripts']); // Watch and run javascripts on changes
gulp.watch("assets/img/*", ['imagemin', 'svgmin']); // Watch and minify images on changes
});
There's a shorter solution that maybe useful to those using gulp-livereload. There's a reload method that can be triggered. Like so:
gulp.task('watch', function(){
livereload.listen();
gulp.watch('source/*.php', livereload.reload);
});