Browsersync dienen lokale Dateien anstelle von Remote-Dateien

Question

Also ich möchte browsersync mit einer Site verbinden, die ich nicht kontrollieren kann. Im Grunde möchte ich, dass es eine CSS-Datei auf der Live-Site durch eine CSS-Datei auf meinem Computer ersetzt (die aus einer Menge weniger Dateien kompiliert wird). Wenn diese lokale CSS-Datei geändert wird, sollte browsersync das CSS wie normalerweise injizieren. Ich benutze browsersync mit Schluck, da ich auch andere Aufgaben ausführen lassen möchte.

Der folgende Code wird gulpjs.com öffnen und main.css von gulpjs.com korrekt zuordnen und versuchen, etwas an seinem Platz zu servieren. Aber alles, was ich bekomme, ist ein 404 für die main.min.css. Es sieht es hier

http://localhost:3000/css/main.min.css

gezippt ich das Testprojekt (Knotenmodule nicht enthalten) bis Sie es hier herunterladen können - https://www.dropbox.com/s/5x5l6bbxlwthhoo/browsersyncTest.zip?dl=0

Hier ist, was ich bisher ...

Projektstruktur

css/ main.min.css (compiled from app.less) 

less/ app.less 

gulpfile.js 

package.json 

package.json

{ 
    "name": "browsersyncTest", 
    "devDependencies": { 
    "autoprefixer": "^6.7.0", 
    "browser-sync": "^2.18.6", 
    "cssnano": "^3.10.0", 
    "gulp": "^3.9.1", 
    "gulp-clean-css": "^2.3.2", 
    "gulp-less": "^3.3.0", 
    "gulp-postcss": "^6.3.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-uglify": "^2.0.0", 
    "gulp-watch": "^4.3.11" 
    } 
} 

gulpfile.js

var gulp = require('gulp'); 
var less = require('gulp-less'); 
var postcss = require('gulp-postcss'); 
var autoprefixer = require('autoprefixer'); 
var cssnano = require('cssnano'); 
var cleancss = require('gulp-clean-css'); 
var rename = require('gulp-rename'); 
var watch = require('gulp-watch'); 
var browserSync = require('browser-sync').create(); 

gulp.task('default', function() { 

}); 

gulp.task('less', function() { 
    var plugins = [autoprefixer({browsers: ['last 2 versions', 'ie >= 10']})]; 
    return gulp.src('less/app.less') 
     .pipe(less()) 
     .pipe(rename('main.min.css')) 
     //.pipe(postcss(plugins)) 
     //.pipe(cleancss()) 
     .pipe(gulp.dest('css')) 
     .pipe(browserSync.stream()); 
}); 

gulp.task('watch', ['less'], function() { 

    browserSync.init({ 
     proxy: "http://gulpjs.com/", 
     files: ['css/**'], 
     serveStatic: ['css'], 
     rewriteRules: [{ 
      match: new RegExp('css/main.css'), 
      fn: function() { 
       return 'css/main.min.css'; 
      } 
     }] 
    }); 

    gulp.watch('less/**/*.less', ['less']); 
}); 

Dank einem Haufen!

Answer 1

Haben Sie alles herausgefunden. Ich folgte nur diesem Tutorial - http://quick.as/w6ri32qe

Hier ist der aktualisierte Code.

browserSync.init({ 
    proxy: "http://gulpjs.com/", 
    rewriteRules: [ 
     { 
      match: new RegExp("css/main.css"), 
      fn: function() { 
       return "main.min.css" 
      } 
     } 
    ], 
    files: "css/*.css", 
    serveStatic: ['./css'] 
    });