3

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!

Jan Schloß
  • 128
  • 8
  • It makes sense to me that the scss only loads changes because it is the only task that has a call to browserSync.reload in it. The others rely on the dist watch which isn't working for some reason. Try changing your watch on dist folder to ./dist/**/*.* http://stackoverflow.com/questions/21689334/gulp-globbing-how-to-watch-everything-below-directory – Dave Thomas Oct 15 '16 at 04:49
  • @DaveThomas Sadly that did not fix it. – Jan Schloß Oct 15 '16 at 04:56
  • Are you perchance using sublime text? A colleague of mine found an issue with the way it writes to disk not notifying a gulp watch – Dave Thomas Oct 15 '16 at 05:05
  • @DaveThomas I am using Atom :S – Jan Schloß Oct 15 '16 at 05:05

2 Answers2

3

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.

Dave Thomas
  • 3,667
  • 2
  • 33
  • 41
  • Thank you very much! The reason for the rm -rf is that the gulp default task runs synchonous right now, need to change that (see the little //todo comment). Should have mentioned it, sorry. – Jan Schloß Oct 15 '16 at 06:16
  • You're very welcome. Thank you to you too for the experience! =) Have a good night, and all the best to you with your project. – Dave Thomas Oct 15 '16 at 06:19
1

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.

ic3b3rg
  • 14,629
  • 4
  • 30
  • 53