Browsersync служит для локальных файлов вместо удаленных файлов

Question

Так что я хочу подключиться к браузерам на сайт, в котором я не контролирую. В основном я хочу, чтобы он заменил файл css на реальном сайте css-файлом на моем компьютере (который скомпилирован из нескольких меньших файлов). Когда этот локальный файл css будет изменен, браузеру linux следует ввести css, как обычно. Я использую browsersync с gulp, так как я также хочу, чтобы выполнялись другие задачи.

Код ниже откроет gulpjs.com и правильно сопоставит main.css с gulpjs.com и попытается выполнить что-то на своем месте. Но все, что я получаю, - это 404 для main.min.css. Она ищет его здесь

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

Я застегнул тестовый проект (модули узла не входит) вы можете скачать здесь - https://www.dropbox.com/s/5x5l6bbxlwthhoo/browsersyncTest.zip?dl=0

Вот что я до сих пор ...

Структура проекта

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

Благодаря кучу!

Answer 1

Получил все выяснено. Я просто следовал этому руководству - http://quick.as/w6ri32qe

Вот обновленный код.

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