咕嘟咕嘟瀏覽器的不同步監測和注射文件

Question

我有以下

workspace 
    |--dev 
     |--proj 
      |--css 
       |--style.css 
      |--js 
       |--app.js 
      |index.php 
      |something.html 
      |gulpfile.js 
      |package.json 

我已經安裝了命名爲dev.local上...workspace\devvhost目錄結構。如您所見，我在我的proj目錄中創建了一個gulpfile.js。

現在，如果我運行gulp browser-sync命令我的瀏覽器窗口打開顯示以下url http://dev.local:3000/proj/。它完全打開我的index.php頁面，但如果我在文件中做了任何修改，它們將不會被監控，也不會被注入到我的頁面中。所以沒有自動重新加載我的網頁。

這是我gulpfile.js

var gulp = require('gulp'); 
var bs = require('browser-sync').create(); // create a browser sync instance. 

gulp.task('browser-sync', function() { 
    bs.init({ 
     open: 'external', 
     host: 'dev.local', 
     proxy: 'dev.local/proj' 
    }); 
}); 

gulp.task('watch', ['browser-sync'], function() { 
    gulp.watch("*.html,*.php,css/*.css,js/*.js").on('change', bs.reload); 
}); 

這裏是我的端子的輸出

gulp browser-sync 
[12:14:12] Using gulpfile ~/Documents/workspace/dev/proj/gulpfile.js 
[12:14:12] Starting 'browser-sync'... 
[12:14:12] Finished 'browser-sync' after 15 ms 
[BS] Proxying: http://dev.local 
[BS] Access URLs: 
------------------------------------------------ 
     Local: http://localhost:3000/proj 
    External: http://dev.local:3000/proj 
------------------------------------------------ 
      UI: http://localhost:3001 
UI External: http://dev.local:3001 
------------------------------------------------ 

我已經搜查SO各種解決方案，但無濟於事。請幫我卡住了。

UPDATE

我使用BrowserSync版本2.18.8和一飲而盡版本3.9.1

Answer 1

我首先建議將觀看任務拆分爲多個，使維護和更新更容易。通過閱讀你的意見，我可以建議扭轉gulp.tasks鏈。您目前正在從您的觀看任務中加載「瀏覽器同步」，但您可以從瀏覽器同步任務中加載「觀看」任務。

var gulp = require('gulp'); 
var bs = require('browser-sync').create(); // create a browser sync instance. 

gulp.task('serve', function() { 
    bs.init({ 
     open: 'external', 
     host: 'dev.local', 
     proxy: 'dev.local/proj' 
    }); 
}); 

gulp.task('watch', function() { 
    gulp.watch("*.html").on('change', bs.reload); 
    gulp.watch("*.php").on('change', bs.reload); 
    gulp.watch("./css/*.css").on('change', bs.reload); 
    gulp.watch("./js/*.js").on('change', bs.reload); 

}); 

gulp.task('default', ['serve', 'watch']); 

而且修改CSS文件可以通過瀏覽器同步進行流式傳輸，

gulp.watch("css/*.css").on('change', bs.stream); 

接下來我會建議測試天氣或沒有文件實際beeing監控，並改變吞氣的路徑。相應地觀看任務。 如果您在下面的評論中需要幫助。

Answer 2

你可以試試這個方法嗎？這是我在我的應用程序中實現的功能，用於查找新上傳的圖像並調整大小並移至其他文件夾。

此gulp代碼正在觀看來自文件夾的新圖像並縮小圖像大小並移至縮放文件夾。

可能對您有幫助。

// include gulp 
var gulp = require('gulp'); 
// include plug-ins 
var imagemin = require('gulp-imagemin'); 
var watch = require("gulp-watch"); 
var newer = require("gulp-newer"); 
var gulpgm = require("gulp-gm"); 

//var imgSource = './app/client/media/site/max/*'; 
//var imgDestination = './app/client/media/site/min'; 
var imgSource = [ 
    './app/client/media/**/*.png', 
    './app/client/media/**/*.jpg', 
    './app/client/media/**/*.jpeg', 
    './app/client/media/**/*.gif', 
    './app/client/media/**/**/*.png', 
    './app/client/media/**/**/*.jpg', 
    './app/client/media/**/**/*.jpeg', 
    './app/client/media/**/**/*.gif', 
    './app/client/media/**/**/**/*.png', 
    './app/client/media/**/**/**/*.jpg', 
    './app/client/media/**/**/**/*.jpeg', 
    './app/client/media/**/**/**/*.gif', 
]; 
var imgDestination = './app/client/scaled/'; 

gulp 
     .task('imagemin', function() { 
      console.log("image min called"); 
      return gulp.src(imgSource) 
        .pipe(watch(imgSource)) 
        .pipe(newer(imgDestination)) 
        .pipe(gulpgm(function (gmFile) { 
         return gmFile.minify(); 
        })) 
        .pipe(gulp.dest(imgDestination)); 
     }); 
gulp 
     .task("default", ["imagemin", "watch"]); 

gulp 
     .task("watch", function() { 
      watch(imgSource, ["imagemin"]); 
     });