标签: gulp-livereload

我一直在使用livereload chrome扩展,它将http:// [...] /livereload.js插入到文档中.不幸的是,我正在开发一个需要https的项目,我希望能在本地复制,但我没有必要这样做,因为我可以为不同的环境更改协议,但我想知道是否可以设置gulp -livereload通过https加载？

我尝试了一些事情,比如手动添加脚本没有成功,因为我收到连接错误(GET https://127.0.0.1:35729/livereload.js?snipver=1 net :: ERR_CONNECTION_CLOSED):

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://127.0.0.1:35729/livereload.js?snipver=1';
document.getElementsByTagName('body')[0].appendChild(script)

任何提示都表示赞赏,谢谢!

我在开发工作流程中使用gulp/live reload.使用CSS设置元素样式时,我有时会直接使用Chrome开发工具调整元素的样式规则(编辑:使用元素面板下的event.style {}); 然后当我拥有它们我想要它们时,我将它们复制到Sublime Text并将它们保存到项目中.

问题是我所做的那些临时更改会在我保存之后继续阻止对CSS文件所做的任何更改,因此它们实际上会覆盖Live Reload,这意味着我必须以标准方式重新加载页面以查看(实际)更改在css文件本身中制作,这阻碍了实时重载的有效性.

如果我只改变一个元素,我可以关闭一个特定元素的样式规则,这样可以正常工作,但是对于更复杂的元素,比如菜单,例如样式可能涉及多个元素,那么很难记住哪些已在devtools内被更改以关闭它们.

有没有办法全局禁用或删除这些本地样式规则？

我正在尝试使用Gulp,Sublime Text 3和Chrome使用Livereload,但由于某种原因它不起作用.这就是我做的.

1. 在Chrome中安装了Livereload扩展程序.
2. 已安装gulp-livereload.
3. 设置gulpfile.js.
4. 跑了一口气.

我在这里错过了什么？我是否需要为Sublime Text 3安装Livereload插件？

仅供参考 - Chrome中Livereload扩展程序中的"选项"按钮显示为灰色.

我的Gulpfile:

var gulp = require('gulp');?       
var scssPlugin = require('gulp-sass');
var livereload = require('gulp-livereload');

gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
       .pipe(livereload());
});

gulp.task('watchMyStyles', function() {
    livereload.listen();
    gulp.watch('sass/*.scss', ['myStyles']);
});

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

包文件:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-livereload": "^3.8.0",
    "gulp-sass": "^2.0.4"
  }
}

我想和Django一起使用gulp-liveReload,这可能吗？我已经读过Grunt有一个替代方案,但我更喜欢与Gulp合作,这对我来说更容易.

谢谢,

我的配置完成了它应该做的一切,但它永远不会刷新浏览器.一旦我手动刷新它,就会有变化.我正在连接到默认的localhost:3000.任何想法为什么会这样或如何调试它？

gulpfile.js:

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

gulp.task('html', function () {
    browserSync.reload();
});

gulp.task('sass', function() {
  return gulp.src('./app/scss/style.scss')
    .pipe(sass())
    .pipe(gulp.dest('./app/css'))
    .pipe(browserSync.reload({ stream:true }));
});

gulp.task('serve', function() {
  browserSync({
    server: {
      baseDir: 'app'
    }
  });
});

gulp.task('default', ['serve'], function () {
    gulp.watch('./app/scss/*.scss', ['sass', browserSync.reload]);
    gulp.watch('./app/*.html', ['html', browserSync.reload]);

});

控制台输出的示例:

[BS] Local URL: http://localhost:3000
[BS] External URL: http://192.168.1.3:3000
[BS] Serving files from: app
[17:10:32] Starting 'html'...
[BS] Reloading Browsers...
[17:10:32] Finished …

看起来gulp-livereload需要Chrome的livereload插件才能运行.

有没有办法实现不需要任何浏览器插件的livereload,并且可以在所有浏览器中使用？

任何例子将不胜感激.

我已经将livereload添加到了我的Gulp任务中.它的工作除了我编辑CSS文件时整个页面都被刷新,而不仅仅是页面CSS.

 var gulp = require('gulp');
 var uglify = require('gulp-uglify');
 var concat = require('gulp-concat');
 var minifyCss = require('gulp-minify-css');
 var sizereport = require('gulp-sizereport');
 var watch = require('gulp-watch');
 var batch = require('gulp-batch');
 var run = require('run-sequence');

gulp.task('watch-theme-css', ['theme-css'], function () {
  livereload.listen();
  watch(themeFiles.sass, batch(function (events, done) {
    gulp.start('theme-css', done);
  }))
});

