Gulp插件制作 – 使用流处理

强烈建议写插件的时候支持流处理,本文是关于创建插件支持流的介绍。确保遵循规范处理错误,在内容处理的同时进行异常捕获。

使用流处理

我们来实现一个文件文本处理的插件,这个插件支持`file.contents`所有可能的形式。

var through = require('through2');
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;

// consts
const PLUGIN_NAME = 'gulp-prefixer';

function prefixStream(prefixText) {
  var stream = through();
  stream.write(prefixText);
  return stream;
}

// plugin level function (dealing with files)
function gulpPrefixer(prefixText) {
  if (!prefixText) {
    throw new PluginError(PLUGIN_NAME, 'Missing prefix text!');
  }

  prefixText = new Buffer(prefixText); // allocate ahead of time

  // creating a stream through which each file will pass
  var stream = through.obj(function(file, enc, cb) {
    if (file.isBuffer()) {
      this.emit('error', new PluginError(PLUGIN_NAME, 'Buffers not supported!'));
      return cb();
    }

    if (file.isStream()) {
      // define the streamer that will transform the content
      var streamer = prefixStream(prefixText);
      // catch errors from the streamer and emit a gulp plugin error
      streamer.on('error', this.emit.bind(this, 'error'));
      // start the transformation
      file.contents = file.contents.pipe(streamer);
    }

    // make sure the file goes through the next gulp plugin
    this.push(file);
    // tell the stream engine that we are done with this file
    cb();
  });

  // returning the file stream
  return stream;
};

// exporting the plugin main function
module.exports = gulpPrefixer;

上面的插件可以这样使用

var gulp = require('gulp');
var gulpPrefixer = require('gulp-prefixer');

gulp.src('files/**/*.js', { buffer: false })
  .pipe(gulpPrefixer('prepended string'))
  .pipe(gulp.dest('modified-files'));

一些使用流的插件

继续阅读

Gulp插件制作 – 使用缓冲区

本文是一些创建插件操控缓冲区的信息内容。

使用缓冲区

如果你的插件是依赖于基于库的缓冲区,你将可能会选择基于插件的file.contents作为缓冲使用,让我们实现一个在文本文件的内容增加前缀的插件:

var through = require('through2');
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;

// consts
const PLUGIN_NAME = 'gulp-prefixer';

// plugin level function (dealing with files)
function gulpPrefixer(prefixText) {
  if (!prefixText) {
    throw new PluginError(PLUGIN_NAME, 'Missing prefix text!');
  }

  prefixText = new Buffer(prefixText); // allocate ahead of time

  // creating a stream through which each file will pass
  var stream = through.obj(function(file, enc, cb) {
    if (file.isStream()) {
      this.emit('error', new PluginError(PLUGIN_NAME, 'Streams are not supported!'));
      return cb();
    }

    if (file.isBuffer()) {
      file.contents = Buffer.concat([prefixText, file.contents]);
    }

    // make sure the file goes through the next gulp plugin
    this.push(file);

    // tell the stream engine that we are done with this file
    cb();
  });

  // returning the file stream
  return stream;
};

// exporting the plugin main function
module.exports = gulpPrefixer;

(更多…)

继续阅读

Gulp插件制作指南

我们强烈建议每个开发者遵循本指导规范,没有人喜欢使用差的插件,这些规范会帮助你制作出更加完美的插件。

指南规范

  1. 您的插件不应该做非常容易实现的功能
    • 比如:删除文件目录不需要插件,在任务里面使用del功能就可以了;
    • 不要为了包装而包装,这样可能会降低插件质量;
    • Gulp插件是基于文件的操作,如果你发现自己强制在一个流中处理复杂的操作,请替换为正常的node模块来代替;
    • 一个好的插件实例应该像`gulp-cooffee`一样,`coffee-script` 和`Vinyl`脱离box将无法工作,所以我们将此功能抽象打包为插件使之正常工作;
  2. 您的插件应该只做一件事,并且将之做好
    • 避免配置选项让插件做不同的工作;
    • 例如:一个JS压缩插件不应该有添加header的选项;
  3. 不要重复其他插件的工作
    • 不要实现concat功能,因为已有了gulp-concat插件;
    • 不要实现添加headers功能,因为已有了gulp-header插件;
    • 不要实现添加footers功能,因为已有了gulp-footer插件;
    • 如果它是常见且可选的用例,注明你得插件一般同其他插件使用;
    • 尽量使用现有插件,这将减少你得代码量并且确保生态系统的稳定;
  4. 你得插件必须经过测试
    • 测试gulp插件非常容易,你甚至都不需要gulp去测试它;
    • 多看一下其他插件的例子;
  5. 在`package.json`中添加`gulpplugin`作为关键词,这样搜索的时候才会展示你的插件;
  6. 不要在流里面抛出错误
    • 替而换之,你应该发出一个错误时间;
    • 如果你在流的外面遇到了错误,例如你在创建流的时候发现无效的配置,可以跑出错误;
  7. 以你的插件名字作为错误信息的开头
    • 例如:gulp-replace: Cannot do regexp replace on a stream;
    • 使用`gulp-util`的 PluginError 对象使之更加简单;
  8. `file.contents`类型的文件,自始至终保持一致
    • 如果文件为null或者无法读取,请忽略并继续;
    • 如果文件作为流输入,并且你的插件不支持,请抛出错误;不要缓冲一个流强制塞进插件中与其他流一起工作,这将可能引起严重的问题。
  9. 在做完操作之前,不要进入下一个管道处理。
  10. 克隆一个文件或者基于文件创建新文件的时候,请使用 file.clone() .
  11. 使用推荐模块页面上面的模块将会使你的工作更加简单。
  12. 不要作为依赖来引用 gulp
    • 使用 gulp 测试或者自动化你的插件工作流程非常酷,需要确保将之放在devDependency里
    • 作为依赖引用gulp,意味着安装你的插件还需要安装gulp和它的所有依赖;
    • 一般来说,插件没有任何必要需要依赖gulp,如果你的代码中确实这么做了,请告诉我们来帮助你。

