标签: gulp-browser-sync

我正在学习前端构建系统目前gulp,我想使用brower-sync,问题是它不会在commad行中引发错误,而是当它调出浏览器时它不会显示我的html文件而它会在浏览器窗口中说"无法获取/"错误.这是我的gulpfile.js代码

var gulp = require('gulp'),
   uglify = require('gulp-uglify'),
   compass= require('gulp-compass'),
   plumber = require('gulp-plumber'),
   autoprefixer = require('gulp-autoprefixer'),
   browserSync = require('browser-sync'),
   reload = browserSync.reload,
   rename = require('gulp-rename');


gulp.task('scripts', function() {
   gulp.src(['public/src/js/**/*.js', '!public/src/js/**/*.min.js'])
      .pipe(plumber())
      .pipe(rename({suffix: '.min'}))
      .pipe(uglify())
      .pipe(gulp.dest('public/src/js/'));
});

gulp.task('styles', function() {
   gulp.src('public/src/scss/main.scss')
      .pipe(plumber())
      .pipe(compass({
          config_file: './config.rb',
          css: './public/src/css/',
          sass: './public/src/scss/'
      }))
     .pipe(autoprefixer('last 2 versions'))
     .pipe(gulp.dest('public/src/css/'))
     .pipe(reload({stream:true}));
});


gulp.task('html', function() {
  gulp.src('public/**/*.html');
});  

gulp.task('browser-sync', function() {
    browserSync({
      server: {
         baseDir: "./public/"
      }
   });
});

