Gulp Browsersync任務沒有重新加載文件更改與新的文件結構

更改我的項目組織爲src/和dist/文件夾後，我的更改沒有被編譯，我的瀏覽器同步任務不再重新加載頁面。例如，如果我更改div的顏色，即使停止並重新啓動gulp任務，顏色也不會更新。所以我的問題是，如何更改我的吞嚥任務以監視我正在使用的新文件結構中的更改，以及在watch任務識別文件更改後如何觸發重新加載任務？我認爲重新加載任務有效，在此gulp文件的以前的工作版本gulp.watch正在工作，所以它似乎不是一個問題。我試圖根據this答案更改gulp.watch至browserSync.watch，但這並未解決問題。Gulp Browsersync任務沒有重新加載文件更改與新的文件結構

我猜這是我的手錶任務或browsersync.init的問題，但我完全難住。要清楚，我正在使用Jade，Bourbon Neat，SCSS，Gulp和Browsersync製作一個靜態網頁。

這裏的a link到這個項目的完整GitHub回購如果有幫助！

這是我目前的文件結構：

/ 
    dist/ 
    css/ 
    js/ 
    index.html 
    node_modules/ 
    src/ 
    jade/ 
    js/ 
    scss/ 
    .gitignore 
    gulpfile.js 
    package.json

這是我gulpfile.js：

// VARIABLES 

var gulp     = require('gulp'); 
var jade     = require('gulp-jade'); 
var sass     = require('gulp-sass'); 
var sourcemaps    = require('gulp-sourcemaps'); 
var autoprefixer   = require('gulp-autoprefixer'); 
var cssmin     = require('gulp-cssmin'); 
var neat     = require('node-neat').includePaths; 
var concat     = require('gulp-concat'); 
var uglify     = require('gulp-uglify'); 
var rename     = require('gulp-rename'); 
var browserSync    = require('browser-sync'); 
var reload     = browserSync.reload; 


// TASKS 



// Jade task 
gulp.task('jade', function() { 
    return gulp.src('src/jade/**/*.jade') 
    .pipe(jade({ pretty: true })) 
    .pipe(gulp.dest('dist/')) 
}); 


// SCSS task 
gulp.task('scss', function() { 
    return gulp.src('src/scss/**/*.scss') 
    .pipe(sass({ style: 'compressed', 
     noCache: true, 
     includePaths: neat })) 
    .pipe(autoprefixer()) 
    .pipe(cssmin()) 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    .pipe(gulp.dest('dist/css')) 
}); 

// JS task 
gulp.task('js', function() { 
    return gulp.src('src/js/**/*.js') 
    .pipe(uglify()) 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    .pipe(gulp.dest('dist/js/')) 
}); 

// Watch files for changes 
gulp.task('watch', ['browser-sync'], function() { 
    gulp.watch('dist/**/*.html', reload); 
    gulp.watch('src/scss/**/*.scss', ['scss', reload]); 
    gulp.watch('src/**/*.jade', ['jade']); 
    gulp.watch('src/**/*.js', ['js']); 
}); 

// Start Browsersync server 
gulp.task('browser-sync', function() { 
    browserSync.init(['dist/css/**/*.css', 'dist/js/**/*.js'], { 
     server: { 
      baseDir: "dist/" 
     } 
    }); 
}); 

// Default task 
gulp.task('default', ['scss', 'jade', 'js', 'watch', 'browser-sync']);

來源

2016-07-29 Oskar

您是否檢查過此答案？ http://stackoverflow.com/a/32988499/731782 – Fraccus

哦，沒有。謝謝，我會嘗試這個並更新問題。 – Oskar

這沒有奏效：/我會更新問題。 – Oskar

我已經退出你的回購和進行了一些修正，將在「修復」分支推。很少的東西：

您的index.html引用了您的unminified CSS，而您只導出縮小。
觀察名單所需的子文件夾prefxied，所以gulp.watch('src/js/**/*.js', ['js']);而不是gulp.watch('src/**/*.js', ['js']);
你browserSync.init引用了錯誤的目錄（src和不DIST）。

來源

2016-07-29 21:45:07 Fraccus

非常感謝！我以爲我嘗試了所有這些變化，但事實證明，我並沒有將它們都嘗試在一起。你搖滾！ – Oskar

非常歡迎 – Fraccus

對我而言有效的是將gulp.watch切換爲browserSync.watch。 BrowserSync的文檔表明此功能至少需要版本2.6.0。因此，如果您不使用該版本，則可能需要更新您的BrowserSync版本。

來源

2018-01-28 08:16:47

Gulp Browsersync任務沒有重新加載文件更改與新的文件結構

回答

相關問題