- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
因此,我想将 browsersync 连接到我无法控制的站点。基本上我希望它用我计算机上的 css 文件替换实时站点上的 css 文件(它是从一堆较少的文件中编译的)。当该本地 css 文件更改时,browsersync 应该像往常一样注入(inject) css。我将 browsersync 与 gulp 一起使用,因为我还希望运行其他任务。
下面的代码将打开 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
{
"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"
}
}
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']);
});
最佳答案
都想通了。
这是更新的代码。
browserSync.init({
proxy: "http://gulpjs.com/",
rewriteRules: [
{
match: new RegExp("css/main.css"),
fn: function() {
return "main.min.css"
}
}
],
files: "css/*.css",
serveStatic: ['./css']
});
关于gulp - Browsersync 提供本地文件而不是远程文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41833257/
我安装了一个插件 BrowserSync Plugin for Cordova并在控制台中运行此输入:cordova run -- --live-reload。我更改了代码和控制台显示: [BS] S
我刚刚安装了 Firefox Dev Edition ,而且我不知道如何告诉 browsersync 在启动时启动它。 我知道有一个 browser 选项,我可以在其中指定“firefox”,但我如何
因此,我想将 browsersync 连接到我无法控制的站点。基本上我希望它用我计算机上的 css 文件替换实时站点上的 css 文件(它是从一堆较少的文件中编译的)。当该本地 css 文件更改时,b
当我运行 Gulp 时,UI 页面在 http://localhost:3001 上工作,但在 http://localhost:3000浏览器提供一个卡住加载的空白页面,没有控制台错误。 我在 Wi
我正在使用 Gulp 和 BrowserSync 在 localhost:9000 上为我的 web 应用程序提供服务. 我如何在 localhost:9000/some/multi/level/pa
我在 gulp 中遇到了 browserSync 插件的烦人问题。如果我更改 html 中的某些内容,则更改会在第二次刷新后显示。仅适用于 html,如果我更改 css 或 js,则更改在第一次重新加
我想我遇到了一个有趣的问题。在 gulp 中调用此任务时: gulp.task("cssReload",function () { browserSync.stream(); }); 它不起作
我使用了 gulpfile.js 的许多变体和全局浏览器同步的“browser-sync start --server --files "*.html”命令,但自动重新加载不起作用。我只收到了 [Br
我是 gulp 新手,我正在尝试让浏览器同步工作。除了同步滚动不起作用之外,它似乎工作正常。任何人都可以看到我的设置可能有什么问题。 var gulp = require('gulp'), j
Browsersync 只是重新加载 index.html,即使我设置了 basedir,甚至是文件选项中列出的特定文件。 我看过他们的文档,但我拥有他们所说的一切,但它仍然只刷新或同步index.h
我有浏览器同步设置并通过 gulp 运行。尽管当浏览器是事件且选定的窗口时它会自动刷新,但如果不是,则不会。 这意味着我无法将编辑器和浏览器并排放置,并且在编辑器中更改代码时无法在浏览器上看到持续更新
上周我尝试从头开始为一个小型 javascript 项目编写一个 gulpfile。我选择使用 BrowserSync 来编译我的代码并重新加载浏览器 (Chrome)。整个周末它都运行良好,我完成了
我们的 HTML 中有 Google Analytics 和 Azure Application Insights 分析脚本,包括 Google Analytics。他们在 中的标签.当我们使用
BrowserSync 的新手。我正在尝试找出如何让它继续下去哈哈。 我存储所有内容的主文件称为“gulpwork”。 里面有4个文件夹;两个用于将 Pug ('src') 转换为 HTML ('di
我在使用 browserSync 时遇到问题,在尝试了几种不同的方法后我无法重新加载 do 触发器。 BrowserSync 本身已启动并正在运行,但当我手动重新加载时没有任何反应,我必须打开一个新选
我在我的网站上使用 BrowserSync。以下实时重新加载我的 CSS 更改,但它会在 http://localhost:3000/ 打开一个网页 gulp.task('sass-watch', [
我刚刚安装了 Laravel 5.3,这是一个全新的安装,在查看文档后,我设置了 Gulpfile,如下所示: elixir((mix) => { mix.sass('app.scss')
我将 gulp 与 browserSync 与下一个配置一起使用(简化): gulp.task('serve', ['compile_styles'], function() { browse
考虑这个example BrowserSync + Gulp 页面上有关浏览器重新加载的信息,特别是这部分: // use default task to launch BrowserSync and
BrowserSync 初始化时抛出 TypeError: [12:02:53] TypeError: undefined is not a function at Object.init (
我是一名优秀的程序员,十分优秀!