gulp.task('watch', function() {
   gulp.watch('public/src/js/**/*.js', ['scripts']);
   gulp.watch('public/src/scss/**/*.scss', ['styles']);
   gulp.watch('public/**/*.html', ['html']); …

我正在使用与Gulp的browsersync,在特定的文件更改上运行一些任务.每当我保存文件时,[BS] Reloading Browsers...我的终端都会得到10+ ,并且性能可以理解为滞后.

这是我的gulpfile:

gulp.task('bowerJS', function() {
  gulp.src(lib.ext('js').files)
    .pipe(concat('lib.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('app/assets/js'));
});

gulp.task('bowerCSS', function() {
  gulp.src(lib.ext('css').files)
    .pipe(concat('lib.min.css'))
    .pipe(gulp.dest('app/assets/css/'));
});


// Compile sass into CSS & auto-inject into browsers
gulp.task('less', function() {
    gulp.src('./app/css/*.less')
        .pipe(less())
        .pipe(autoprefixer({
          browsers: ['last 2 versions'],
          cascade: false
        }))
        .pipe(gulp.dest('app/assets/css'))
        .pipe(browserSync.stream());
});

// Render Jade templates as HTML files

gulp.task('templates', function() {
  gulp.src('views/**/*.jade')
    .pipe(jade({
      pretty: true
    }))
    .pipe(gulp.dest('app/src/'))
});

gulp.task('php', function() {
    php.server({ base: 'app', port: 8123, keepalive: true});
});
gulp.task('serve', ['bowerJS', 'bowerCSS', 'less', 'templates', …

我想将Browsersync与PHP一起使用，但似乎无法正常工作。

目前，我正在使用Gulp。可以将Browsersync与XAMPP / MAMP一起使用，还是可以使用Gulp插件读取.php文件？

我用yeoman的样板代码（generator-gulp-angular）创建了一个Angular项目。

现在，在我的控制器中，我正在尝试发出这样的http请求：

$http.get('http://food2fork.com/api/search?key='+key+'&page=1').then(function(response) {
    vm.all = response.data;
});

但我不断收到此错误：

跨域请求被阻止：同源策略禁止读取http：// food2fork上的远程资源...（原因：缺少CORS标头“ Access-Control-Allow-Origin”）

我做了研究，发现我需要使用中间件属性将此访问控制添加到我的服务器，但是我仍然不断收到错误，这是我的server.js文件

var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var cors = require('cors');

var browserSync = require('browser-sync');
var browserSyncSpa = require('browser-sync-spa');

var util = require('util');

var proxyMiddleware = require('http-proxy-middleware');

function browserSyncInit(baseDir, browser) {
  browser = browser === undefined ? 'default' : browser;

  var routes = null;
  if(baseDir === conf.paths.src || (util.isArray(baseDir) && baseDir.indexOf(conf.paths.src) !== -1)) { …

我有 Gulp 和 BrowserSync 的问题，这确实是一个小问题，但却困扰着我。

每次我更改 scss 文件并运行 sass() 对其进行组合时，浏览器都会重新加载并滚动回顶部。

有没有办法防止浏览器每次更改 scss 文件时都这样做？

顺便说一下，这仅发生在 sass 任务上，js 和 php 任务不会导致浏览器滚动到顶部。

我尝试了 Chrome 和 Firefox，我得到了相同的行为。

这是我的 gulpfile.js

gulp.task('serve', ['sass'], function() {

    browserSync.init({
        proxy: "mysite.dev"
    });

    gulp.watch("styles/scss/*.scss", ['sass']);
    gulp.watch("*scripts/*.js", ['js']);
    gulp.watch("*.php", ['php']);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("styles/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("styles/css"))
        .pipe(browserSync.stream());
});
gulp.task('js', function() {
    return gulp.src('scripts/*.js')
        .pipe(browserSync.stream());
});
gulp.task('php', function() {
    return gulp.src('*.php')
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

有没有办法阻止它？

我通过npm使用Visual Studio 2015和gulp.我安装了browser-sync依赖的包chokidar.fsevents.据我所知,只有在MacOSX上才需要这种依赖,因此安装失败并出现此错误:

npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.12

我知道这只是一个警告,没有错误.但VS告诉我,不满足依赖性:

我能做什么？

我是Gulp和BrowserSync的新手,所以我已经多次运行gulp并停止(由终端中的ctrl + z强制).每当我在终端再次开始吞咽时,BrowserSync会给我一个新的PORT号码.

我需要帮助删除BrowserSync的旧实例.终端中是否有命令可以查看和删除旧的BS实例？这甚至可能吗？我在港口3001(本地)和3002(UI)开始了BS,现在我在3018!我想回到3001.

另外,如何修复我的Gulpfile.js代码,这样当我强制终止gulp终端时,browserSync退出本地和UI服务器实例,所以端口号不会继续增加？

Gulpfile.js中的我的BrowserSync部分非常基本:

gulp.task('browser', function () {
  // Serve files from root of this folder
  browserSync({
      server: {
        baseDir: './'
      }
  });
  gulp.watch(['html/*.html', 'js/*.js']).on("change", reload);
});

gulp.task('default', ['styles','browser'], function() {
  gulp.watch('./sass/**/*.scss', ['styles']);
});

在我的mac终端中,最新的BS实例是30018,UI恰好是3021(因为我最近使用了bs.server.close(),它关闭了本地实例,但没有关闭UI实例.

[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3018
    External: http://192.168.1.164:3018
 --------------------------------------
          UI: http://localhost:3021
 UI External: http://192.168.1.164:3021
 --------------------------------------
[BS] Serving files from: ./
^Z
[16]+  Stopped                 gulp

我从 Gulp 3 更改为 Gulp 4，但我无法让它工作。

当我运行 gulp 并保存 SCSS 或 HTML 文件时，它成功创建了一个新文件。如果我再次保存，什么也不会发生。它只运行那些。

下面是我的gulpfile.js

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

sass.compiler = require('node-sass');


gulp.task('sass', function() {
 return gulp.src('template/assets/scss/**/*.scss')
   .pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError))
   .pipe(gulp.dest('template/assets/css/'))
   .pipe(browserSync.stream());
});


// Static Server and watching scss/html files
gulp.task('server', gulp.series('sass', function(){
    browserSync.init({
        server: {
            baseDir: "./template"
        }
    });
    gulp.watch("template/assets/scss/**/*.scss", gulp.task('sass'));
    gulp.watch("template/assets/scss/**/*.scss", browserSync.reload);
    gulp.watch("template/**/*.html", browserSync.reload);
}));


gulp.task('watch', function() {
    gulp.watch(['sass']);
});


gulp.task('default', gulp.series(gulp.parallel('sass', 'watch', 'server')))

我正处于js的学习之路,刚开始使用yeoman发电机.我使用gulp进行预处理和其他工作.当我浏览gulpfile.js时,我发现了这段代码.

gulp.task('serve', ['styles', 'html', 'watch'], () => {
    browserSync({
        notify: false,
        port: 9000,
        server: {
            baseDir: 'app'
        }
    })
});

我可以理解,当我们执行时gulp-serve,它会运行样式,html和监视任务,并在端口9000中打开一个开发服务器.

但我不明白这() =>意味着什么.

如果有人能告诉我这意味着什么,将非常感激.

提前致谢.

我使用 DDEV 作为我的本地托管环境，我的许多项目都通过 Gulp 实现了前端自动化。Browsersync是我们前端设置的主要组件，它要求 DDEV 容器将端口暴露给主机。手头的问题有两个方面，从容器向主机公开端口的最佳方法是什么，以及在 DDEV 环境中浏览器同步 Gulp 任务的最佳设置是什么？