Gulp, livereload, 玉

Question

需要帮助。 我使用 gulp-conect 和它的 livereload 方法。但是如果我及时建立一些模板，就会得到很多页面刷新。有什么解决方案，我想用单页刷新构建几个模板？

Answer 1

所以，我重现了您遇到的问题并遇到了这个可行的解决方案。

首先，让我们检查一下你需要的 gulp 插件：

• 吞玉
• gulp-livereload
• 可选：gulp-load-plugins

如果您需要其中一些，请访问：

http://gulpjs.com/plugins/

搜索并安装它们。

策略：我创建了一个名为 live 的 gulp 任务，它将检查您的 *.jade 文件，当您处理某个文件并保存它时，gulp 会将其编译为 html 并刷新浏览器。

为了实现这一点，我们定义了一个名为 compileAndRefresh 的函数，它将获取观察者返回的文件。它将将该文件编译为 html 并刷新浏览器（使用适用于 chrome 的 livereload 插件进行测试）。

注意事项：

• 我总是使用 gulp-load-plugin 加载插件，所以我使用 plugins.jad 和 plugins.livereload。
• 这只会编译已保存的文件，并且当您在命令行上实时执行任务时。不会编译其他未使用的文件。为了实现这一点，您需要定义一个任务来编译所有文件，而不仅仅是那些已更改的文件。
• 假设 /jade 中的 .jade 文件和 html 输出到 /html

所以，这里是 gulpfile.js：

var gulp = require('gulp'),
    gulpLoadPlugins = require('gulp-load-plugins'),
    plugins = gulpLoadPlugins();

gulp.task('webserver', function() {
  gulp.src('./html')
    .pipe(plugins.webserver({
      livereload: true
    }));
  gulp.watch('./jade/*.jade', function(event) {
    compileAndRefresh(event.path);
  });
});

function compileAndRefresh(file) {
  gulp.src(file)
    .pipe(plugins.jade({
    }))
    .pipe(gulp.dest('./html'))
}

发布编辑注释：

• 从 compileAndRefresh 中删除了 liveReload 调用（网络服务器会这样做）。
• 使用 gulp-connect 的 gulp-server 插件，正如他们在其存储库中所建议的那样：“使用 gulp.src() API 基于 connect 3 的新插件。用纯 javascript 编写。https://github.com/schickling/gulp-webserver”

Answer 2

你可以做的就是只观察发生变化的文件，然后只对那些发生变化的文件应用一个函数，像这样：

gulp.task('live', function() {
  gulp.watch('templates/folder', function(event) {
    refresh_templates(event.path);
  });
});

function refresh_templates(file) {
  return 
    gulp.src(file)
      .pipe(plugins.embedlr())
      .pipe(plugins.livereload());
}

PS：这不是一个工作示例，我不知道您是否使用了 embedlr，但重点是您可以观看，并使用回调来调用另一个函数，其中包含正在更改的文件和操作只有那些文件。另外，我认为您的目标是刷新浏览器的模板，但您可以随意操作，将它们保存在 dest 上或做任何您想做的事情。

这里的重点是展示如何操作发生变化的文件：watch回调+自定义函数。

Answer 3

var jadeTask = function(path) {
path = path || loc.jade + '/*.jade';

if (/source/.test(path)) {
    path = loc.jade + '/**/*.jade';
}

return gulp.src(path)
        .pipe(changed(loc.markup, {extension: '.html'}))
        .pipe(jade({
            locals  : json_array,
            pretty  : true
        }))
        .pipe(gulp.dest(loc.markup))
        .pipe(connect.reload());

}

Answer 4

首先安装需要的插件

• 一饮而尽
• 快递
• 吞玉
• 连接-livereload
• 小lr
• 连接

然后写代码

var gulp    = require('gulp'); 
var express = require('express'); 
var path    = require('path'); 
var connect = require("connect"); 
var jade    = require('gulp-jade'); 
var app     = express(); 

gulp.task('express', function() {    
 app.use(require('connect-livereload')({port: 8002})); 
 app.use(express.static(path.join(__dirname, '/dist')));   
 app.listen(8000);  
});

var tinylr;
gulp.task('livereload', function() {
  tinylr = require('tiny-lr')();
  tinylr.listen(8002);
});

function notifyLiveReload(event) {
  var fileName = require('path').relative(__dirname, event.path);
  tinylr.changed({
    body: {
      files: [fileName]
    }
  });
}

gulp.task('jade', function(){   
  gulp.src('src/*.jade')   
      .pipe(jade()) 
      .pipe(gulp.dest('dist')) 
});

 gulp.task('watch', function() {
  gulp.watch('dist/*.html',  notifyLiveReload);
  gulp.watch('src/*.jade', ['jade']);
});

gulp.task('default', ['livereload', 'express', 'watch', 'jade'], function() {

});

查找示例here at GitHub