详解前端任务构建利器Gulp.js使用指南


Posted in Javascript onApril 30, 2021

概述

在软件开发中,任务运行器的好处是不言而喻的。它们可以帮助自动运行常见的冗长的任务,让你可以专注于更重要的事情中,比如敲出很棒的代码。说的严肃点,自动运行一些比如图片压缩、代码压缩、单元测试以及更多的任务的技能,简直就是节省时间的利器。

对于很多前端开发者而言,时下使用最多的任务管理器就是Grunt了,一个可以让你在Gruntfile.js文件中使用JavaScript定义各种运行任务的工具。基本上,只要你了解JavaScript,创建一个Grunt任务是非常简单直接的事情。丰富的第三方插件比如jsHint,Sass还有Uglify等等,让Grunt成为最易扩展的工具之一。

对于多数人来讲,一直以来都选择Grunt作为任务运行器。不过最近,因为易于安装,拥有更加易读和管理的超级简单的配置文件,一个叫Gulp.js的工具吸引了大批人的眼球。

安装Gulp.js

Gulp.js跟Grunt一样,都是基于Node的任务运行工具。所以你必须安装Node来运行它。有几种不同的方法可以安装Gulp,取决于你的操作系统。在OS X中,我用nvm,这是TimCaswell写的用于管理多个Node.js版本的很不错的脚本工具。你也可以直接从Node.js官方网站下载二进制文件。如果你对Node还一无所知的话,那我建议你最好去Nettuts+series先熟悉一下Node.js。

我们可以用npm(Node包管理器)来快速安装Gulp。打开你的终端然后输入:

npm install -g gulp

这条指令,从npm的注册机制中获取gulp并全局安装到你的系统中,以便你可以直接在命令行中访问它。

安装好了gulp,下面我们开始在项目中来使用它。

使用Gulp.js创建你的项目

要在项目中使用Gulp,必须完成下面关键几点:

  • 安装两个依赖包
  • 安装任何你想使用的插件
  • 创建Gulp.js文件然后定义你打算运行的任务

请在项目的路径下完成以上几点,这样Gulp才能使用你的配置文件。

首先,安装依赖包:

npm install --save-dev gulp gulp-util

现在我们需要安装在配置文件中定义好的用来运行指定任务的Gulp插件。这些插件都是Node包,所以我们再次使用npm来安装它们。

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

我这里安装两个插件,让我可以使用Uglify.js压缩器来精简/压缩JavaScript代码并且将多个JS文件合并到一个文件中去。

注意,我这里用的—save-dev,这个指令让我只在当前项目中安装Gulp依赖包跟插件。这么做可以在package.json中的devDependencies列表中为每个依赖项生成对应的词条标识。就像下面展示的:

{
  "devDependencies": {
    "gulp-util": "~2.2.13",
    "gulp": "~3.5.0",
    "gulp-uglify": "~0.2.0",
    "gulp-concat": "~2.1.7"
  }
}

这样可以确保使用npm为项目安装任何依赖包和插件。如果在项目中没有package.json文件,那在命令行输入npm init或者干脆在编辑器中手动创建一个,写好对应的卷括号,然后保存命名为”package.json”。在命令行中输入npm指令来更新它。请注意,必须要使用卷括号,不然,当你试图使用—save-dev时,npm会抛出一个错误显示它不是一个合法的JSON文件。

虽然在本篇指南中我只用了两个插件,不过Gulp提供了超过200个插件来满足不同的功能需求,包括:

  • LiveReload(gulp-livereload)
  • JSHint(gulp-jshint)
  • Sass(gulp-sass)
  • CoffeeScript file compilation(gulp-coffee)

还有好多好多···

Gulpfile.js文件

跟Grunt一样,Gulp有一个叫做gulpfile.js的同名配置文件,里面定义了运行任务的所有的必须的插件。你要在项目的根目录下创建这个文件。

简单直白的语法,让gulp文件非常易读能懂:

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

上面代码简单告诉gulp需要引用哪些插件来完成既定的任务。

下一步,我们需要定义Gulp运行的任务。我这里,定义两个:

  • 压缩图片
  • 精简JS文件

