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())
});
Related
I am working on a project that uses gulp to concatenate compiled vue assets with other javascript assets.
When running gulp, all runs successfully.
However, now I need to add a watcher on the compiled vue file as show below.
gulp.task('watch', ['scripts'], function() {
gulp.watch('js/vue/compiled.js', { ignoreInitial: false });
});
While the watcher process seems to kickoff, it does not update when the compiled.js file gets updated. Any idea why this is?
Usually how I write gulp tasks is like this:
gulp.task('watch', function() {
gulp.watch('js/vue/compiled.js', ['scripts'], { ignoreInitial: false });
});
Instead of placing the gulp function to execute in gulp.task rather place it in gulp.watch. Something like this:
gulp.task('watch', function() {
gulp.watch('js/vue/compiled.js', ['scripts'], { ignoreInitial: false });
});
I'm new in Gulp and this is my code that just minifies my JS script:
gulp.task('minify-js', function(){
return gulp.src(['assets/js/**/*.js', '!assets/js/**/*.min.js'])
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('./assets/js'))
});
gulp.task('watch', function(){
//gulp.watch(['sass/**/*.sass'], gulp.series('css-files'));
gulp.watch(['assets/js/**/*.js'], gulp.series('minify-js'));
});
gulp.task('default', gulp.series('watch'));
When I run gulp default and edit any JS file, my task starts looping for no reason and the files keep being minified and merged aswell. Why? It should stop after one execution!
example:
*This code runs perfectly without the watch task
Any help?
Your destination file matches the mask of source files.
So Gulp process the file it just generated themself. And then again, and again.
Update: you've excluded the file in minify-js task, but not excluded in watch task. Set watch argument the same as for minify-js and that should help.
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.
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.