前端工程化 | 揭秘程序员的提速“外挂”

HTML5学堂

发布于 2018-03-13 15:13:16

1.3K0

发布于 2018-03-13 15:13:16

前端开发的工作往往需要把LESS/SASS编译成CSS文件，对多个JS、CSS文件进行合并与压缩处理，对JS、CSS进行语法的检查等，上面提到的这些都是一些重复性的操作，在开发过程中占据了大量的时间，降低了开发效率。对于大量重复性的操作是不是可以交给工具来处理，我们只需要告诉工具需要处理哪些操作。那么今天要给大家介绍的工具是Gulp。

本文内容概要：

1 什么是Gulp

2 Gulp VS Grunt

3 Gulp的安装与使用

4 命令行的简单介绍

1 什么是Gulp

Gulp是一个前端自动化构建工具，在项目开发过程中，开发工程师可以使用它自动化地完成JavaScript、SASS、LESS、HTML、IMG、CSS等文件的编译、检查、压缩、合并、格式化、浏览器自动刷新、项目打包，并监听文件在改动后重复指定这些操作。

另外，Gulp是基于Node.js构建的，利用Node.js流的优势，让开发工程师可以快速构建项目并减少频繁的 IO 操作。Gulp.js和用来定义任务的 Gulp的配置文件都是通过 JavaScript来实现的，便于开发工程师快速掌握Gulp。

我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

2 Gulp VS Grunt

易用性：Gulp相比Grunt更简洁，而且遵循代码优于配置策略，Gulp让简单的任务简单，复杂的任务可管理，维护Gulp更像是写代码；

高效性：Gulp相比Grunt更有设计感，利用Node.js流的威力，你可以快速构建项目并减少频繁的IO（文件写入与读取）操作；

高质量：Gulp有严格的插件指南确保插件如你期望的那样简洁高质的工作，而且Gulp的每个插件只完成一个功能，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅能压缩图片，同时还包括缓存功能。在Gulp中，缓存是另外一个插件，可以被别的插件使用，这样就促进了插件的可重用性；

易学习：Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要执行任务（操作）；

3 Gulp的安装与使用

在学习Gulp之前，先给大家大致的介绍一下Gulp的安装与使用。首先当然要先安装Node.js，通过Node.js全局安装Gulp和项目安装Gulp，其次在项目里安装需要使用的Gulp插件，然后新建Gulp的配置文件gulpfile.js来定义Gulp要处理的操作/任务，最后通过Gulp的命令运行定义好要执行的任务（操作）。

3.1 流程：

3.1.1 安装Node.js ->

3.1.2 全局安装Gulp ->

3.1.3 项目安装Gulp ->

3.1.4 项目安装Gulp插件 ->

3.1.5 配置gulpfile.js ->

3.1.6 运行Gulp定义好的任务

3.1.1 安装Node.js ->

说明：因为Gulp是基于Node.js构建的，所以需要安装Node.js。

安装：官网的下载地址：https://nodejs.org/download/，选择相应的安装包，下载即可。

window系统，使用Windows Installer (.msi)即可。双击安装包，一直下一步即可，Node.js会自动把环境变量配好~

如果你使用的是Windows8的话，有可能报错。error 2502，error2503错误原因是你的权限不够。解决方法是用管理员权限运行此文件，鼠标右击window图标，点击命令提示符（管理员）。之后把你的安装包所在路径输入进去就行了，这样打开安装包就不会报错了。

执行node -v的命令查看安装的nodejs版本，出现版本号，说明刚刚已正确安装nodejs。

3.1.2 全局安装Gulp

说明：全局安装Gulp的目的是为了执行Gulp任务/操作。

安装：执行命令npm install --global gulp进行全局安装Gulp。

执行gulp -v的命令，出现版本号即为正确安装。

3.1.3 项目安装Gulp

说明：项目安装Gulp的目的是为了调用Gulp的插件，比如调用gulp-less插件，它是将LESS预处理为CSS的插件。

安装：执行npm install --save-dev gulp的命令进行项目安装Gulp。

3.1.4 项目安装Gulp插件

说明：在这边先带着大家安装一个Gulp的插件：gulp-less插件。

安装：执行npm install gulp-less --save-dev的命令进行安装gulp-less的插件。

PS：如果想在安装的时候把插件写进项目package.json文件的依赖中，则可以加上--save-dev。至于为什么要写进package.json，将在后期的文章进行讲解。

3.1.5 配置gulpfile.js

说明：gulpfile.js是Gulp的配置文件，放置于项目根目录的js文件。

代码：

// 引入Gulp安装好的插件 require('模块名称') 
var gulp = require('gulp'), 
    less = require('gulp-less');
 
// 定义一个gulp_less任务，名称自定义即可
gulp.task('gulp_less', function () {
    // less文件地址
    gulp.src('less/index.less') 
    // 调用gulp-less插件的功能
    .pipe(less()) 
    // 生成index.css（less预处理的css文件）
    .pipe(gulp.dest('css')); 
});