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.
Related
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.
Link to Github Repo: https://github.com/janschloss/boilerplate
My problem is that only scss changes get recognized by BrowserSync in Gulp (no html or js or /img changes). I guess that is because scss changes are streamed directly. Weirdly I had one build which recognized html and img changes though I can't find that again.
Does someone see the mistake?
"use strict";
// Define packages
var gulp = require('gulp'),
sass = require('gulp-sass'),
clean = require('gulp-clean'),
sourcemaps = require('gulp-sourcemaps'),
autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
imagemin = require('gulp-imagemin'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
strip = require('gulp-strip-comments'),
browserSync = require('browser-sync');
// Define file paths
var scssSrc = 'src/scss/**/*.scss',
jsSrc = 'src/js/*.js',
htmlSrc = 'src/*.html',
imgSrc = 'src/img/*';
// BrowserSync config
gulp.task('browserSyncInit', function() {
browserSync.init({
server: {
baseDir: 'dist'
}
});
gulp.watch('./dist/*').on('change', browserSync.reload);
});
// Concat scss files, compile compressed to css, prefix css, strip comments and create sourcemap
gulp.task('sass', function() {
return gulp.src(scssSrc)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('main.min.scss'))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(autoprefixer())
.pipe(strip.text())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.reload({
stream: true
}));
});
// Concatenate, uglify, strip comments and create sourcemap for js files
gulp.task('js', function() {
return gulp.src(jsSrc)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('main.min.js'))
.pipe(uglify())
.pipe(strip())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist/js'));
});
// Image optimization
gulp.task('img', function () {
return gulp.src(imgSrc)
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dist/img'));
});
// Clean task
gulp.task('clean', function() {
return gulp.src('dist')
.pipe(clean());
});
// Copy html
gulp.task('copy', function() {
return gulp.src(htmlSrc)
.pipe(gulp.dest('dist/'));
});
// Default Task
gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function () { //todo asynchronous
gulp.watch(scssSrc, ['sass']);
gulp.watch(jsSrc, ['js']);
gulp.watch(imgSrc, ['img']);
gulp.watch(htmlSrc, ['copy']);
});
I think
gulp.watch('./dist/*').on('change', browserSync.reload);
is the relevant line. Is there anything wrong with my path?
My relevant folder structure looks like:
gulpfile.js
src
dist
Changes are made in src and copied over to dist on runtime with gulp.
Thanks!
I can't explain it. But when I remove your watch call from the browserSyncInit task and put it in the callback for the default task along side the other watches, everything works fine.
Relevant pieces of code:
// BrowserSync config
gulp.task('browserSyncInit', function() {
browserSync.init({
server: {
baseDir: 'dist'
}
});
});
// Default Task
gulp.task('default', ['clean', 'copy', 'sass', 'js', 'img', 'browserSyncInit'], function () { //todo asynchronous
gulp.watch(scssSrc, ['sass']);
gulp.watch(jsSrc, ['js']);
gulp.watch(imgSrc, ['img']);
gulp.watch(htmlSrc, ['copy']);
gulp.watch('./dist/**/*').on('change', function () {
console.log("Watch hit");
browserSync.reload();
});
});
Is this ideal at all for your gulp file? I can kind of understand the thinking of having the watch originally triggered inside the other task.
Very weird thing I noticed; Sometimes the DIST watch would take and all the other watches wouldn't. As if there is a race condition happening on which ones get registered and the others get overwritten. When they were separated like you had them originally, either SRC watches worked or DIST watches worked. I could edit files in DIST directly when the DIST watch was working and trigger reload.
Keeping all the watches together in that CB function works for me using your github project.
I also noticed another unrelated issue. Rerunning your gulp file required me to rm -rf dist first other wise I got errors.
I think the problem is with the glob: './dist/*' - it will only watch the contents of dist. I think you want './dist/**/*' to watch the folder and all subfolders.
I am unable to live-reload LESS and Jade files using Aglio's --server option or gulp paired with connect's livereload option and the gulp-aglio plugin.
Is this due to caching? Or a limitation of connect's live reload capability?
The only way to make my changes render is to ctrl-C and run gulp again.
Here is my gulpfile.js:
var
gulp = require('gulp'),
aglio = require('gulp-aglio'),
connect = require('gulp-connect'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch')
;
gulp.task('docs', function(){
gulp
.src('docs/index.apib')
.pipe(plumber())
.pipe(aglio({
themeTemplate: 'docs/templates/triple.jade',
themeStyle: 'docs/styles/layout-default.less',
themeVariables: 'docs/styles/variables-default.less',
themeFullWidth: true
}))
.pipe(gulp.dest('docs'))
;
});
gulp.task('server', function(){
connect.server({
livereload: true,
root: ['docs']
});
});
gulp.task('livereload', ['docs'], function(){
gulp
.src(['docs/*.apib'])
.pipe(plumber())
.pipe(connect.reload())
;
});
gulp.task('watch', function() {
gulp.watch(['docs/*.apib', 'docs/*.md', 'docs/styles/*.less', 'docs/templates/*.jade'], ['docs', 'livereload']);
})
gulp.task('default', ['docs', 'server', 'livereload', 'watch']);
gulp.task('build', ['docs']);
This is currently not possible. The livereload functionality is for reloading the input API Blueprint file only. All of the theme files are cached so that they only get loaded once.
Question: what's your use case for this feature?
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.
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