前端构建工具 Gulp.js 上手实例

在软件开发中使用自动化构建工具的好处是显而易见的。通过工具自动化运行大量单调乏味、重复性的任务,比如图像压缩、文件合并、代码压缩、单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的、有意义的工作,比如设计业务逻辑,编写代码等等。

对很多前端开发人员而言,Grunt 无疑是这方面的首选。基本上,如果你会用 JavaScript ,那么在一个名为 Gruntfile.js (或者 Gruntfile)的文件中用 Javascript 语言定义自动化任务是非常简单的过程,同时大量的 第三方插件 例如 JSHint, Sass 以及 Uglify 也使得 Grunt 具有了良好的可扩展性。

大多数情况下,Grunt 一直是前端构建工具的首选。但是最近一个名为 Gulp.js 的新工具正在吸引越来越多的人的关注。相比 Grunt, 它具有可读性更强、更利于理解的配置文件,更简单地配置过程。

接下来我们就一起来看看如何安装 Gulp, 并通过一个简单的案例让你感受一下这个新的构建工具。


安装 Gulp.js

Gulp.js 是基于 Node 的构建工具,类似 Grunt, 要使用它,你的机器上需要装有 Node.js。有关如何安装 Node, 这里就不再赘述,可以参考官网的指导。如果你之前完全不了解 Node.js, 可以参考一下 Nettuts+ 上面的系列教程。 有了 Node.js, 安装 Gulp.js 就非常容易了,只需要通过 npm (Node 包管理工具) 来安装即可。在命令行模式下执行:

npm install -g gulp

这样就可以将 gulp 以全局方式安装到你的电脑上,以后可以随时通过命令行的 gulp 命令来调用。


在前端项目中配置 Gulp.js

要在你的项目中使用 Gulp, 有几个关键的步骤需要完成:

  • 安装两个依赖包
  • 安装你需要的任意插件
  • 创建 gulpfile.js 文件,在其中定义你要运行的任务

这些步骤需要在你的项目根目录下完成。

首先,要安装依赖项:

npm install --save-dev gulp gulp-util

接下来,安装我们需要使用到的 Gulp 插件,这些插件同样也都是 Node 模块,我们同样使用 npm 命令来安装它们:

npm install --save-dev gulp-uglify gulp-concat

在上面的例子中,安装了两个插件 gulp-uglifygulp-concat, 通过它们可以对 Javascript 文件进行合并和压缩。

注意这里使用了 --save-dev 参数来安装 Gulp 依赖和插件,加上这个参数以后,在安装这些包的同时,也会把它们添加到我们的包配置文件 package.json:

{
  "devDependencies": {
    "gulp": "^3.6.2",
    "gulp-concat": "^2.2.0",
    "gulp-uglify": "^0.2.1",
    "gulp-util": "^2.2.14"
  }
}

这样可以确保项目所需的依赖包可以便捷地通过 npm 来进行安装。 如果你的项目没有 package.json 文件,可以在命令行通过 npm init 来创建, 也可以通过文本编辑器创建。这是 npm 相关的知识,这里就不细说了。

在前面的例子中,只安装了两个插件,Gulp 提供了超过 200 个插件, 涵盖了前端开发流程中的很多工作,包括但不限于:

还有很多,可以到 Gult plugins 进行搜索。


Gulpfile.js 文件

与 Grunt 一样, Gulp 也有一个同名配置文件,叫做 gulpfile.js, 在这个文件里定义需要用到什么插件,执行什么任务,如何执行等等。 这个文件应该存放在你的项目根目录下。

到目前为止,一切看起来都和 Grunt 没什么区别,那么为什么要介绍 Gulp 呢?接下来就是它的优势所在了。 gulpfile.js 的语法非常简单直接,具有非常好的可读性,便于理解。看一下例子:

