Gulp 前端自动化构建工具

Unsplash

Gulp 是基于 NodeJS 的前端自动化构建工具,在项目开发过程中自动化地完成 html / css / js / image / sass / less 等文件的编译、合并、压缩、语法检查、浏览器自动刷新等重复性任务,在操作上使用了 NodeJS 中的 stream (流),通过 pipe() 方法导入到指定的地方,将前一级的输出,作为后一级的输入,不再需要进行频繁的 IO 操作,但需要注意的是,这里的流内容,并非原始的文件流,而是一个虚拟的文件对象流 (Vinyl Files),存储着原始文件的路径、文件名、内容等信息

1. NodeJS 安装

Gulp 是基于 NodeJS,所以需要安装 Node 和 npm 包管理工具,可根据自己的操作系统环境来下载相应的版本 Node | Downloads

下载完成后,通过命令行查看 NodeJS 是否成功安装,Mac 系统的命令行在终端 (Terminal),Windows 系统的命令行可通过 window + r 输入 cmd 运行

命令行启动之后,可通过输入命令 node -vnpm -v 分别查看 NodeJS 和 npm 版本号,显示版本号即为成功安装

命令行

2. npm 介绍

npm (Node Package Manager) 是随同 NodeJS 一起安装的包管理工具,用于 node 插件管理,包括插件的安装、卸载、管理依赖等

在命令行中执行 npm install <name> [-g] [--save-dev] 命令即可使用 npm 安装插件

  • <name> 为 node 插件名
  • -g 为全局安装,全局安装可以通过命令行在任何地方调用该插件,而非全局安装只会安装在当前定位目录的 node_modules 文件夹下,通过 require() 方法进行调用
  • --save 将配置信息保存到 NodeJS 项目配置文件 package.json
  • -dev 将配置信息保存至 package.json 文件下的 devDependencies 节点

有了 package.json 的配置信息之后,我们就可以通过 npm-install 命令,一键下载 package.json 配置信息里的所有插件包

如果需要删除插件包,可执行 npm uninstall <name> [-g] [--save-dev] 命令,而不要直接删除本地插件包,借助 rimraf 可以删除所有的插件包,通过命令 npm install rimraf -g 安装 rimraf 之后,执行 rimraf node_modules 命令

其他常用的 npm 命令,更新插件 npm update <name> [-g] [--save-dev],更新全部插件 npm update [--save-dev],查看帮助 npm help,查看当前目录已安装插件 npm list

npm 安装插件是从国外服务器下载,受网络影响大,对不能翻墙的同学不太友好,而淘宝团队提供了一个 npmjs.org 镜像,同步频率目前为 10 分钟一次,以保证尽量与官方服务同步,安装方式也很简单,执行命令 npm install cnpm -g --registry=https://registry.npm.taobao.org,同样的,安装完成之后,执行 cnpm -v 命令来查看是否成功安装,而 cnpm 跟 npm 的用法完全一样,只是在执行命令的时候,将 npm 换为 cnpm 即可

3. gulp 安装

执行命令 npm install gulp -g 全局安装 gulp,Mac 用户如果安装失败,可加上 sudo 指令,使用管理员权限进行安装 sudo npm install gulp -g

然后我们创建一个 gulp 目录,在该目录下运行 npm init 新建 package.json 文件,以保存项目相关信息,该文件也可以手动新建,具体信息如下所示,需要注意的是,json 文件里不能写注释,在复制完之后记得把注释删除

{
  "name": "gulp-niangao", //项目名称(必须)
  "version": "1.0.0", //项目版本(必须)
  "description": "This is for study gulp project !", //项目描述(必须)

  "homepage": "", //项目主页
  "repository": { //项目资源库
    "type": "git",
    "url": "https://git.oschina.net/xxxx"
  },
  "author": { //项目作者信息
    "name": "surging",
    "email": "surging2@qq.com"
  },
  "license": "ISC", //项目许可协议
  "devDependencies": { //项目依赖的插件
    "gulp": "^3.8.11",
    "gulp-less": "^3.0.0"
  }
}

package.json

安装 gulp 依赖包到项目本地 npm install gulp --save-dev,并安装项目其他依赖包,在这里以 gulp-less 为例,npm install gulp-less --save-dev,同样的,Mac 用户要是提示权限错误,加上 sudo 指令即可

接下来我们新建一个 gulpfile.js 文件,具体代码如下所示