var themeFiles = {
  sass: [
    'mysite/base/sass/*.s+(a|c)ss',
    'mysite/content/sass/*.s+(a|c)ss',
    'mysite/custom/sass/*.s+(a|c)ss'
  ],
  out: {
    css: 'mysite/build'
  }
};

gulp.task('theme-css', function () {
  return gulp.src(themeFiles.sass)
    .pipe(gulpif(env === 'development', sourcemaps.init()))
    .pipe(sass().on('error', sass.logError))
    .pipe(minifyCss({
      compatibility: 'ie8'
    })) …

我gulp-livereload在我的流浪环境中使用(用puphpet生成)有问题.我的电脑是Windows主机,虚拟机是Debian.

我用这个gulpfile:

var gulp       = require('gulp'),
    less       = require('gulp-less')
    lr         = require('tiny-lr'),
    livereload = require('gulp-livereload'),
    server     = lr()
;

gulp.task('less', function () {
    gulp.src('assets/less/*.less')
        .pipe(less())
        .pipe(gulp.dest('build/css'))
        .pipe(livereload(server))
    ;
});

gulp.task('watch', function() {
    gulp.watch('assets/less/*.less', ['less']);
    livereload.listen(35729, function(err){
        if(err) return console.log(err);
    });
});

gulp.task('default', ['watch', 'less']);

当Chrome Extension添加神奇的JS文件时,我会收到以下消息:

无法加载资源:net :: ERR_CONNECTION_TIMED_OUT http://markup.dev:35729/livereload.js?ext=Chrome&extver=0.0.5

但是在我的VM中,如果我运行以下命令行,我就会得到它

wget http://localhost:35729/livereload.js?ext=Chrome&extver=0.0.5

我有这个简单的gulpfile,基本上编译一些较少的文件并触发livereload.我也有nodemon在代码更改时重启服务器.

var gulp = require('gulp'),
    less = require('gulp-less'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    // imagemin = require('gulp-imagemin'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload'),
    nodemon = require('gulp-nodemon')
    // del = require('del'),
    path = require('path');

gulp.task('styles', function() {
  return gulp.src('public/css/less/app.less')
    .pipe(less())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('public/css/'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest('public/css/'))
    .pipe(notify({ message: 'Styles task complete' …

我有一个Ionic 1.3.1项目,其架构基于旧的但是金色的generator-gulp-angular,我想Live Reload在设备(Android)上启用它.

我的gulp配置路径如下所示:

exports.paths = {
  src: 'src',
  dist: 'www',
  tmp: '.tmp',
  e2e: 'e2e'
};

这意味着要在我使用的浏览器中运行项目,gulp serve并在我使用的Android设备中运行gulp build && ionic run android.

我不能使用ionic run android --livereload 此处doc中描述的命令,因为它同步www文件夹(在a之后gulp build)我有缩小文件而不是源文件.

所以我想以某种方式混淆这两个命令gulp serve,ionic run android --livereload但真诚地我不知道如何实现这一点.

我正在尝试gulp-livereload使用我的nodejs服务器.我gulp-nodemon用来在更改文件后重启服务器,这是有效的.我livereload.reload()在正确的时间调用时遇到问题.

我目前正在调用livereload.reload()的.on('start'...我gulpfile.js(每当我的nodemon启动脚本).这可行,但需要几秒钟.原因是当nodemon开始运行它调用脚本的NodeJS livereload.listen() 前的脚本已经调用app.listen(port),所以我没有在服务器浏览器refreshs准备好.

有没有办法监听nodejs nodemon脚本是否已调用app.listen(port)或者可能监听是否正在使用特定端口？

我已经解决了一个小睡眠的问题,但它只是感觉如此错误和肮脏.

我用gulp-livereload在我的gulpfile.js.

它适用于CSS文件,但崩溃的HTML文件.

例如,每次保存时index.html,gulp都会崩溃并出现以下错误.

为什么会这样？

DEMO HERE

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: listen EADDRINUSE
    at errnoException (net.js:904:11)
    at Server._listen2 (net.js:1042:14)
    at listen (net.js:1064:10)
    at Server.listen (net.js:1138:5)
    at Function.app.listen (/Users/mishamoroshko/github-explorer/node_modules/express/lib/application.js:556:24)
    at Gulp.<anonymous> (/Users/mishamoroshko/github-explorer/gulpfile.js:64:10)
    at module.exports (/Users/mishamoroshko/github-explorer/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/Users/mishamoroshko/github-explorer/node_modules/gulp/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/Users/mishamoroshko/github-explorer/node_modules/gulp/node_modules/orchestrator/index.js:214:10)
    at /Users/mishamoroshko/github-explorer/node_modules/gulp/node_modules/orchestrator/index.js:279:18