var gulp=require('gulp'),
    gutil=require('gulp-util'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');

这就是一条非常简单的 Javascript 变量定义语句,它告诉 Gulp 我们需要哪些插件来完成下面的任务定义。

接下来,我们要定义需要 Gulp 去运行的任务。在这个例子中,需要 Gulp 去完成两件事:

  • 压缩 Javascript 文件
  • 合并 Javascript 文件

在 Gulp 中,定义任务非常直接,就是调用 Javascript 的方法。我们通过 Gulp 提供的 task() 方法来定义任务:

gulp.task('js', function() {
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

看一下上面的代码,gulp.task(name, callback) 方法需要两个参数,第一个是任务名称,第二个是回调函数。这个一看就明白了,没什么要解释的。看一下回调函数里面的代码:

gulp.src('./js/*.js')

src() 方法用来指定要处理的 js 文件的位置,它会获取匹配到的所有 js 文件的路径,并将它们转换为可以传递给插件进行处理的“流”。这是 Node.js 的 Streams API 的组成部分,也是 Gulp 能够实现如此简洁的 API 语法的原因。

.pipe(uglify())

pipe() 方法获取刚才通过 src() 方法获得并传递过来的“流”,并将其传递给指定的插件。本例中是 uglify 插件。

.pipe(concat('all.js'))

与 uglify 一样,concat 插件通过 pipe() 方法接收经过上一个方法处理之后返回的“流”,并把他们该“流”中的所有 Javascript 文件合并为一个名为 "all.js" 的文件。

.pipe(gulp.dest('./js'));

最后,通过 Gulp 的 dest() 方法, "all.js" 被写入到我们指定的目录。整个过程非常直观,易于理解。可以想象一下 jQuery 的链式调用,也可以想象一下 *nix 系统下的 grep, awk 这些命令。

我们要做的最后一件事,是指定 Gulp 的默认任务,让它执行我们刚才定义的 "js" 任务。

gulp.task('default', ['js']);

完整的 gulpfile.js:

// 定义依赖项和插件
var gulp=require('gulp'),
    gutil=require('gulp-util'),
    uglify=require('gulp-uglify'),
    concat=require('gulp-concat');

// 定义名为 "js" 的任务
gulp.task('js', function(){
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

// 定义默认任务
gulp.task('default', ['js']);

回到命令行(项目根目录),输入 gulp, 回车。 Gulp 找到 gulpfile.js 文件,加载依赖的插件,启动默认任务,然后执行我们的 "js" 任务, 你可以看到最终结果

Gulp 还提供了一个名为 watch() 的方法,可以自动检查指定的资源(文件)的变化。这样就可以在文件发生变化时自动执行特定的任务,不必每次修改了文件就要回到命令行手动执行 gulp.

gulp.watch('./js/*.js', ['js']);

这行代码执行时, Gulp 会持续监控 ./js/ 目录下所有的 js 文件,一旦文件发生变化,就会自动重新执行 "js" 任务来合并和压缩文件。当然,这行代码通常也要放到某个任务中去运行。


转到 Gulp.js

在我开始使用 Grunt 之前的几年里,一直是使用 涛哥 开发的 CssGaga 来做前端构建工具。这是当时我们工作标准流程的一部分,它非常强大。

后来从 isux 转岗到 TGideas, 工作流程发生了巨大的变化,同时我在 Windows / Linux / Mac 不同平台下工作的时间也越来越多,于是转向了 Grunt. 与 CssGaga 相比, Grunt 需要自己去寻找需要的插件,在每个项目中进行适当的配置来完成构建工作,但是它跨平台、按需组合功能的特性较好地满足了我的需要。之后又听说过、尝试过一些前端构建工具,但都没有让我放弃 Grunt.

第一次看到 Gulp 的介绍时,就被它的配置语法所吸引。因为对于任何一个接触过 Node.js 的人来说,这语法是在是太舒服了。一看就懂,看一遍就会,不是吗?暂时来说,它的插件数量还没有 Grunt 那么多那么全面,不过日常的前端任务,还是都涵盖了,而且有一些实现得比 Grunt 平台上的更棒。而且它的插件库也不断在增长,尤其是现在有这么多开发者对它有兴趣,相信它会得到快速的发展。

如果你还没有尝试过,不妨尝试一下。


本文主要内容翻译自:Managing Your Build Tasks With Gulp.js,原作者 Rey Bango

参阅

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏不止是前端

Vue:VSCode完美配置指南

5498
来自专栏梁源的专栏

基于 vue-cli + webpack 开发实践:《体育视频播放页》

《体育视频播放页》基于vue-cli+webpack开发,此次开发总结,将会总结开发过程中涉及到的知识点以及开发技巧,希望能帮助到想要在工作中使用Vue.js开...

7584
来自专栏腾讯Bugly的专栏

H5 缓存机制浅析 移动端 Web 加载性能优化

1 H5 缓存机制介绍 H5,即 HTML5,是新一代的 HTML 标准,加入很多新的特性。离线存储(也可称为缓存机制)是其中一个非常重要的特性。H5 引入的离...

3052
来自专栏葡萄城控件技术团队

作为JavaScript开发人员,这些必备的VS Code插件你都用过吗?

如今,Visual Studio Code无疑是最流行的轻量级代码编辑器。它确实从其他代码编辑器那借鉴了很多,最主要是从Sublime和Atom那里。然而它的成...

951
来自专栏前端布道

Angular开发实践(六):服务端渲染

Angular Universal Angular在服务端渲染方面提供一套前后端同构解决方案,它就是 Angular Universal(统一平台),一项在服务...

53510
来自专栏郭霖

Android Studio新功能解析,你真的了解Instant Run吗?

本篇文章首发于我的微信公众号,由于网上讲解Android Studio中Instant Run功能的文章实在是太少了,为了让更多人可以了解这个技术,我将这篇文...

1928
来自专栏葡萄城控件技术团队

渐进式Web应用(PWA)入门教程(上)

1252
来自专栏蔡述雄的专栏

包学会之浅入浅出Vue.js:开学篇

Vue 是国人写的,技术文档也妥妥的是中文,想到这我就有学习的动力。

41.1K48
来自专栏WindCoder

Laravel API教程:如何构建和测试RESTful API

本文原文:Laravel API Tutorial: How to Build and Test a RESTful API

1432
来自专栏技术小讲堂

ASP.NET Core + Angular 2 Template for Visual Studio服务器端预加载的意义何在?Webpack 开发中间件模块热拔插(HMR)

多个月以来,我和多个Github上的社区贡献者一起建立支持库、包,我们最终的目的是希望完成这样一个作为起点的模板,也就是基于把Typescript代码和Angu...

3726

扫码关注云+社区