I have a directory structure like this...
--app
-css
custom.css
-sass
custom.scss
-pages
about.html
home.html
--gulpfile.js
--node_modules
--package.json
my gulp file is
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
gulp.task('sass', function () {
return gulp.src('app/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/css/'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass'], function () {
gulp.watch('app/sass/*.scss', ['sass']);
gulp.watch('app/pages/*.html', browserSync.reload);
gulp.watch('app/js/**/*.js', browserSync.reload);
})
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: "app",
index: "pages/home.html"
},
})
})
when i run the watch task i am redirected to localhost:3000 that opens my home.html page. and my browser sync works fine.
but when i right click on about.html file and view it in browser in visual studio, browser sync doesn't work in about.html page. and this page opens as localhost:56060/app/pages/about.html in the browser.
How can i make browser sync working in all html files inside pages directory?
or what should be the url address of the browser to access about.html file?
Your code looks fine, try in browser "chrome" past url adress , ofcourse when in Your CMD console command gulp watch is activated
http://localhost:3000/pages/about.html
Remember if you activated browserSync in your case it is started in folder app , this your localhost:3000 server , something like localhost:56060 it is not your page.
In your html files don't forget in css link add "/" before css folder.
<link rel="stylesheet" href="/css/custom.css">
If you have still issue , try this code in gulp task watch :
gulp.task('watch', ['browserSync', 'sass'], function () {
gulp.watch('app/sass/*.scss', ['sass']);
// gulp.watch('app/pages/*.html', browserSync.reload); // Comment this line
gulp.watch("app/**/*.html").on('change', browserSync.reload); // Try this line
gulp.watch('app/js/**/*.js', browserSync.reload);
})
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: "app",
index: "pages/home.html"
},
})
})
Regards :)
Related
/app
index.html
--/sass
----style.scss
--/css
----style.css
Gulp CLI version 2.0.1 and Local version 4.0.0
Running gulp sass correctly runs the sass function and compiles my sass file.
Running gulp sass:watch starts the watch...
If I change some styles within the style.scss and save the file I get:
but no changes are propagated to css/style.css.
gulp.task('sass', function() {
return gulp.src('./app/sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('./app/css/'))
});
gulp.task('sass:watch', function() {
gulp.watch('./app/sass/*.scss', gulp.series(sass));
});
Any help would be greatly appreciated.
if think you just forgot two ' around 'sass' in gulp.series
gulp.task('sass', function() {
return gulp.src('./app/sass/style.scss')
.pipe(sass())
.pipe(gulp.dest('./app/css/'));
});
gulp.task('sass:watch', function() {
gulp.watch('./app/sass/*.scss', gulp.series('sass'));
});
I’m using a pretty simple setup for Gulp with SASS and BrowserSync.
//require plugins here
// Paths
var styleSRC = './assets/css/style.scss'; // Path to main .scss file.
var styleDestination = './ ';
var styleWatchFiles = './assets/css/**/*.scss';
// BrowserSync
gulp.task('browser-sync', function () {
browserSync.init({
proxy: projectURL,
open: false,
injectChanges: true
});
});
//Task
gulp.task('styles', function () {
gulp.src(styleSRC)
.pipe(sass({
errLogToConsole: true,
}))
.on('error', console.error.bind(console)).pipe(autoprefixer(AUTOPREFIXER_BROWSERS))
.pipe(gulp.dest(styleDestination))
.pipe(browserSync.reload({
stream: true
}));
});
// Watch
gulp.task('default', ['styles', 'browser-sync'], function () {
gulp.watch(styleWatchFiles, ['styles']);
});
The issue is though this setup doesn’t recognize when new partial file is created. So if I create a partial and then add it to style.scss nothing is happening, Sass is not compiled -> so you have manually call the task from the console.
Is it possible to automatically compile Sass when new partial is added?
if you remove './' from the source path it will work the way you would expect it
as far as i know this is a windows only problem
here is a github issue that describes the problem : https://github.com/gulpjs/gulp/issues/1422
should be fixed in gulp 4.x , but thats still in alpha
How do I get gulp browser sync to work with MVC ASP.net? It works fine with .html files but it downloads a blank file when I use .cshtml files.
gulp.task("browser-sync", function () {
browserSync({
server: {
baseDir: "./",
proxy: "localhost",
index: "Areas/Music/Views/Songs/Index.cshtml"
}
});
});
gulp.task("watch", function () {
gulp.watch(["js/*.js", "Content/*.css", "Areas/**/*.cshtml"], ["scripts", "css", "html"]);
});
gulp.task("default", ["scripts", "css", "html", "browser-sync", "watch"]);
Try this:
gulp.task('watch', ['tasks', 'you', 'want', 'to', 'run'], function(){
// sass and js watch functions
gulp.watch('./Views/**/*.cshtml').on('change', browserSync.reload);
});
I'd like to have the same gulpfile.js for my projects where I use a pre-compiler (sass) and for older/smaller projects in pure css.
Also I use browser-sync and I want to inject css into the browser (not reload the whole page).
My following configuration works, i.e. when I edit a sass file, it compiles and injects the compiled css, and when I edit a css file, it injects it correctly. But a little detail is still frustrating me : when I edit a sass file, browser-sync is notified 2 times that the css file has changed. 1 time in the sass watcher and 1 time in the css watcher. It doesn't seem to be a problem for him, since it correctly injects the css in my browser. But this is not very "clean".
I'd like to find a way to do some sort of exclusion for this. Ideally, just with a bit more logic in my coding, without the need to add some other packages like gulp-watch, gulp-if...
var gulp = require('gulp'),
rubySass = require('gulp-ruby-sass'),
sourcemaps = require('gulp-sourcemaps'),
browsersync = require('browser-sync').create();
gulp.task('rubySass', function() {
return rubySass('sources/', {
style: 'expanded',
sourcemap: true
})
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: '/sources'
}))
.pipe(gulp.dest('./css'))
.pipe(browsersync.stream({match: "**/*.css"}));
// If I remove this line, browser-sync is still notified 2 times
// (the console is still showing 2 times "[BS] 1 file changed (main.css)")
// but, moreover, the css is no longer injected : the whole page is reloading.
});
gulp.task('browsersync', function() {
browsersync.init({
server: './',
logConnections: true
});
});
gulp.task('default', ['rubySass', 'browsersync'], function (){
gulp.watch('**/*.html', browsersync.reload);
gulp.watch('**/*.php', browsersync.reload);
gulp.watch('js/**/*.js', browsersync.reload);
gulp.watch('**/*.css', function(file){
console.log("In gulp watch : css");
gulp.src(file.path)
.pipe(browsersync.stream());
});
gulp.watch('./sources/**/*.scss', ['rubySass']).on('change', function(evt) {
console.log("In gulp watch : sass");
});
});
Here's the console output, when saving a sass file :
As we can see, we enter successively in the 2 watchers and browser-sync is saying 2 times "[BS] 1 file changed (main.css)".
Since your SASS always compiles to .css you just need to watch for changes in your .css files. It will fire on SASS change anyway (because .css will be generated and gulp.watch triggered by this .css change). Otherwise you can use exclusions in gulp.watch() and use some kind of pattern (ex. subdirectory) to identify .css files generated from SASS. You can try this one:
var gulp = require('gulp'),
rubySass = require('gulp-ruby-sass'),
sourcemaps = require('gulp-sourcemaps'),
browsersync = require('browser-sync').create();
gulp.task('rubySass', function() {
return rubySass('sources/', {
style: 'expanded',
sourcemap: true
})
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(sourcemaps.write('maps', {
includeContent: false,
sourceRoot: '/sources'
}))
// note the destination change here
.pipe(gulp.dest('./css/sass')) // note the destination change here
.pipe(browsersync.stream({match: "**/*.css"}));
});
gulp.task('browsersync', function() {
browsersync.init({
server: './',
logConnections: true
});
});
gulp.task('default', ['rubySass', 'browsersync'], function (){
gulp.watch('**/*.html', browsersync.reload);
gulp.watch('**/*.php', browsersync.reload);
gulp.watch('js/**/*.js', browsersync.reload);
// added exclusion for the CSS files generated from SASS
gulp.watch(['**/*.css', '!./css/sass/**/*.css'], function(file){
console.log("In gulp watch : css");
gulp.src(file.path)
.pipe(browsersync.stream());
});
gulp.watch('./sources/**/*.scss', ['rubySass']).on('change', function(evt) {
console.log("In gulp watch : sass");
});
});
I am trying to use BrowserSync & sass to edit the style.css from a Wordpress site.
I'd like to inject the changes into the page and reload it automatically.
So far I tried a lot of variants to the gulpfile.js code without success -- the scss files compile into style.css (ok), but the page doesn't reflect the changes.
Here is my code:
var gulp = require('gulp'),
sass = require('gulp-sass'),
bs = require('browser-sync');
// -- sass
//
gulp.task('sass', function () {
return gulp
.src('src/scss/*.scss')
.pipe(sass({ includePaths: [ 'src/scss/include' ] }))
.pipe(gulp.dest('wp-content/themes/my-theme'))
.pipe(bs.reload({ stream: true }));
});
// -- serve
//
gulp.task('serve', [ 'sass' ], function() {
bs({
proxy: "http://my-site.com",
files: "wp-content/themes/my-theme/style.css"
});
gulp.watch( "src/scss/**/*.scss", ['sass'] );
});
For the moment, I resorted to use the awkward Chrome workspace override, but the workflow is not as smooth as it could be.
Thanks in advance