I'm on windows, basically, browsersync is suppose to detect and inject css files into the browser when any of the css files changes.
Here is the gulp file...
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('serve', function() {
browserSync.init({proxy: "localhost:3000"});
gulp.watch("public/stylesheets/**/*", ['css']);
});
gulp.task('css', function() {
return gulp.src("public/stylesheets/**/*").pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
in index.html i see both css file is being loaded, script tag by browsersync gets added.
But it simply doesn't work. It worked for 1 day, then it never did.
Related
So I can compile scss to css fine.
However, whenever I change anything in my scss file it has no effect on the page unless I build styles.
My gulp file:
var gulp = require('gulp');
var sass = require('gulp-sass');
var concatCss = require('gulp-concat-css');
// Gulp watches
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass']); // Sass watch
// gulp.watch('dist/css/main.css');
});
// Sass compiler
gulp.task('sass', function() {
return gulp.src('app/scss/**/*.scss')
.pipe(sass()) // Convert Sass to CSS
.pipe(gulp.dest('app/css'))
});
// Compile css files
gulp.task('styles', function () {
return gulp.src('app/css/**/*.css')
.pipe(concatCss('main.css'))
.pipe(gulp.dest('dist/css'));
});
/** Default builds **/
// Build
gulp.task('build', ['styles']);
// Watch and build changes
gulp.task('default', ['build', 'watch']);
My index.html file linked to my dist css file is this correct also?
<link rel="stylesheet" type="text/css" href="dist/css/main.css">
All that keeps happening is I gulp watch files okay but if I change anything (something simple like body background colour) nothing happens. Not even on hard refresh. I have to gulp build styles. I am new to gulp/learning but surely building styles after every change cannot be right?
Thank you for any suggestions. I know I asked about compiling, I worked out why that wasn't working, but I've been going around in circles with this one.
I think what happens is that the watch task of gulp is only compiling the css from sass, but not concatenating the css in dist/css/main.css.
Add the task styles to the watch method of gulp and try again:
// Gulp watches
gulp.task('watch', function() {
gulp.watch('app/scss/**/*.scss', ['sass', 'styles']); // Sass watch
});
Hope this helps! :)
I have an app is in iis, it is an app made in angularjs and webapi C # 2.0, I would like to create a task that updates the browser as soon as I save any js file.
Version of gulp: 3.9.1
gulp.task('livereload', function () {
gulp.watch(config.files.js);
});
gulp-livereload
A lightweight gulp plugin for livereload to be used with the
livereload chrome extension or a livereload middleware.
Simple to setup:
var gulp = require('gulp'),
less = require('gulp-less'),
livereload = require('gulp-livereload');
gulp.task('less', function() {
gulp.src('less/*.less')
.pipe(less())
.pipe(gulp.dest('dist'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('less/*.less', ['less']);
});
Browsersync
There's no official Browsersync plugin for Gulp, because it's not
needed! You simply require the module, utilise the API and configure
it with options.
The new cool kid, most have already moved to it.
Streams are supported in Browsersync, so you can call reload at
specific points during your tasks and all browsers will be informed of
the changes. Because Browsersync only cares about your CSS when it's
finished compiling - make sure you call .stream() after gulp.dest.
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass');
// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {
browserSync.init({
server: "./app"
// or
// proxy: 'yourserver.dev'
});
gulp.watch("app/scss/*.scss", ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
});
// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
return gulp.src("app/scss/*.scss")
.pipe(sass())
.pipe(gulp.dest("app/css"))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
For a manual reload:
// ...
var reload = browserSync.reload;
// Save a reference to the `reload` method
// Watch scss AND html files, doing different things with each.
gulp.task('serve', function () {
// Serve files from the root of this project
browserSync.init({/* ... */});
gulp.watch("*.html").on("change", reload);
});
Why Browsersync is better?
It is not constrained to a single device, it works across desktop and
mobile devices at the same time. It will update code changes,
synchronize scroll positions and form inputs automatically across all
browsers and devices.
After changing my project to be organized into src/ and dist/ folders, my changes aren't being compiled and my browsersync task is no longer reloading the page. If I change the color of a div for instance, the color is not updated even if I stop and restart the gulp task. So my question is, how do I change my gulp tasks to watch for changes in the new file structure I am using, and how do I trigger the reload task once the watch task recognizes a change to a file? I think the reload task works, on a previous working version of this gulpfile gulp.watch was working so it doesn't appear to be a problem with that. I tried changing gulp.watch to browserSync.watch as per this answer but that didn't fix it.
I'm guessing this is a problem with my watch task or the browsersync.init but I'm totally stumped.
To be clear, I am making a static webpage using Jade, Bourbon Neat, SCSS, Gulp, and Browsersync.
Here's a link to the full GitHub repo for this project if that helps!
This is my current file structure:
/
dist/
css/
js/
index.html
node_modules/
src/
jade/
js/
scss/
.gitignore
gulpfile.js
package.json
And this is my gulpfile.js:
// VARIABLES
var gulp = require('gulp');
var jade = require('gulp-jade');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');
var neat = require('node-neat').includePaths;
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// TASKS
// Jade task
gulp.task('jade', function() {
return gulp.src('src/jade/**/*.jade')
.pipe(jade({ pretty: true }))
.pipe(gulp.dest('dist/'))
});
// SCSS task
gulp.task('scss', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass({ style: 'compressed',
noCache: true,
includePaths: neat }))
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/css'))
});
// JS task
gulp.task('js', function() {
return gulp.src('src/js/**/*.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('dist/js/'))
});
// Watch files for changes
gulp.task('watch', ['browser-sync'], function() {
gulp.watch('dist/**/*.html', reload);
gulp.watch('src/scss/**/*.scss', ['scss', reload]);
gulp.watch('src/**/*.jade', ['jade']);
gulp.watch('src/**/*.js', ['js']);
});
// Start Browsersync server
gulp.task('browser-sync', function() {
browserSync.init(['dist/css/**/*.css', 'dist/js/**/*.js'], {
server: {
baseDir: "dist/"
}
});
});
// Default task
gulp.task('default', ['scss', 'jade', 'js', 'watch', 'browser-sync']);
I have pulled your repo and made some fixes, will push under the "fixes" branch. Few things:
Your index.html was referencing your unminified css, while you only exporting minified.
the watch list needed the subfolders prefxied, so gulp.watch('src/js/**/*.js', ['js']); and not gulp.watch('src/**/*.js', ['js']);
Your browserSync.init was referencing the wrong directories (src and not dist).
What worked for me was to switch gulp.watch to browserSync.watch. BrowserSync's documentation indicates that this feature requires at least version 2.6.0. So you may need to update your version of BrowserSync if you are not using that version.
How can I compile and move sass files from sass/** folder to css/** directory using Gulp?
src('sass/**/*.sass')
dest('css/**/*.css')
PS: every sass file must have it's compiled css-version (without file-concatenation)
PPS: I can't use sass --w sass:css method, because I also have to watch other files (.js, .jade) for changes
In your gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
// styles task : for generating css
gulp.task('styles', function() {
return gulp.src('sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('css/'))
});
// watch task : which will watch for changes, and run styles task
gulp.task('watch', function() {
gulp.watch('sass/**/*.scss', ['styles']);
});
Then in the terminal just run the following
gulp watch
Last week I tried writing a gulpfile from scratch for a small javascript project. I chose to use BrowserSync to compile my code and reload the browser (Chrome). It was working well throughout the weekend and I got the done. However, I feel like I opened up the project yesterday and now when I run the 'gulp' command it doesn't connect to the browser, give the "Connected to BrowserSync" message, and provide the autoreload functionality. However in the console, I still get notified that my files are getting updated and compiled.
Does anyone have any idea how this could happen?
Here's the gulpfile I'm using:
var gulp = require('gulp'),
gutil = require('gulp-util'),
browserSync = require('browser-sync'),
reload = browserSync.reload,
jshint = require('gulp-jshint'),
sass = require('gulp-sass');
gulp.task('browser-sync', function() {
var files = [
'app/**/*/.html',
'app/assets/css/**/*.css',
'app/assets/js/**/*.js'
];
browserSync.init(files, {
server: {
baseDir: './app'
}
});
});
// process JS files and reload all browsers when complete.
gulp.task('js', function () {
return gulp.src('app/assets/js/*js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(gulp.dest('app/assets/js'))
.pipe(browserSync.reload({stream:true}));
});
gulp.task('sass', function() {
return gulp.src('app/assets/sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('app/assets/css'))
.pipe(reload({stream: true}));
});
// Reload all Browsers
gulp.task('bs-reload', function () {
browserSync.reload();
});
gulp.task('default', ['browser-sync'], function() {
gulp.watch('app/assets/js**/*.js', ['js']);
gulp.watch('app/assets/sass/*.scss', ['sass']);
gulp.watch('app/*html', ['bs-reload']);
});
Thanks for any advice!
It looks like the browsersync 'script' tag is not being injected in the html file you are serving from, re-check your html file , Sometimes i forget the body tag , If there is no body tag the script tag won't be injected.
when you run gulp , and your page loads up check out the source code (view page source) while it's opened up and check the html structure.
You can copy the tag from other project that you have working fine , run it and copy the script tag injected and paste it on your current project page.
the script tag looks like this (might be diffrent depending on BrowserSync version)
<body>
<script id="__bs_script__">
//<![CDATA[document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.18.5'><\/script>".replace("HOST", location.hostname));//]]>
</script>
Notice: In the above <script> tag browser-sync version is 2.18.5 make sure to replace that with your installed version of browser-sync