我们使用Gulp的方法task()来定义要运行的任务:

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

看看上面的代码,用的是引用的插件组成的一个混合方法调用。第一个方法task(),使用一个名称代表当前任务(这里就叫'js'),还有一个匿名方法囊括了实际的操作。我们来拆解一下代码:

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

src()方法指定了要从哪里找到需要压缩的JS文件,并且将其转换成包含文档结构的数据流以传入后续运行的插件中。这是Node.jsStreams API中的一部分,也正是Gulp拥有简明API语法的原因之一。

.pipe(uglify())

pipe()方法从src()方法中获得传过来的数据流,然后传入指定的插件中。在当前例子中,插件uglify将接收数据流。

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

像uglify一样,插件concat通过pipe()接收传过来的数据流,然后将多个JS文件合并到'all.js'中。

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

最后,使用Gulp的dest()方法,将all.js写到指定目录中,整个过程简介易读。

还有最后一个我们要做的事情,就是更改Gulp的默认运行任务为”js”。

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

返回到命令行,输入'gulp',Gulp找到了gulpfile.js文件,加载所有的依赖项跟插件,运行默认任务'js'。你可以在最后的运行结果,文件被压缩合并了

让我们更近一步吧。Gulp提供了另外一个方法叫watch(),它可以监视指定的资源变更。跟手动输入'gulp'运行任务不同,这个方法允许根据资源的改变自动运行任务。

gulp.watch('./js/*', function () {
     gulp.run('js');
});

当上面的代码运行的时候,Gulp会继续保持对指定资源的监视,一旦资源发生变更,就会再次运行'js'方法。这个功能很棒!

向Gulp.js过渡

当我刚听说Gulp的时候,我第一反应就是“又一个超棒的工具!”。Gulp.js确实拥有着吸引人的语法跟API,它让构建任务变得轻而易举。尽管插件没有Grunt丰富,但是它的插件库看起来已经在日趋增长,特别是现在拥有着对它感兴趣的这么多的开发者。

以上就是详解前端任务构建利器Gulp.js使用指南的详细内容,更多关于Gulp.js使用指南的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery 判断滚动条到达了底部和顶端的方法
Apr 02 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
微信小程序 Audio API详解及实例代码
Sep 30 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 Javascript
Angular4如何自定义首屏的加载动画详解
Jul 26 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
JavaScript 事件捕获冒泡与捕获详情
Nov 11 Javascript
浅谈node.js中间件有哪些类型
Apr 29 #Javascript
JavaScript实现简单图片切换
何时使用Map来代替普通的JS对象
详解Js模块化的作用原理和方案
详解JavaScript中的执行上下文及调用堆栈
JavaScript实现淘宝商品图切换效果
JavaScript实现显示和隐藏图片
Apr 29 #Javascript
You might like
php设计模式 Singleton(单例模式)
2011/06/26 PHP
浅析php变量修饰符static的使用
2013/06/28 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
jquery showModelDialog的使用方法示例详解
2013/11/19 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
JS中的phototype详解
2017/02/04 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
用vue写一个日历
2020/11/02 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
跟老齐学Python之模块的加载
2014/10/24 Python
Python随机函数random()使用方法小结
2018/04/29 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
用Python解决x的n次方问题
2019/02/08 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
深入浅析python 协程与go协程的区别
2019/05/09 Python
python中通过selenium简单操作及元素定位知识点总结
2019/09/10 Python
解决Tensorflow 内存泄露问题
2020/02/05 Python
Django model重写save方法及update踩坑详解
2020/07/27 Python
详解python中的lambda与sorted函数
2020/09/04 Python
selenium如何定位span元素的实现
2021/01/13 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
Python的两道面试题
2013/06/29 面试题
车祸赔偿收入证明
2014/01/09 职场文书
幼儿园大班开学寄语
2014/08/02 职场文书
先进典型事迹材料
2014/12/29 职场文书
《比的意义》教学反思
2016/02/18 职场文书
Python Django搭建文件下载服务器的实现
2021/05/10 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
Java实现贪吃蛇游戏的示例代码
2022/09/23 Java/Android