所以我想将browsersync连接到一个我无法控制的网站.基本上我希望它用我的计算机上的css文件替换实时站点上的css文件(它从一堆较少的文件中编译).当更改本地css文件时,browsersync应该像通常那样注入css.我正在使用browsersync和gulp,因为我还想运行其他任务.
下面的代码将打开gulpjs.com并正确匹配gulpjs.com中的main.css,并尝试在其中提供一些东西.但我得到的是main.min.css的404.它在这里寻找它
HTTP://本地主机: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']); });
谢谢你!
一切都搞清楚了.我刚刚按照本教程 - 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'] });