Why does this work
gulp.task("watch", ["browser-sync"], function() {
gulp.watch(
["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss"],
["sass"],
);
gulp.watch("src/*.html").on("change", browserSync.reload);
});
But this does not work:
gulp.task("watch", ["browser-sync"], function() {
gulp.watch(
["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss"],
["sass"],
["src/*.html"]
).on("change", browserSync.reload);
});
Hmmm, Thanks in advance !
Gulp.watch has this declaration:
gulp.watch(glob[, opts], tasks)
See gulp.watch documentation. You have
gulp.watch(
["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss"],
["sass"],
["src/*.html"]
which is equivalent to
gulp.watch(glob, task, glob)
which just isn't allowed. You could fix it by doing something like:
gulp.task("watch", ["browser-sync"], function() {
gulp.watch(
["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss"],
["sass"]);
gulp.watch(["src/*.html"]).on("change", browserSync.reload);
});
and then put a reload call at the end of your 'sass' task.
Related
When I use partials on the scss structure, I have to deal with frequent browser sync error (like reloading forever). Notice that it is an intermittent error so it is not a common compiling problem (although it might be somewhat related) and it doesn't happen when I don't use partials. Also, I don't think it is project related or a gulpfile issue either, since it occurs with any project and I have tried more than one gulpfile structure. Anyway, you can check it out below:
var gulp = require('gulp');
var sass = require('gulp-sass');
var clean = require('gulp-clean');
var browserSync = require('browser-sync').create();
var autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function () {
gulp.src('src/scss/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('copy', ['clean'], function () {
return gulp.src('src/**/*')
.pipe(gulp.dest('dist'));
});
gulp.task('clean', function () {
return gulp.src('dist')
.pipe(clean());
});
gulp.task('serve',function () {
browserSync.init({
server: {
baseDir: 'src/'
}
});
gulp.watch('src/scss/*.scss', ['styles']);
gulp.watch('src/**/*').on('change', browserSync.reload)
});
gulp.task('default', ['styles', 'serve']);
A couple of things that might help: (1) add a return statement in your 'styles' task and (2) remove the second watch because it calls browserSync.reload which is already called at the end of the 'styles' task and you don't need to call it twice. So make these changes:
gulp.task('styles', function () {
// added return below
return gulp.src('src/scss/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({stream: true}));
});
and the second watch is unnecessary and possibly a problem:
gulp.task('serve',function () {
browserSync.init({
server: {
baseDir: 'src/'
}
});
gulp.watch('src/scss/*.scss', ['styles']);
// remove below watch
// gulp.watch('src/**/*').on('change', browserSync.reload)
gulp.watch("./*.html").on("change", browserSync.reload);
});
I have the following configuration:
// Watch
gulp.task('watch', function () {
gulp.watch('_01_src/js/**/*.js', ['babel']);
gulp.watch('_01_src/scss/**/*.scss', ['scss']);
});
gulp.task('default', ['scss', 'babel', 'watch']);
If I execute watch alone: "gulp watch" is working with no issue. If I execute "gulp", watch is started but is not working and I don't understand why (I tried changing the position in array but no luck).
In your example, it runs scss, babel and watch asynchronously, that could cause problems. Maybe just set scss and babel to run before watch is started at all?
// Watch
gulp.task('watch', ['scss', 'babel'], function () {
gulp.watch('_01_src/js/**/*.js', ['babel']);
gulp.watch('_01_src/scss/**/*.scss', ['scss']);
});
gulp.task('default', ['watch']);
Instead of list parameters try using gulp.series() and gulp.parallel().
So your example would look like:
// Watch
gulp.task('watch', function (done) {
gulp.watch('_01_src/js/**/*.js', function(){
gulp.series('babel')();
});
gulp.watch('_01_src/scss/**/*.scss', function(){
gulp.series('scss')();
});
done();
});
gulp.task('default', gulp.series(gulp.parallel('scss', 'babel'), 'watch'));
This way scss and babel will run in parallel, and watch will run after that.
This is my gulpfile.js file. It doesn't reload when I change and save my css or html, but it shows the "Connected to Browser-sync" message when I use gulp serve. I can't seem to figure out what is wrong.
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var gulp = require('gulp');
gulp.task('styles', function() {
gulp.src('./css/*.css')
.pipe(gulp.dest('./css'))
});
//Watch task
gulp.task('default',function() {
gulp.watch('./css/*.css',['styles']);
});
gulp.task('js', function () {
return gulp.src('./js/*.js')
// .pipe(concat('all.js'))
.pipe(gulp.dest('./js'));
});
gulp.task('html', function () {
return gulp.src('./*.html')
.pipe(gulp.dest('./'));
});
gulp.task('js-watch', ['js'], browserSync.reload);
gulp.task('html-watch', ['html'], browserSync.reload);
gulp.task('css-watch', ['css'], browserSync.reload);
gulp.task('serve', ['js', 'html', 'styles'], function () {
browserSync.init({
server: {
baseDir: "./"
}
});
gulp.watch("./*.js", ['js-watch']);
gulp.watch("./*.html", ['html-watch']);
gulp.watch("./css/*.css", ['css-watch']);
});
Try this.
All i did was add a new dependency.. run-sequence, to make it easy to organize how things are run. All you need is to run gulp to start the script and everything should run perfectly.
Aside from that i created a site folder at the root of my project. just because it seems more organize that way, and if you ever think of using jade, or sass, scss, etc. in your project and all you have to do is change the src path and keep the rendered output in the site folder..
Aside from that, everything is the same.
EDIT
I forgot to mention that i also added the pipe(bs.stream()); line at the end of each task such as HTML, styles, and JS, so that the browser reloads every time you make a change.
In case you don't want to make the server folder to keep your project organized, the all you have to do is delete the site/ path where ever you see it. and for server: 'site' just replace site with ./. Port you can delete it or define your own port
var gulp = require('gulp'),
bs = require('browser-sync').create(),
sequence = require('run-sequence');
gulp.task('styles', function() {
gulp.src('site/css/*.css')
.pipe(gulp.dest('site/css'))
.pipe(bs.stream());
});
gulp.task('js', function() {
gulp.src(['site/js/*.js'])
// .pipe(concat('all.js'))
.pipe(gulp.dest('site/js'))
.pipe(bs.stream());
});
gulp.task('html', function() {
gulp.src('site/*.html')
.pipe(gulp.dest('site'))
.pipe(bs.stream());
});
gulp.task('browser-sync', function() {
bs.init({
server: 'site',
port: 3010
});
});
gulp.task('watch', ['build'], function() {
gulp.watch(['site/css/*.css'], ['styles']);
gulp.watch(['site/js/*.js'], ['js']);
gulp.watch(['site/*.html'], ['html']);
});
gulp.task('build', function(done) {
sequence(
['html', 'js', 'styles'],
'browser-sync',
done);
});
gulp.task('default', ['watch']);
I want to just build 'the only one file' I changed,not a bunch of files,
so I tried something like this
gulp.task('watch_html', function () {
return gulp.watch('source/**/*.html', function (event) {
gulp.src(event.path)
.pipe(prettify({indent_size: 4}))
.pipe(gulp.dest('dist'));
});
});
But why this won't work?
Is there a workaround?
I think a gulp package like gulp-changed may be able to help you out.
It provides a way to only operate on changed files in a stream. Check it out here.
Hope that helps!
You should separate the tasks :
gulp.task('html', function() {
return gulp.src('source/**/*.html')
.pipe(prettify({indent_size: 4}))
.pipe(gulp.dest('dist'));
});
gulp.task('watch', function() {
// when modification is detected, html task is launched
gulp.watch(['source/**/*.html'], ['html']);
});
I'm putting together a gulpfile and I was wondering if you can combine gulp-notify (or some other solution) with a watch task so that a message pops up when the watch task has started running. I can't find anything from my searches on how I would go about doing this. Is it even possible?
Here's my watch task:
// Watch our files for changes
gulp.task('watch', function() {
// -- I wanna run a notify message here saying 'Watching for changes...' -- //
gulp.watch('assets/styles/**/*.scss', ['styles']);
gulp.watch('assets/scripts/**/*.js', ['scripts']);
gulp.watch('assets/images/**/*', ['images']);
});
This should do it:
gulp.task('watch', function() {
notify("Watching for changes...").write('');
gulp.watch('assets/styles/**/*.scss', ['styles']);
gulp.watch('assets/scripts/**/*.js', ['scripts']);
gulp.watch('assets/images/**/*', ['images']);
});
Also, if you meant to have a notification each time a file changes, you could do something like this:
gulp.task('watch', function () {
//...
gulp.watch([
'./src/**/*.html',
'./src/**/*.php',
]).on('change', function () {
browserSync.reload();
notify("File changed: browser synced").write('');
});
});
I managed to do it with gulp-notify and node-notifier.
After you gulp tasks pipe the notifier and in the callback use the node-notifier to show the popup.
var notify = require('gulp-notify');
var nodeNotifier = require('node-notifier');
gulp().src(options.src)
.pipe(gulp.dest(options.dest))
.pipe(notify(function () {
nodeNotifier.notify({
'title': 'App',
'message': 'Build'
});
}));
Can't you just use
gulp.task('watch', function() {
console.log('Watching for changes...');
gulp.watch('assets/styles/**/*.scss', ['styles']);
gulp.watch('assets/scripts/**/*.js', ['scripts']);
gulp.watch('assets/images/**/*', ['images']);
});