I am using gulp browser sync in the web app I have developed using Microsoft Visual Studio. The issue has occured when I started using browser sync to reload the page whenever a file has been modified. My app is running on my default localhost. The development build succeeds but it can't open the site. The following is my gulp code:
var gulp = require('gulp');
var sass = require('gulp-sass');
var bs = require('browser-sync').create();
gulp.task('serve', [], function() {
// .init starts the server
bs.init({
server: "./",
port: 64510
});
});
gulp.task('sass', function() {
return gulp.src('scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('css'))
.pipe(bs.reload({ stream: true }));
});
gulp.task('watch', ['browser-sync'], function() {
gulp.watch("scss/*.scss", ['sass']);
gulp.watch("*.html").on('change', bs.reload);
});
gulp.task('build', ['clean-code', 'serve', 'browser-sync'], function() {});
Thanks in advance.
You call a 'browser-sync' task twice in your provided code but there is no actual 'browser-sync' task. For example, your 'build' has such a call:
gulp.task('build', ['clean-code', 'serve', 'browser-sync'], function() {});
and so does the 'watch' task:
gulp.task('watch', ['browser-sync'], function() {
Get rid of those two 'browser-sync' references and it will work.
Related
I have following directory structure
workspace
|--dev
|--proj
|--css
|--style.css
|--js
|--app.js
|index.php
|something.html
|gulpfile.js
|package.json
I had installed vhost named as dev.local on ...workspace\dev. As you can see I have created a gulpfile.js in my proj directory.
Now if I run gulp browser-sync command my browser window is open showing following url http://dev.local:3000/proj/. It perfectly opens my index.php page but if I do any modification in my files they are not monitored and are not injected into my page. So there is no auto reload of my page.
Here is my gulpfile.js
var gulp = require('gulp');
var bs = require('browser-sync').create(); // create a browser sync instance.
gulp.task('browser-sync', function() {
bs.init({
open: 'external',
host: 'dev.local',
proxy: 'dev.local/proj'
});
});
gulp.task('watch', ['browser-sync'], function () {
gulp.watch("*.html,*.php,css/*.css,js/*.js").on('change', bs.reload);
});
Here is the output of my terminal
gulp browser-sync
[12:14:12] Using gulpfile ~/Documents/workspace/dev/proj/gulpfile.js
[12:14:12] Starting 'browser-sync'...
[12:14:12] Finished 'browser-sync' after 15 ms
[BS] Proxying: http://dev.local
[BS] Access URLs:
------------------------------------------------
Local: http://localhost:3000/proj
External: http://dev.local:3000/proj
------------------------------------------------
UI: http://localhost:3001
UI External: http://dev.local:3001
------------------------------------------------
I had already searched SO for various solutions but of no avail. Please help I am stuck.
UPDATE
I am using BrowserSync version 2.18.8 and gulp version 3.9.1
First of i would suggest to split the watching tasks into multiple, makes it easier to maintain and update. By reading your comments i can suggest to reverse the chain of gulp.tasks. You are currently loading 'browser-sync' from your watch task, but you can load your 'watch' task from your browser-sync task.
var gulp = require('gulp');
var bs = require('browser-sync').create(); // create a browser sync instance.
gulp.task('serve', function() {
bs.init({
open: 'external',
host: 'dev.local',
proxy: 'dev.local/proj'
});
});
gulp.task('watch', function () {
gulp.watch("*.html").on('change', bs.reload);
gulp.watch("*.php").on('change', bs.reload);
gulp.watch("./css/*.css").on('change', bs.reload);
gulp.watch("./js/*.js").on('change', bs.reload);
});
gulp.task('default', ['serve', 'watch']);
Also modifying css files can be streamed by browser-sync,
gulp.watch("css/*.css").on('change', bs.stream);
Next i would suggest to test weather or not the files are actually beeing monitored, and change the path of the gulp.watch tasks accordingly.
If you need help with this comment below.
Can you try this way? This is what I implemented in my application to finding the new uploaded images and resize and move to another folder.
This gulp code is watching new images from folder and reduce image size and move to scaled folder.
Probably it may helpful to you.
// include gulp
var gulp = require('gulp');
// include plug-ins
var imagemin = require('gulp-imagemin');
var watch = require("gulp-watch");
var newer = require("gulp-newer");
var gulpgm = require("gulp-gm");
//var imgSource = './app/client/media/site/max/*';
//var imgDestination = './app/client/media/site/min';
var imgSource = [
'./app/client/media/**/*.png',
'./app/client/media/**/*.jpg',
'./app/client/media/**/*.jpeg',
'./app/client/media/**/*.gif',
'./app/client/media/**/**/*.png',
'./app/client/media/**/**/*.jpg',
'./app/client/media/**/**/*.jpeg',
'./app/client/media/**/**/*.gif',
'./app/client/media/**/**/**/*.png',
'./app/client/media/**/**/**/*.jpg',
'./app/client/media/**/**/**/*.jpeg',
'./app/client/media/**/**/**/*.gif',
];
var imgDestination = './app/client/scaled/';
gulp
.task('imagemin', function () {
console.log("image min called");
return gulp.src(imgSource)
.pipe(watch(imgSource))
.pipe(newer(imgDestination))
.pipe(gulpgm(function (gmFile) {
return gmFile.minify();
}))
.pipe(gulp.dest(imgDestination));
});
gulp
.task("default", ["imagemin", "watch"]);
gulp
.task("watch", function () {
watch(imgSource, ["imagemin"]);
});
I have browsersync set up with gulp, html and css reloading is working just fine, but I've got a problem with javascript. When i launch browser-sync task and change some js, it only works as intended once. I've set up everything according to this official guide.
gulp.task('js', function () {
return gulp.src(['./app/*/*.js', './app/*.js'])
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('./build'));
});
gulp.task('js-watch', ['js'], browserSync.reload);
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./app/"
}
});
gulp.watch('app/styles/*.scss', ['sass']);
gulp.watch("app/*.html").on('change', browserSync.reload);
gulp.watch(['./app/*/*.js', './app/*.js'], ['js-watch']);
});
console log
So, when i first change some javascript, it gets changed and the page is reloaded as intended - js-watch task runs js task and then reloads the page. But on the next runs, only js task is run.
I was googling this for about 2 hours before i decided to ask a question, so i hope this is not a duplicate. But just in case, sorry.
add .pipe(browserSync.stream()); in 'js' task after .dest()
gulp.task('js', function () {
return gulp.src(['./app/*/*.js', './app/*.js'])
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('./build'))
.pipe(browserSync.stream())
});
I need to minify automatically all files when some change occurs in my js or less files.
I have some Tasks for Minify my less files and js files called 'styles','services' and 'controlles'.
For minify this files i just execute this task and everything forks fine:
gulp.task('minify', ['styles', 'services','controllers']);
Instead run this task manually i want to do automatic in development mode. How i can do this?
What you need to do is run your project with nodemon
nodemon = require('gulp-nodemon');
Nodemon runs your code and automatically restart when your code changes.
So, for automatic minification use this Gulp Task:
gulp.task('watch', function() {
gulp.watch(pathLess, ['styles']);
gulp.watch(pathJs.services, ['services']);
gulp.watch(pathJs.controllers, ['controllers']);
});
And then setup nodemon for run your project
gulp.task('nodemon', function () {
nodemon({ script: 'server.js'})
.on('start', ['watch'], function () {
console.log('start!');
})
.on('change', ['watch'], function () {
console.log('change!');
})
.on('restart', function () {
console.log('restarted!');
});
})
Now if you type in prompt : gulp nodemon your server.js will run, and you will be able to develop with automatic minification.
I hope it helps
I'm getting the same problem as this guy.
My terminal looks like:
$ gulp watch
[23:59:03] Using gulpfile gulpfile.js
[23:59:03] Starting 'watch'...
[23:59:03] Finished 'watch' after 8.68 ms
http://jsbin.com/poxoke/1/edit?js
Why can't I get it to watch for file changes? Why does it end so quickly?
Thanks!
you could try adding gulp-util
var util= require('gulp-util');
and then inside your sass task add the line to report any error, if this is one, to console output.
gulp.task('sass', function () {
return gulp.src('assets/scss/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
includePaths: ['sass'].concat(bourbon),
outputStyle: 'compressed'
}))
.on('error', util.log)
.pipe(sourcemaps.write())
.pipe(gulp.dest('assets/css'));
});
If gulp-sass throws an error this can get "consumed" by the pipe but still causes the whole stream to terminate. So if you add the line to explicitly catch them and then log them out you can see if this is in fact the case.
Your watch task is dependant on the 'sass' task and if it fails your task ends.
gulp.task('watch', function(){
gulp.watch('assets/scss/*.scss', ['sass']);
});
My current rule for this is:
gulp.task('sass', function () {
var src = path.join('src', 'scss', '*.scss');
var dst = path.join('public', 'css');
var config = {
errLogToConsole: true,
outputStyle: 'compressed',
sourceComments: false
};
return gulp.src(src)
.pipe(sourcemaps.init())
.pipe(sass(config)).on('error', util.log)
.pipe(concat('style.css')).on('error', util.log)
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dst));
});
And that all works fine
My output is this:
[05:49:27] Using gulpfile F:\Projects\Upload\gulpfile.js
[05:49:27] Starting 'watch'...
[05:49:29] Finished 'watch' after 1.98 s
but Gulp does not return to the command line, the cursor still keeps flashing away and when I update SASS files the code runs again and the updates are made to the CSS
I'm using gulp concat and browserync. When I run gulp, it starts browserync and concatenates and reloads all js files found in modules. The problem is that it only does the concatenation of js files once, so I need to stop running gulp and run it again so I can see any changes reflected to js files. I only see the gulp notify task after stoping and restarting gulp too. How do I setup gulp so that always bundles and compiles the js and then runs browersync?
Here is my gulpfile
var gulp = require('gulp');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();
var notify = require('gulp-notify');
// default
gulp.task('default', ['browserSync', 'scripts'], function (){
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/modules/**/*.js', browserSync.reload);
});
gulp.task('scripts', function() {
return gulp.src('app/modules/**/**.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('app/build/js'))
.pipe(notify({ message: 'Scripts in modules have been bundled!' }));
});
//start browsersync
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
Try this:
// watch
gulp.task('watch', ['browserSync', 'scripts'], function (){
// Reloads the browser whenever HTML or JS files change
gulp.watch('app/*.html', browserSync.reload);
gulp.watch('app/modules/**/*.js', ['scripts']);
});
gulp.task('scripts', function() {
return gulp.src('app/modules/**/**.js')
.pipe(concat('main.js'))
.pipe(gulp.dest('app/build/js'))
.pipe(notify({ message: 'Scripts in modules have been bundled!' }))
.pipe(browserSync.reload({
stream: true
}));
});
gulp.task('default', ['watch', 'scripts']);
I'm not sure but could you try to put
gulp.watch('app/modules/**/*.js', ['scripts']);
under task "default"
As I understand your gulp didn't watch your files and run the script
P.S. I'm not expert in gulp if it doesn't work out I'm sorry.