gulp

  • // @todo 待填坑

  • gulp-changed:

    Only pass through changed files

    gulp-cached

    This keeps an in-memory cache of files (and their contents) that have passed through it. If a file has already passed through on the last run it will not be passed downstream. This means you only process what you need and save time + resou

  • 之前挖了个坑,准备写篇gulp插件编写入门的科普文,之后迟迟没有动笔,因为不知道该肿么讲清楚Stream这货,毕竟,gulp插件的实现不像grunt插件的实现那么直观。

    好吧,于是决定单刀直入了。文中插件示例可在这里找到:https://github.com/chyingp/gulp-preprocess

    写在前面

    我们来看看下面的gruntfile,里面用到了笔者刚写的一个gulp插件gulp-preprocess。好吧,npm publish的时候才发现几个月前就被抢注了。为什么星期天晚上在 http://npmjs.org/package/ 上没有搜到 TAT

    这个插件基于preproc

  • 写在前面

    本来是想写个如何编写gulp插件的科普文的,突然探究欲又发作了,于是就有了这篇东西。。。翻了下源码看了下gulp.src()的实现,不禁由衷感慨:肿么这么复杂。。。

    进入正题

    首先我们看下gulpfile里面的内容是长什么样子的,很有express中间件的味道是不是~
    我们知道.pipe()是典型的流式操作的API。很自然的,我们会想到gulp.src()这个API返回的应该是个Stream对象(也许经过层层封装)。本着一探究竟的目的,花了点时间把gulp的源码大致扫了下,终于找到了答案。

    gulpfile.js

    var gulp = require('gulp'),
        pre

  • 虽然网上有很多的 gulp 构建文章,但是很多都已经随着 gulp 插件的更新无法运行了。因此,我写了这个比较简单的构建方案。本文基于 gulp 最新的 4.0.2 版本进行了修改。现在前端组件化项目大多是基于 webpack 进行构建,但是有一个零散的小业务,静态页面之类的,使用 gulp 反而会更加简单方便。

    如果还不熟悉 gulp 的插件,可以阅读上一篇文章:精通gulp常用插件

    这个方案主要是为了实现es6转es5、js/css的压缩合并、自动添加版本号和压缩html。

    • gulp-babel es6转es5
    • gulp-csso 压缩优化css
    • gulp-uglify