(更多…)

继续阅读

JQuery:除指定区域外点击任何地方隐藏DIV

没事玩玩 Google nav 中个人通知功能的效果,点击通知后展现浮层,点击其他区域任何地方隐藏浮层,样式上的东西都好说,展现和隐藏是如何做到的呢?还是google一下,找到stackoverflow的大婶们给的解决方案。

$('body').click(function(e) {
    var target = $(e.target);
    // 如果#overlay或者#btn下面还有子元素,可使用
    // !target.is('#btn *') && !target.is('#overlay *')
    if(!target.is('#btn') && !target.is('#overlay')) {
       if ( $('#overlay').is(':visible') ) $('#overlay').hide();
    }
});

或者

$('body').click(function(e) {
   if(e.target.id != 'btn' && e.target.id != 'overlay')
      if ( $('#overlay').is(':visible') ) $('#overlay').hide();
})

继续阅读

AngularJs斗争经验总结(一)

AngularJs 非常强大,它彻底摆脱了传统的前端开发方式,无缝的进行数据绑定,使用它做前端开发着实方便快速。最近开始使用它做项目开发,过程中吃了不少瘪,特此记录一下。

使用自身特性

开始使用AngularJs开发时,还是难免摆脱传统的思维方式,有些地方仍然使用Jquery动态修改数据和绑定事件(会被耻笑啊),其实AngularJs提供的特性已经能够满足我们大部分的需求。拿 inputselect 标签举例说明:

  1. input 不要使用 value 属性,尽可能使用 ng-model 指令。数据变化时,不会存在 value 和 defaultValue 不一致的问题。
  2. 尽可能使用 ng-keyupng-blurng-click 等指令进行事件处理。避免使用Jquery进行DOM绑定。
  3. select 要使用 ng-modelng-options 指令,这将大大减少模板的复杂度。

(更多…)

继续阅读

作为程序员最应该阅读的21本书籍

Stack Overflow上有网友提问,每个程序员应该阅读的最具影响力的书籍有哪些?他说:“如果能够回到以前,作为一个开发者,告诉自己在开始自己的职业生涯时应该阅读那些书籍,我希望这个列表内容丰富,涵盖范围广泛”。问题得到广大网友的积极响应,整个过程得到了213个回复,最终投票得出了94本有价值的书籍。我们摘取前21本书推荐给大家。 (更多…)

继续阅读

语义化版本(SemVer)的范围

在使用 Node.jsBower 的时候,其中的 package.jsonbower.json 都会有 dependenciesdevDependencies 项,对于此前端开 发的童鞋应该会比较熟悉。这里面是运行时和开发时依赖库,其中依赖库对应的版本号有很多种写法,诸如:”~1.0.2“, “^1.0“, “>=1.0.2“等,其实可以猜测这种写法代表了某种范围,至于具体含义本文给大家做详细解释。

语义化版本格式

我们首先简单了解一下语义化版本版本号,标准的版本格式为:X.Y.Z,其中:
X:主版本号,当我们做了不兼容或者颠覆性的更新,修改此版本号。
Y:此版本号,当我们做了向下兼容的功能性修改,修改此版本号。
Z:修订号,当我们做了向下兼容的问题修正,修改此版本号。
其中XYZ必须为非负整数,禁止数字前补零,每个数值都是递增的。 (更多…)

继续阅读

参与 GitHub 开源项目

GitHub 是一个基于 git 的代码托管平台,越来越多的个人和公司纷纷加入到 Github 的大家族里来,为开源事业尽一份自己的力量。对于个人来讲,把自己的项目托管到 Github 上并不表示你参与了 Github 开源项目,只能说你开源了自己的项目,可以任别人自由下载。那么该如何参与 Github 的开源项目呢?最近自己参与了一个地图插件项目,在此把开源的概念和参与的过程给大家分享一下。

关于项目成员

一般来说,每个项目通常由一个社区来维护,社区又由不同角色的用户组成。

  • Owner:所有者,即创建该项目且在他们 Github 账户上有该项目的用户或组织。
  • Maintainers and Collaborators:维护者和协作者, 致力于一个项目并促进该项目发展的用户。通常所有者和维护者是同一个用户或组织,他们对项目库都有写入的权限。
  • Contributors:贡献者,每一个对该项目发出过 pull request 并合并到项目中的用户都是贡献者。
  • Community Members:社区成员,即那些经常使用且非常关心该项目的用户,他们在讨论功能特征和 pull request 上非常活跃。

(更多…)

继续阅读