WebPack / Gulp / Babel 是什么?

What the hell is WebPack / Gulp / Babel?

在 2017 年,提到 WebpackGulp 或是 Babel 大多数前端应该都很熟悉了,至少应该听过它们,这篇文章试图用最简单的方式为初学者和会用但是还不理解的人讲解这些工具的作用和使用场景。

文章的每一部分都使用了 入门成本 它是什么 使用场景 大致原理 来帮助你理解这些工具,以便更好地选择使用哪一个来进行工作。

Gulp

入门成本

★☆☆☆☆ - 非常低

任何人都可以使用它,即便你是一个新手,也可以仅通过几行代码做许多事

它是什么?

Gulp 是一个 任务/工作流 自动化工具,简单的说,就是可以将一些需要反复进行多次的工作作为脚本来自动完成。

使用场景

  • 项目可能较小
  • 代码需要编译后才能运行在浏览器之中
  • 希望在代码修改时浏览器窗口中能实时预览变更
  • 代码处理以外的工作,例如自动按 Major.Minor.Patch 的方式变更版本号,或上传到指定服务器

工作原理

启动用户选择的任务 > 根据事先定义的规则寻找要处理的文件 > 传送文件内容到插件 (Plugin) 或自己的方法中进行修改 > 重复上一步直到任务中的工作完成 > 根据事先定义的规则将文件写入目标位置

WebPack

继续阅读WebPack / Gulp / Babel 是什么?

EasyPageNavigation – 轻松创建页码导航

EasyPageNavigation 是一个可以快速生成页码导航的 NPM 模块,既可以用在后端,也可以用在前端,用在前端时需要配合 Browserify "食用"

最初考虑到这个功能并不复杂,是打算放到 Gist 上面分享给大家的,但是考虑到这样的功能还是比较常用的,以及 Don't repeat yourself 的理念,还是整理了一下并发布了出来。

使用示例:

首先需要使用 "npm i --save easy-page-navigation" 安装,然后:

上面这段代码使用了 getNavInfo(currentPage) 方法直接获取页码导航的信息,数据类型为 Object,可以自己使用 JSON.stringify() 转换为 JSON

如果你不希望拿到这样的数据,也可以通过 getNavHTML(currentPage, options) 直接获取 HTML 代码 继续阅读EasyPageNavigation – 轻松创建页码导航