Gulp watch and reload jekyll, sass, js

Question

I am trying to create a gulpfile that will watch jekyll / sass / js and synchronize with the browser. The script correctly tracks jekyll changes, rebuilds and introduces all changes in the browser.

But I can’t understand why this does not synchronize sass / js changes, even though they are being watched, watched and regenerated. Any help would be appreciated!

https://github.com/Skoks/JekyllBB

/ * GULPFILE.JS * /

var gulp                = require('gulp'),
        sass                = require('gulp-sass'),
        browserSync         = require('browser-sync'),
        autoprefixer        = require('gulp-autoprefixer'),
        uglify              = require('gulp-uglify'),
        jshint              = require('gulp-jshint'),
        header              = require('gulp-header'),
        rename              = require('gulp-rename'),
        minifyCSS           = require('gulp-minify-css'),
        cp                  = require('child_process');
        package             = require('./package.json');

        var messages        = {
            jekyllBuild: '<span style="color: grey">Running:</span> $ jekyll build'
        };

            var banner      = [
              '/*!\n' +
              ' * <%= package.name %>\n' +
              ' * <%= package.title %>\n' +
              ' * <%= package.url %>\n' +
              ' * @author <%= package.author %>\n' +
              ' * @version <%= package.version %>\n' +
              ' * Copyright ' + new Date().getFullYear() + '. <%= package.license %> licensed.\n' +
              ' */',
              '\n'
            ].join('');


    /**
     * Build the Jekyll Site
     */
    gulp.task('jekyll-build', function (done) {
        browserSync.notify(messages.jekyllBuild);
        return cp.spawn('jekyll', ['build'], {stdio: 'inherit'})
            .on('close', done);
    });

    /**
     * Rebuild Jekyll & do page reload
     */
    gulp.task('jekyll-rebuild', ['jekyll-build'], function () {
        browserSync.reload();
    });

    /**
     * Wait for jekyll-build, then launch the Server
     */
    gulp.task('browser-sync', ['css', 'js', 'jekyll-build'], function() {
        browserSync({
            server: {
                baseDir: 'html'
            }
        });
    });

    gulp.task('css', ['bs-reload'], function () {
        return gulp.src('themes/dental-theme/assets/scss/main.scss')
        .pipe(sass({errLogToConsole: true}))
        .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
        .pipe(gulp.dest('build/css'))
        .pipe(minifyCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(header(banner, { package : package }))
        .pipe(gulp.dest('build/css'))
        .pipe(browserSync.reload({stream:true}));
    });

    gulp.task('js',function(){
      gulp.src('themes/dental-theme/assets/js/main.js')
        .pipe(jshint('.jshintrc'))
        .pipe(jshint.reporter('default'))
        .pipe(header(banner, { package : package }))
        .pipe(gulp.dest('build/js'))
        .pipe(uglify())
        .pipe(header(banner, { package : package }))
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest('build/js'))
        .pipe(browserSync.reload({stream:true, once: true}));
    });

    gulp.task('browser-sync', function() {
        browserSync.init(null, {
            server: {
                baseDir: "html"
            }
        });
    });
    gulp.task('bs-reload', function () {
        browserSync.reload();
    });

    gulp.task('default', ['css', 'js', 'browser-sync'], function () {
        gulp.watch("themes/dental-theme/assets/scss/*.scss", ['css']);
        gulp.watch("themes/dental-theme/assets/js/*.js", ['js']);
        gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
    });

Answer 1

Your js and css clocks just recover files but don’t do the Jekyll build, your html clocks do.

Try:

gulp.task('default', ['css', 'js', 'browser-sync'], function () {
    gulp.watch("assets/scss/*/*.scss", ['css', 'jekyll-rebuild']);
    gulp.watch("assets/js/*.js", ['js', 'jekyll-rebuild']);
    gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});

Edit:

Jekyll , , :

gulp.task('default', ['css', 'js', 'browser-sync'], function () {
    gulp.watch("assets/scss/*/*.scss", ['css', 'css-to-site']);
    gulp.watch("assets/js/*.js", ['js', 'js-to-site']);
    gulp.watch(['index.html', '_layouts/*.html', '_posts/*'], ['jekyll-rebuild']);
});

gulp.task('js-to-site', function () {
  gulp.src('build/js/*')
    .pipe(gulp.dest('html/themes/dental-theme/js'));
    browserSync.reload();
});

gulp.task('css-to-site', function () {
  gulp.src('build/css/*')
    .pipe(gulp.dest('html/themes/dental-theme/css'));
    browserSync.reload();
});

.