标签: browser-sync

我是Gulp的新手,我想利用它的自动scss编译和浏览器同步.但我无法让它发挥作用.

我删除了所有内容,只在Browsersync网站上留下了示例的内容:

http://www.browsersync.io/docs/gulp/#gulp-sass-css

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

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

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

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

我可以打电话给gulp发球.该网站正在显示,我收到了来自Browsersync的消息.当我修改HTML时,页面被重新加载.然而,当我修改scss时,我可以看到:

[BS] 1 file changed (test.css)
[15:59:13] Finished 'sass' after 18 ms

但我必须手动重装.我错过了什么？

运行此命令时它做了什么:

npm install --save-dev package1 package2

绝对不是安装多个软件包,但它看起来很重要.(例如https://www.browsersync.io/docs/gulp)

对我来说,它会抛出ERR:

C:\1HLAVNI\Lukas\Webdesign\lukasradek>npm install --save-dev gulp-babel gulp-add-src

> bufferutil@1.1.0 install C:\1HLAVNI\Lukas\Webdesign\lukasradek\node_modules\bufferutil
> node-gyp rebuild


C:\1HLAVNI\Lukas\Webdesign\lukasradek\node_modules\bufferutil>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
gyp ERR! stack     at failNoPython (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:401:14)
gyp ERR! stack     at C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\configure.js:356:11
gyp ERR! stack     at FSReqWrap.oncomplete (fs.js:123:15)
gyp ERR! System Windows_NT 10.0.10586 …

我正在安装browserSync npm install browser-sync

但有问题 npm WARN optional dep failed, continuing fsevents@0.3.6

这个错误是什么以及如何解决？

gulp没有开始

PS:之前有用过.已经创建了2个项目.清除缓存 - 没有帮助

我正在使用我在NPM上安装的浏览器同步来观察我的项目,因为我正在处理它们.有没有办法让它一次看到根文件夹和css文件夹？

(如果需要,请参阅我的上一个问题以获取更多背景信息.)

我正在开发一个使用分离的前端和后端的应用程序:

• 后端是一个Rails应用程序(提供服务localhost:3000),主要提供REST API.
• 前端是一个AngularJS应用程序,我正在使用Gulp构建并在本地服务(使用BrowserSync)localhost:3001.

为了让两端相互通信,同时尊重同源策略,我将nginx配置为两者之间的代理,可用localhost:3002.这是我的nginx.conf:

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  include mime.types;
  default_type application/octet-stream;
  sendfile on;
  keepalive_timeout 65;

  server {
    listen 3002;
    root /;

    # Rails
    location ~ \.(json)$ {
      proxy_pass http://localhost:3000;
    }

    # AngularJS
    location / {
      proxy_pass http://localhost:3001;
    }
  }
}

基本上,.json我发送到Rails服务器的任何文件请求,以及任何其他请求(例如,对于静态资产),我都要发送到BrowserSync服务器.

我的BrowserSync任务gulpfile.coffee:

gulp.task 'browser-sync', ->
  browserSync
    server:
      baseDir: './dist'
      directory: true
    port: 3001
    browser: 'google chrome' …

当我试图开始gulp serve 它引发错误

module.js:338 throw err; ^

错误:无法找到模块'browser-sync'

at Function.Module._resolveFilename (module.js:336:15)
at Function.Module._load (module.js:278:25)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/home/sajad/p_projects/my-project/gulpfile.js:17:19)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)

Run Code Online (Sandbox Code Playgroud)

在那之后我尝试了sudo npm rm browser-sync && npm install browser-sync 它的提升后续错误

错误的ERR!Linux 3.13.0-24-通用

错误的ERR!argv"/ usr/bin/node""/ usr/bin/npm""install""browser-sync"npm ERR!节点v0.12.7 npm ERR!npm v2.11.3 npm ERR!文件/home/sajad/.npm/escape-html/1.0.2/package/package.json npm ERR!代码EJSONPARSE