// 导入工具包 require('node_modules里对应模块')
const gulp = require('gulp'), // 本地安装gulp所用到的地方
      less = require('gulp-less'); // 引入组件

// 定义一个less任务(自定义任务名称)
gulp.task('less', () => {
    return gulp.src('src/less/test.less') // 该任务针对的文件
               .pipe(less()) // 该任务调用的模块
               .pipe(gulp.dest('build/css')) // 将会在build/css下生成test.css
});

// 定义默认任务
gulp.task('default', ['less'], () => {
    console.log("Love cake is really good!")
});

运行结果

我们在上面的代码里,先是通过 require() 方法引入了 gulpgulp-less 两个组件,当然引入的前提是你已经将该组件下载到本地了,随后我们使用了 gulp.task 定义了一个 less 任务,该任务将 /src/less 文件下的 test.less 文件,转换为 test.css 文件,该文件将在 /buil/css 下生成,文件目录结构如下所示

文件目录结构

在实际开发过程中,我们定义了多个类似 less 的任务,以实现不同的需求,当任务有多个,为实现某一需求而运行所有任务显然是不可取的,我们可通过 gulp + 任务名的方式来运行指定的任务,而不会触发其他任务

运行less任务

除了我们定义的 less 任务外,我们还定义了一个 default 默认任务,这对 Gulp 来说是必须的,当我们输入 gulp 命令时,将会自动执行 default 任务,在上面这个例子中,我们先是执行了 less 任务,再执行了 default 任务,我们也可以通过 .run 方法关联默认任务

gulp.task('default', () => {
    gulp.run('less')
    console.log("Love cake is really good!")
});

运行结果

我们看到通过 .run 方法进行任务关联时,提示该方法已被弃用,建议使用任务依赖或 gulp.watch 任务进行触发,该 API 起到了文件监听的作用,当 gulp.src 匹配的路径下的文件发生了更改,便会运行回调定义的其他任务

gulp.task('default', () => {
    gulp.watch('src/less/*.less', function(){
        gulp.run('less');
    });
    console.log("Love cake is really good!")
});

运行结果

快捷键 Command + c 即可终止当前操作,Windows 下为 Ctrl + C

该章节的内容到这里就全部结束了,源码我已经发到了 GitHub Gulp_Demo 上了,有需要的同学可自行下载

End of File

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏金蝶云平台的专栏

Grunt :初次使用及前端构建经验

这是我们部门前端同学cobish的学习笔记,笔者编辑了一下并分享给大家。

45200
来自专栏python成长之路

udp服务端收发数据流程

21980
来自专栏散尽浮华

Nginx+upstream针对后端服务器容错的运维笔记

熟练掌握Nginx负载均衡的使用对运维人员来说是极其重要的!下面针对Nignx负载均衡upstream容错机制的使用做一梳理性说明: 一、nginx的upstr...

1.3K90
来自专栏Java成长之路

Java线程调度与线程优先级

线程调度是指系统为线程分配处理器使用权的过程,主要调度方式有两种,分别是协同式线程调度和抢占式线程调度。

26620
来自专栏流柯技术学院

VirtualBox-Linux系统安装增强功能

42810
来自专栏IT可乐

Nginx(一)------简介与安装

  说到 Nginx ,可能大家最先想到的就是其负载均衡以及反向代理的功能。没错,这也是当前使用 Nginx 最频繁的两个功能,但是 Nginx 可不仅仅只有这...

20030
来自专栏web前端

HTTP协议理解

HTTP(Hyper Text Transfer Protocol)超文本传输协议,是一种请求响应式协议,类似两国会晤中需要遵守的规则。那么,其中有什么内容特点...

22080
来自专栏我的博客

SSO

1、什么是SSO(单点登录Single Sign On) SSO是一种统一认证和授权机制,指访问同一服务器不同应用中的受保护资源的同一用户,只需要登录一次,即...

40350
来自专栏北京马哥教育

Linux之任务计划

用过windows的同学应该都知道在控制面板中有一个“任务计划”选项,我们可以通过向导设置让计算机在某个时间点或者开机时运行某个脚本或者批处理等等,方便我们的...

29640
来自专栏Java帮帮-微信公众号-技术文章全总结

Web-第二十五天 Maven学习一【悟空教程】

解决方案:maven对项目生命周期进行定义,规范,开发人员和测试人员使用maven软件完成构建。

14630

扫码关注云+社区

领取腾讯云代金券