今天我迁移到Gulp 4，但我无法让我的手表功能工作。

// Watch
gulp.task('watch', gulp.series('typescript', 'sass', 'browserSync', function(){
  gulp.watch('./app/styles/**/*.scss', gulp.series('sass'));
  gulp.watch('app/scripts/**/*.ts', gulp.series('typescript'));
  gulp.watch('./app/*.html', browserSync.reload);
}));

typescript, sass,browserSync将运行，但watch不会对文件更改做出反应。

我想制作一个多维数组的克隆,以便我可以使用克隆数组进行arround而不会影响主数组.

我正在使用以下功能:

Array.prototype.clone = function () { 
   var newArray = new Array(this.length);
     for(var i=0; i < this.length; i++ ){
        newArray[i] = this[i];
   }
   return newArray;
};

但问题是,因为它使用数组原型,所以它将克隆我的所有数组.所以任何机构都可以告诉我这样做的最佳方法是什么.

在这个问题中,我发现了很多有趣的函数来生成随机颜色.但我需要一个随机颜色生成器,它接受色调,饱和度和暗度范围以及我们需要的颜色数量.实际上我可以写一个随机颜色生成器,但我不太了解颜色数与颜色的暗度,色调和饱和度之间的关系.我希望函数导出数组中的颜色.我还在这里制作了一个jsfiddle文件进行测试.

谢谢,

我有一张桌子：

请查看正确的TD。

黄色 div 应该有其高度（强制）。我需要垂直对齐checkbox+SPAN

所以我把它们都写成：float:leftand Played with margin-top。

但是当我减小浏览器宽度时，宽度SPAN会减小：

我已经把无包装了。

我不在乎文本 (td#2 ) 是否会被换行，我只需要check-box+span始终在一起。
我不能width在包装 div 上使用 a，因为这里Yes是英文的，但它是一个多语言网站。所以我需要将文本调整为原始长度。

我该怎么做才能使这两个元素都不会被包裹？

这是jsbin。这里是

td{
  border:solid 1px green;
}

.myCheck{
  float:left;
  margin-top:16px;
}


.mySpan{
  float:left;
  margin-top:12px;
}

<table style='width:100%;' cellspacing=0 cellpadding=0>
  <tr>
    <td>
      1
    </td>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing tempor incididunt ut labore et 
    </td>
    <td style='white-space:nowrap;'>
      <div style='white-space:nowrap; height:50px;background-color:yellow;float:left;'>
        <input …

考虑这个简单的场景:

(function x(){
  var foo = function(){
    console.log('foo is alive!');

    // set 'foo' variable to an empty function, using a delay
    setTimeout(function(){
      foo = function(){};
    },0);
  }

  foo();
  // calling 'foo' again, after it should be an empty function
  setTimeout(foo,100);
})();

如果您要在控制台中复制并运行此代码,它将输出foo is alive!两次.我试图理解为什么不会foo被空函数覆盖.foo显然是一个在超时回调中被识别的变量,它指向该函数.

对这个问题
感到无聊:这是一个简单的测试案例,用于我使用AJAX回调而不是在这个简单示例中使用的超时的更复杂场景.

gulp-load-plugins没有加载任何插件.任何人都可以建议为什么会这样？

Node: v0.12.0
NPM: v2.7.3

我的package.json:

{
  "name": "foo",
  "version": "0.0.1",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-load-plugins": "^0.9.0"
  }
}

我的gulpfile.js:

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

console.log(JSON.stringify(plugins)); // {}

gulp.task('default');

旧的display:box具有垂直对齐元素的能力,因此对于具有H定义高度的N个元素,它们将相对于父元素排列自己(垂直)对齐.

有没有办法使用当前dislpay:flex系统实现这一目标？

我有三个类似编码的元素.infobtnlg, .twitter, .infobtnsm.

第一个.infobtnlg很好地位于div中,.section1正如我想要的那样,第二个.twitter和第三个.infobtnsm不在它们各自的部分中.宽度设置,左/右边距为自动.我添加text-align: center;了很好的措施.

我错过了什么？

DEMO PLAYGROUND

HTML

<div class="trisection">
    <div class="section1">
        <button type="button" class="infobtnlg">The May Difference</button>
        <button type="button" class="infobtnlg">Parent Reflections</button>
        <button type="button" class="infobtnlg">Make a Gift</button>
    </div>   

    <div class="section2">
        <div class="twitter">
            <img src="/images/twitter-bl.png" alt="twitter"/>Announcements
            <hr>
        </div> 
    </div>
    <div class="section3">
        <button type="button" class="infobtnsm" style="background-color: #003b76;">In the News</button>
        <button type="button" class="infobtnsm" style="background-color: #5a9331;">The May Way</button>
        <button type="button" class="infobtnsm" style="background-color: #ff0000;">Meet Our Teachers</button>
        <button type="button" class="infobtnsm" style="background-color: #ffcc00;">Friends …

我不明白为什么以及在什么情况下这将被使用..

我当前的Web设置包含许多组件,这些组件只是函数或工厂函数,每个组件都在自己的文件中,每个函数都"骑"到app命名空间,如:app.component.breadcrumbs = function(){...等等.

然后GULP只是组合了所有文件,最后我得到了一个文件,所以页面控制器(每个"页面"都有一个加载页面所需组件的控制器)可以加载它的组件,如:app.component.breadcrumbs(data).

所有组件都可以按需轻松访问,单个javascript文件可以很好地缓存所有内容.这种工作方式似乎非常好,从未发现这种工作方式存在任何问题.当然,这可以(并且是)很好地缩放.

那么ES6如何为功能输入比我描述的更好？

导入函数的处理是什么,而不是仅将它们附加到App的命名空间？让他们"依恋"更有意义.

文件结构

/dist/app.js                     // web app namespace and so on
/dist/components/breadcrumbs.js  // some component
/dist/components/header.js       // some component
/dist/components/sidemenu.js     // some component
/dist/pages/homepage.js          // home page controller

// GULP concat all above to
/js/app.js // this file is what is downloaded

然后里面homepage.js看起来像这样:

app.routes.homepage = function(){
    "use strict";
    var DOM = { page : $('#page') };

    // append whatever components I want to this page
    DOM.page.append(
        app.component.header(),
        app.component.sidemenu(), …

我正在尝试为我的UI项目之一使用本机Web组件，并且对于此项目，我没有使用任何框架或库（例如Polymer等）。我想知道在两者之间有什么最佳的交流方式或其他方式像我们在angularjs / angular中所做的那样的Web组件（例如消息总线概念）。

当前，在UI Web组件中，我正在使用dispatchevent发布数据和接收数据，正在使用addeventlistener。例如，有2个Web组件，ChatForm和ChatHistory。

// chatform webcomponent on submit text, publish chattext data 
this.dispatchEvent(new CustomEvent('chatText', {detail: chattext}));

// chathistory webcomponent, receive chattext data and append it to chat list
this.chatFormEle.addEventListener('chatText', (v) => {console.log(v.detail);});

请让我知道实现此目的的其他方法。任何可以轻松与本机UI Web组件集成的优秀库，如postaljs等。