“流式”前端构建东西——gulp.js 简介

2024年3月12日 182次阅读 来源: n͛i͛g͛h͛t͛i͛r͛e͛

Grunt 一直是前端范畴构建东西（使命运转器也许更正确一些，由于前端构建只是此类东西的一部分用处）的王者，但是它也不是毫无缺点的，近期风头正劲的 gulp.js 隐约有取而代之的态势。那末，终究是什么使得 gulp.js 备受关注呢？

Grunt 之殇

gulp.js 的作者 Eric Schoffstall 在他引见 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处：

  1. 插件很难恪守单一义务准绳。由于 Grunt 的 API 设想缺憾，使得很多插件不能不担任一些和其主要使命无关的事变。比如说要对处置惩罚后的文件举行改名操纵，你能够运用的是 uglify 插件，也有能够运用的是 concat 插件（取决于事情流的末了一个环节是谁）。

    我的意见：这也许是个题目，对很多人来讲 Grunt 插件若干存在“职责不明”和“越俎代庖”的状况。在我看来，这也是 Grunt 一个设想头脑：把对文件的操纵笼统为一个自力的组件（Files），任何插件都以雷同的划定规矩来运用它。遗憾在于，运用它的历程发生在每一个插件的自力设置对象里，所以总给人一种“把不应这个插件做的事变丢给它来做”的别扭觉得。

  2. 用插件做一些原本不须要插件来做的事变。由于 Grunt 供应了一致的 CLI 进口，子使命由插件定义，由 CLI 敕令来挪用实行，因而哪怕是很简朴的外部敕令（比如说运转 karma start）都得有一个插件来担任封装它，然后再变成 Grunt CLI 敕令的参数来运转，节外生枝。

    我的意见：举双手双脚赞同！

  3. 试图用设置文件完成一切事，结果就是杂沓不堪。范围较大，构建／分发／布置流程较为复杂的项目，其 Gruntfile 有多复杂置信有阅历的人都有所体味。而 gulp.js 推行的是“写顺序而不是写设置”，它走的是一种 node way。

    我的意见：关于 node.js 开辟者来讲这是功德，相符他们的一贯作风；不过关于那些纯前端工程师来讲（数目不小），这好像没有什么明显的改良。何况最近 Grunt 社区出现了不少插件来协助开辟者构造／治理／简化痴肥的 Gruntfile，结果都还不错。所以关于这一点，就见仁见智吧。

  4. 落伍的流程掌握产生了让人头痛的临时文件／文件夹所致使的机能滞后。这是 gulp.js 下刀子的重点，也是本题目里“流式构建”所处理的根本题目。流式构建改变了底层的流程掌握，大大提高了构建事情的效力和机能，给用户的直观觉得就是：更快。

    我的意见：关于流式构建，短短几句话没法讲清它的前因后果，但是在 node.js 的天下里，streaming 确实是至关重要的。我引荐一份阅读材料：Stream Handbook，读过以后置信内心就有数了。

作为对照和总结，作者列出了 gulp.js 的五大特性：

  1. 运用 gulp.js，你的构建剧本是代码，而不是设置文件；
  2. 运用规范库（node.js standard library）来编写剧本；
  3. 插件都很简朴，只担任完成一件事－基本上都是 20 行摆布的函数；
  4. 使命都以最大的并发数来实行；
  5. 输入／输出（I/O）是基于“流式”的。

gulp.js 之道

gulp.js 的官方文档都在 Github 上，本文是一个简介，更详细的细节还请自行阅读文档。在这里我就 gulp.js 的装置和运用流程做一个简述，先一起来明白一下 gulp.js 的风貌吧。

第一步：装置敕令行东西

$ npm install -g gulp

第二步：在你的项面前目今把 gulp 装置为开辟依靠组件（假定你已建立好了 package.json）

$ cd <YOUR_PROJECT>
$ npm install gulp --save-dev

第三步：在项目的根途径下建立 Gulpfile.js，初始内容为：

var gulp = require('gulp');

gulp.task('default', function () {
});

第四步：运转！

$ gulp

So far so good! 看起来和 Grunt 没差太远吧？确实云云，gulp.js 的进修曲线照样相称平缓的。接下来，为了能够顺遂的编写构建剧本，我们来进修几个中心的 API 函数——别忧郁，gulp.js 的 API 异常简朴，我们只须要相识四个就足以应对绝大多数的剧本编写了（而且用过 Grunt 的话，这四个都不是什么新鲜货）。

类型

我们演习一个最常见的类型，写一个 node.js 顺序时所须要的构建剧本。为此我们要做三件事变（括号内列出对应插件的名字，更多插件请到此处寻觅）：

  1. 语法搜检（gulp-jshint）
  2. 兼并文件（gulp-concat）
  3. 紧缩代码（gulp-uglify）

别的，我们能够还须要文件改名操纵，所以 gulp-rename 也会很有效。接着我们须要先在项面前目今装置这些插件：

$ npm install <PLUGIN_NAME> --save-dev

末了我们完成一切使命的编写，完全的代码以下：

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 语法搜检
gulp.task('jshint', function () {
    return gulp.src('src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 兼并文件以后紧缩代码
gulp.task('minify', function (){
     return gulp.src('src/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(uglify())
        .pipe(rename('all.min.js'))
        .pipe(gulp.dest('dist'));
});

// 看管文件的变化
gulp.task('watch', function () {
    gulp.watch('src/*.js', ['jshint', 'minify']);
});

// 注册缺省使命
gulp.task('default', ['jshint', 'minify', 'watch']);

能够看出，基本上一切的使命体都是这么个形式：

gulp.task('使命称号', function () {
    return gulp.src('文件')
        .pipe(...)
        .pipe(...)
        // 直到使命的末了一步
        .pipe(...);
});

异常轻易明白！猎取要处置惩罚的文件，通报给下一个环节处置惩罚，然后把返回的结果继承通报给下一个环节……直到一切环节完成。pipe 就是 stream 模块里担任通报流数据的要领罢了，至于最最先的 return 则是把全部使命的 stream 对象返回出去，以便使命和使命能够顺次通报实行。

也许写成如许会更直观：

gulp.task('task_name', function () {
    var stream = gulp.src('...')
        .pipe(...)
        .pipe(...)
        // 直到使命的末了一步
        .pipe(...);
    return stream;
});

至此，你已能够运用 gulp.js 完成绝大多数的构建事情了。下一步，我也为你预备了几条发起：

  1. 花点时候阅读一下 gulp.js 插件库，大抵相识下应用已有的插件你都能够做哪些事变
  2. 关于经常使用的插件，仔细阅读它们本身的文档，以便发挥出它们最大的功能
  3. 抽时候进修 gulp.js API，特别是 gulp.task() 里关于使命体的详细描述，学会怎样实行回调函数（callback），怎样返回 promise 等等
  4. 尝试编写合适本身事情流程和习气的使命，假如它事情优越，把它做成插件宣布给人人吧！
    原文作者：n͛i͛g͛h͛t͛i͛r͛e͛
    原文地址: https://segmentfault.com/a/1190000000435599
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