错误的ERR!无法解析json npm ERR!没有数据,空输入为1:1 npm ERR!错误的ERR!^ npm ERR!文件:/home/sajad/.npm/escape-html/1.0.2/package/package.json npm ERR!无法解析package.json数据.错误的ERR!package.json必须是实际的JSON,而不仅仅是JavaScript.错误的ERR!错误的ERR!这不是npm中的错误.错误的ERR!告诉包作者修复他们的package.json文件.JSON.parse

错误的ERR!请在任何支持请求中包含以下文件:npm ERR!/home/sajad/p_projects/my-project/npm-debug.log

指导我如何开始gulp serve以及如何解决这些错误

我正在尝试改善我的节点中的DEV体验.为此,我想:

a)在更改服务器端代码时重新启动服务器
b)在客户端代码更改时刷新浏览器.

为了实现这一目标,我开始将nodemon和browserSync集成到我的gulp脚本中.

在我的gulp脚本中,我有以下任务:

gulp.task('startDevEnv', function(done) {
    // Begin watching for server-side file changes
    nodemon(
        { script: input.server, ignore:[input.views] })
        .on('start', function () {
            browserSync.init({
                proxy: "http://localhost:3002"
            });
        })
    ;    

    // Begin watching client-side file changes
    gulp.watch([ input.css, input.js, input.html ], function() { browserSync.reload(); });
    done();
});

运行上述任务后,我的浏览器将打开http:// localhost:3000 /.我的应用程序按预期显示.但是,在控制台窗口中,我注意到:

Error: listen EADDRINUSE :::3002

我在某种程度上理解.我有app.set('port', process.env.PORT || 3002);我的server.js文件.然而,我认为这是设置代理值的目的.不过,每当我进行代码更改时,我在控制台窗口中都会看到以下相关错误:

[07:08:19] [nodemon] restarting due to changes...
[07:08:19] [nodemon] starting `node ./dist/server.js` …

我有一个Wordpress/MySQL docker容器,我用它来开发主题和插件.我在localhost:8000上访问它.

它使用Gulp构建过程,我正在尝试添加browsersync.我很难让browserync实际代理出容器.从Gulp输出中我可以看到它生成了更改,而实际上并没有在浏览器中进行任何更改.

继承人我的docker-compose.yml,gulpfile,dockerfile和shell脚本.

version: '2'

services:
    wordpress_db:
        image: mariadb
        restart: 'always'
        ports:
            - 3360:3306
        volumes:
            - ./db_data:/docker-entrypoint-initdb.d
        environment:
            MYSQL_ROOT_PASSWORD: wordpress
            MYSQL_DATABASE: wordpress

    wordpress:
        depends_on:
            - wordpress_db
        image: wordpress
        restart: 'always'
        environment:
            WORDPRESS_DB_NAME: wordpress
            WORDPRESS_DB_USER: root
            WORDPRESS_DB_PASSWORD: wordpress
        ports:
            - 8000:3000
        volumes:
            - ./uploads:/var/www/html/wp-content/uploads
            - ./plugins:/var/www/html/wp-content/plugins
            - ./theme:/var/www/html/wp-content/themes/theme
        links:
            - wordpress_db:mysql

    composer:
        image: composer/composer:php7
        depends_on:
            - wordpress
        restart: 'no'
        environment:
            ACF_PRO_KEY: this_would_be_my_ACF_pro_key_:)
        volumes_from:
            - wordpress
        working_dir: /var/www/html/wp-content/themes/theme
        command: install

    node:
        restart: 'no'
        image: node:slim
        depends_on:
            - wordpress
        volumes_from:
            - wordpress …

我正在使用Gulp和BrowserSync来为我的webapp服务localhost:9000.
我该如何服务于webapp localhost:9000/some/multi/level/path呢？

我刚刚安装了Laravel 5.3,这是一个全新的安装,在查看了Docs后我设置了我的Gulpfile如下:

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js')
       .version(['css/app.css', 'js/app.js'])
       .browserSync({
         proxy: 'subdomain.mydomain.dev'
       });
});

出于某种原因,我每次运行gulp watch它都会启动浏览器localhost:3000

我究竟做错了什么？如果我设置地址完全相同,是不是应该将BrowserSync指向我的Mamp Vhost？