Gulp + proxy = no injection #26
Comments
|
So it does a full page reload every time your sass task runs? |
|
May I suggest a change in how the var gulp = require('gulp'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
sass = require('gulp-sass'),
path = require('path'),
minifyCSS = require('gulp-minify-css'),
autoprefixer = require('gulp-autoprefixer'),
rename = require("gulp-rename");
filter = require("gulp-filter");
var config = {
// 1. inform browser-sync to watch compiled *.css files instead of *.scss sass files
files: "web-app/css/**/*.css",
proxy: "localhost:80"
}
// browser-sync task for starting the server.
gulp.task('browser-sync', function() {
browserSync(config)
});
// Sass task, will run when any SCSS files change & BrowserSync
// will auto-update browsers
gulp.task('sass', function () {
return gulp.src('web-app/css/**/*.scss')
.pipe(sass())
.pipe(autoprefixer('last 2 version'))
.pipe(minifyCSS({keepSpecialComments:0}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('web-app/css/'));
// 2. you don't need these anymore, since browser-sync will be
// triggered once the sass compilation task writes to web-app/css/ folder
// .pipe(filter('web-app/css/**/*.css'))
// .pipe(reload({stream:true}));
});
// Default task to be run with `gulp`
gulp.task('default', ['sass','browser-sync'], function () {
gulp.watch("web-app/css/**/*.scss", ['sass']);
});Details: We then can remove the instruction to tell browser-sync to reload upon completion of the So the new build flow would go something like this:
Drawback: depending on how your pipe was written, it might take a while for your Give this a try and let us know if it still do a full page reload. @shakyShane: What is the actual behaviour if the whole watched folder changed at the same time? Would it still inject or would it do a page reload? I'm expecting it to be able to do an injection, I'm not sure. |
|
@shakyShane - yes, it WAS doing a full reload. However, this is my code now: var gulp = require('gulp'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
sass = require('gulp-sass'),
path = require('path'),
minifyCSS = require('gulp-minify-css'),
autoprefixer = require('gulp-autoprefixer'),
rename = require("gulp-rename");
var config = {
proxy: "ggdev.elasticbeanstalk.com"
}
// browser-sync task for starting the server.
gulp.task('browser-sync', function() {
browserSync(config)
});
// Sass task, will run when any SCSS files change & BrowserSync
// will auto-update browsers
gulp.task('sass', function () {
return gulp.src('web-app/css/**/*.scss')
.pipe(sass())
.pipe(autoprefixer('last 2 version'))
.pipe(minifyCSS({keepSpecialComments:0}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('web-app/css/'))
.pipe(reload({stream:true}));
});
// Default task to be run with `gulp`
gulp.task('default', ['sass','browser-sync'], function () {
gulp.watch("web-app/css/**/*.scss", ['sass']);
});I got rid of the files option and the gulp-filter, and now it injects...but only after two saves. The first save doesnt pick it up...almost like its firing the injection before the css can compile. Any thoughts? Thanks again for you guys help on this! |
|
@jessewallace Here's a repo with something that I think is close to your project with a working gulp recipe: Try to run the project + gulp and see if it works for you. Try editing |
|
@jessewallace oh btw, is it possible to show the logs from the terminal when you run Something like this: |
|
@jessewallace - is this still an issue for you? |
|
@onaliugo - Try this gulp.task('_serve', function(){
return browserSync.init(null, {
proxy: "http://app.xxx.dev/",
startPath: "/index_dev.php",
files: "sass/*.css"
});
});
gulp.task('_sass', function() {
return gulp.src('sass/main.scss')
.pipe(sass())
.pipe(gulp.dest('sass/'));
});
gulp.task('_watch', function(){
gulp.watch('sass/**', ['_sass']);
});
gulp.task('_test', [
'_sass',
'_serve',
'_watch'
]); |
|
@shakyShane Thanks for your answer, but it didn't reload the browser or inject CSS. However, doing this worked ! gulp.task('_serve', function(){
return browserSync.init("sass/**", {
proxy: "http://app.wisembly.dev/",
startPath: "/index_dev.php"
});
}); |
|
Thanks, @onaliugo |
|
Not getting injection either, tried all options on this page. proxying on localhost:8080 |
|
@sogko i'm using your config bu im only recieving following in ther terminal it doesn't say " [BS] Injecting file into all connected browsers... " |
|
So I had the same problem: browser sync was doing a full reload because the sourcemap files changed at the same time as the css files. I filtered the *.map files and it injects the css without full reload now. |
|
Having the same issue.
For me this snippet fails because my html also has tag in it, so it attempts to load the js file from the external, rather than local server. I believe the auto-generated snippet should be updated to the following for it to work correctly across all configurations.
I believe this may be the same issue BrowserSync/browser-sync#453 |
|
Per @ocombe - My problem was also an issue with |
|
Can't get this working. Tried all the different code examples. Best I get is page reload. |
|
Oh well it seems that BrowserSync does not support @import and that's what Drupal is using if aggregation is not enabled. Here's the issue and fix: BrowserSync/browser-sync#534 |
|
anyone who struggle with map file injection causing full reload this injects only css file to it so no full refresh with this |
|
zirho, thanks! It helps me! |
|
I've had a similar problem, although the cause is (perhaps) different. I'm putting this here as this is the top link when I search for "browsersync not injecting css" in the hope it's helpful to others. My gulpfile is using the connect-modrewrite to rewrite links - it ensures that all URLs are routed through the index.html file (important for Angular). It appears that, when injecting the compiled CSS in, it's routing the CSS through the index.html file. The browser doesn't do this, so it's not immediately apparent there's a problem. See task below: var modRewrite = require("connect-modrewrite");
gulp.task("default", ["clean", "bundle", "templates:watch", "sass"], function () {
browserSync.init({
open: false,
server: {
baseDir: "./src",
middleware: [
modRewrite([
"^\/assets/(.*) /assets/$1 [L]",
"!\\.\\w+$ /index.html [L]"
])
]
}
});
gulp.watch(src.sass, ["sass"]);
gulp.watch(src.html, ["templates:watch"])
.on("change", reload);
});By adding |
|
Adding .on("change", reload) fixed my issus. gulp.task( 'watch', ['browser-sync'], function() {
gulp.watch( watch.styles, [ 'styles' ] );
gulp.watch( watch.html, [ 'render-html' ] ).on("change", reload );
gulp.watch( watch.scripts, [ 'scripts' ] ).on("change", reload );
}); |
|
I've done all things I could ever find and for me it still doesn't work:
I getting new tab opened with a pop-up saying "Connected to browsersync" but still on any style change I don't get any reload or anything. |
|
@Onotoley for a Drupal setup you can find a lot of info here Switch current omega sub-theme to LibSass. No need for any Drupal module. I have provided step to step instruction on comment 20. Plus a lot of info by other guys. |
|
Same here. No longer works, though the browser shows "Injected" message. Have to hit reload each time to see the changes. Using the latest BS 2.18.8. Had to update my gulp task to do the hard reload instead of gulp.src('dotnet/core/website/Mvc/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('build'))
.on('end', () => {
bs.reload();
}) |
Hey all,
I have my Gulp task properly preprocessing my files, but it's not injecting the CSS. It's actually firing a full page reload.
Some background:
I'm using gulp-sass 0.7.2 and browser-sync 1.3.5
Thanks for any help on this, guys. I'm a UI/UX guy by trade, and this is pretty outside of my realm of comfort :)
The text was updated successfully, but these errors were encountered: