gulp watch and reload jekyll, sass, js

Question

jekyll/sass/js를보고 브라우저와 동기화 할 gulpfile을 만들려고합니다. 스크립트는 jekyll의 변경 사항을 정확하게 감시하고 브라우저에서 모든 변경 사항을 다시 작성하고 삽입합니다.

그러나 나는 그들이 혐오스럽게 변한 이유가 무엇인지 알 수 없다. 어떤 도움을 주시면 감사하겠습니다!

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

귀하의 JS 및 CSS 시계가 당신의 HTML 시계 수행, 파일을 재생하지만 지킬 구축하고 있지 않습니다.

시도 :

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']); 
}); 

편집 :

당신은 당신이 대상 폴더에 자산을 생성 복사하여 지킬에게 당신이 할 수있는 때마다 구축하지 않으려면 :

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(); 
}); 

되지 않음을 테스트를 거쳤습니다.