【问题标题】:Browsersync serve local files instead of remote filesBrowsersync 提供本地文件而不是远程文件
【发布时间】:2017-01-24 16:23:42
【问题描述】:

所以我想将 browsersync 连接到我无法控制的站点。基本上我希望它用我计算机上的 css 文件替换实时站点上的 css 文件(它是从一堆较少的文件中编译的)。当该本地 css 文件更改时,browsersync 应该像往常一样注入 css。我正在使用带有 gulp 的 browsersync,因为我还想运行其他任务。

下面的代码将打开 gulpjs.com 并正确匹配 gulpjs.com 中的 main.css 并尝试在它的位置提供一些东西。但我得到的只是 main.min.css 的 404。它在这里寻找它

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

非常感谢!

【问题讨论】:

    标签: gulp browser-sync


    【解决方案1】:

    一切都搞定了。

    这是更新后的代码。

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

    【讨论】:

      猜你喜欢
      • 2011-08-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-12-31
      • 1970-01-01
      相关资源
      最近更新 更多