草庐IT

javascript - gulp-connect 和 connect.reload

coder 2024-07-26 原文

我正在尝试设置一个简单的服务器来测试一些 d3.js 的东西。我正在关注 tagtree.tv 上的截屏视频。我的代码与他的相匹配，但是当我更改我的 JS 或 SASS 文件时，我无法让我的 index.html 重新加载。

据我所知，我是 gulp 的新手，但这是基于我的假设，即调用 connect.reload() 将重新加载正在查看其内容的任何浏览器。应该注意的是，livereload JS 被插入到我的 index.html 文件中。

我的目录结构如下:

d3play
 -bower_components
 -dist
   -css
   -scripts
 - node_modules
 -sass
 -scripts
 gulpfile.js
 index.html
 package.json

我的 gulpfile.js 看起来像这样:

var gulp = require('gulp'),
  connect = require('gulp-connect'),
  traceur = require('gulp-traceur'),
  sass = require('gulp-ruby-sass');

gulp.task('connect', function(){
  connect.server({
    livereload: true
  });
});

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

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

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

gulp.task('watch', function(){
  gulp.watch(['./sass/*.scss'], ['sass']);
  gulp.watch(['./scripts/*.js'], ['traceur']);
  gulp.watch(['./dist/**/*.*'], ['reload']);
});

gulp.task('default', ['connect', 'sass', 'traceur', 'watch']);

最佳答案

这是一个simple and tested livereload solution基于 connect 服务器和 connect-livereload 和 gulp-livereload 插件可能有帮助:


var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');

var config = {
    rootDir: __dirname,
    servingPort: 8080,

    // the files you want to watch for changes for live reload
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js']
}

// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);

gulp.task('watch', ['connect'], function () {
  gulpLivereload.listen();
  gulp.watch(config.filesToWatch, function(file) {
    gulp.src(file.path)
      .pipe(gulpLivereload());
  });
});

gulp.task('serve', ['connect'], function () {
  return opn('http://localhost:' + config.servingPort);
});

gulp.task('connect', function(){
  return connect()
    .use(connectLivereload())
    .use(connect.static(config.rootDir))
    .listen(config.servingPort);
});

关于javascript - gulp-connect 和 connect.reload，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27325207/

connectgulp-connect39gulpjavascriptlivereload

有关javascript - gulp-connect 和 connect.reload的更多相关文章

  1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  2. ruby HTTPClient : How to use persistent connections? - 2

    如何通过HTTPClient使用持久HTTP连接？发送HTTP请求时是否只是设置KeepAlive的问题？文档指出支持持久连接，但没有告诉我们如何使用它们。 最佳答案 是availableinNet::HTTP如文档中所写，Net::HTTP.startimmediatelycreatesaconnectiontoanHTTPserverwhichiskeptopenforthedurationoftheblock.Theconnectionwillremainopenformultiplerequestsintheblockift

  3. ruby - Unicorn 使用 `reload` 而不是 `restart`？ - 2

    我在这里对我的部署策略有点困惑，在什么情况下部署时我想向unicorn发送reload信号？例如在我的例子中它会是这样的:sudokill-sUSR2`cat/home/deploy/apps/my_app/current/tmp/pids/unicorn.pid`我一直在通过杀死那个pid来部署我的应用程序，然后通过类似的东西再次启动unicorn:bundleexecunicorn-cconfig/unicorn/production.rb-Eproduction-D我只是想知道为什么要使用重新加载？我可以通过这样做获得部署的任何性能吗？ 最佳答案

  4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  5. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  6. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  7. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

    出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

  8. ruby - 使用 watir-webdriver 打开多个线程导致 'Connection refused' 错误 - 2

    我有这个简单的例子:require'watir-webdriver'arr=[]sites=["www.google.com","www.bbc.com","www.cnn.com","www.gmail.com"]sites.eachdo|site|arr每次我运行这个脚本，我都会得到ruby/2.1.0/net/http.rb:879:in`initialize':Connectionrefused-connect(2)for"127.0.0.1"port9517(Errno::ECONNREFUSED)或者其中一个浏览器在至少一个线程上意外关闭。另一方面，如果我在每个循环周期结束

  9. ruby-on-rails - connect() 到 unix :/var/run/unicorn. 连接到上游时 sock 失败(111:连接被拒绝) - 2

    我遵循ruby​​onrails一个应用程序点击部署。数据库做得很好，即使我检查Rails控制台一切正常017/02/2615:34:17[error]18564#0:*31connect()tounix:/var/run/unicorn.sockfailed(111:Connectionrefused)whileconnectingtoupstream,client:121.52.156.57,server:_,request:"GET/HTTP/1.1",upstream:"http://unix:/var/run/unicorn.sock:/",host:"188.166.157

  10. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接？ - 2

    我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

随机推荐