瀏覽器同步重新加載，但CSS不會更改與LESS和Gulp

我想弄清楚如何使用瀏覽器同步與gulp和較少，以獲得瀏覽器自動更新後編譯後更少的文件中的更改。我現在所擁有的是造成系統中出現重新加載的消息，並顯示「連接到瀏覽器同步」消息，但瀏覽器中沒有發生變化。在禁用緩存的情況下進行完全手動重新加載時，我看到了預期的更改，因此css/less任務似乎正在部分工作，但我在瀏覽器同步中缺少某些內容。瀏覽器同步重新加載，但CSS不會更改與LESS和Gulp

哦，我在主.less文件中使用@import語句來爲每個單獨的模塊提供較少的文件。感謝您的時間和幫助！

gulp.task('less', function(){ 
return gulp.src(basepath + 'styles/emma.less') 
    .pipe(plumber()) 
    .pipe(sourcemaps.init()) 
     .pipe(less()) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'] 
     })) 
     .pipe(minifyCSS()) 
    .pipe(sourcemaps.write('./')) 
    .pipe(filesize()) 
    .pipe(gulp.dest(paths.dest + '/css')) 
    .pipe(reload({stream: true})); 
}); 
gulp.task('browser-sync', function() { 
    browserSync({ 
     proxy: 'localhost:8080' 
    }); 
});  
//dev task to compile things on the fly 
gulp.task('dev', ['browser-sync'], function(){ 
    gulp.watch(paths.scripts, ['scripts']); 
    gulp.watch(paths.less, ['less']); 
    gulp.watch(paths.templates, ['templates']); 
});

來源

2015-04-27 paniclater

使browserSync以這種方式工作的一個好方法是讓生成的文件有一個新的偵聽器。編譯LESS爲CSS，

gulp.task('less', function(){ 
return gulp.src(basepath + 'styles/emma.less') 
    .pipe(plumber()) 
    .pipe(sourcemaps.init()) 
     .pipe(less()) 
     .pipe(autoprefixer({ 
      browsers: ['last 2 versions'] 
     })) 
     .pipe(minifyCSS()) 
    .pipe(sourcemaps.write('./')) 
    .pipe(filesize()) 
    .pipe(gulp.dest(paths.dest + '/css')); 
});

，並把文件觀察者到的結果，觸發重裝：

gulp.task('dev', ['browser-sync'], function(){ 
    gulp.watch(paths.less, ['less']); 
    gulp.watch(paths.dest + '/css/**/*.css', reload); 
});

一個原因原來的代碼將無法正常工作可能會丟失參考源文件一旦他們編譯（這只不過是一個假設，雖然）

來源

2015-04-28 08:52:05 ddprrt

感謝您的輸入，我繼續前進，並改變到這種方法和瀏覽器後重新加載較少的任務，所以它似乎刷新後CSS已編譯。但是，即使禁用緩存，自動刷新後也需要手動刷新，以便在瀏覽器中顯示更改。這是我從飲料中得到的輸出： [13:34:35] Starting'less'... [13:34:35] Size emma.css.map：208.83 kB [13:34:35 ]大小emma.css：204 B [13:34:35] 396毫秒後完成'less' [BS]重新加載瀏覽器... – paniclater

您也可以給我Chrome開發者控制檯的輸出結果..應該說還有一些東西:-) – ddprrt

或者如果沒有控制檯，那麼網絡選項卡？順便說一句：我更新了一些答案，使其更加清晰。這個設置例如：https://gist.github.com/ddprrt/391c3ba29bd0ec05261d對我來說很完美 – ddprrt

瀏覽器同步重新加載，但CSS不會更改與LESS和Gulp

回答

相關問題