关于web性能的思考与分享［05］——gulp自动化构建工具入门教程

gulp是基于流（stream）的自动化构建工具，能帮助前端节省很多资源。

OK，直接进入主题——本篇中将主要介绍怎么用gulp。

1 . 先到nodeJs的官网（https://nodejs.org/en/）下载安装nodejs,因为gulp是基于node环境；

然后再cmd命令行工具中你可以检测node的版本以此判断node是否安装成功；

命令：node -v



2.安装npm,使用npm可以方便的安装gulp;

然后再cmd命令行工具中你也可以检测npm的版本以此判断node是否安装成功；



3.根据你的项目路径，通过命令行工具先进入到项目的根目录下，例如：

D:\wampv\wamp\www\getgulp 这是我项目的路径，那么就是用cd 命令进入到getgulp 目录下；

图示：



此时，我们已经进入到getgulp 这个目录下方了。

4 .安装gulp,使用npm命令，先全局安装

npm install -g gulp

5.在根目录D:\wampv\wamp\www\getgulp 下新建一个package.json文件

特别注意：package.json是一个普通json文件，所以不能添加任何注释。

然后在文件中写入

{
"devDependencies": {
"del": "^2.0.2"
}

这是为了在安装本地gulp的时候，能解析到package.json的数据；

6.在本地根目录D:\wampv\wamp\www\getgulp 下安装gulp

Npm install gulp –save-dev

安装完成之后，package.json中就会出现gulp版本号的信息



以后，每成功安装一个gulp的插件都会在package.json文件中自动写入所安装插件的版本号信息；

至此，我们就将gulp安装到我们的项目中啦~

具体应用——优化less、js、img文件

1.先在根目录D:\wampv\wamp\www\getgulp 新建一个gulpfile.js的文件

gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件，所有的对项目文件的自动化操作将在这里面进行；

如图：



然后在根目录下新建一个gulp文件夹，并在gulp文件夹下新建一个tasks文件夹和config.js文件，在tasks文件夹创建default.js、less.js、watch.js，

tasks文件里存放对应的任务、config.js配置任务的相关配置

Config.js配置如下：



Default.js如下：



Less.js如下：



Watch.js文件如下：



注意：在wacth.js文件中，我们需要先安装gulp-watch插件；

在gulpfile.js中我们要常常用到几个操作：

require()； gulp.Task(‘任务名称’,回调函数function(){})；

gulp.src(‘输入路径’)//你所要操作的文件路径； .pipe()

//管道操作，pipe()是stream模块里传递数据流的一个方法，第一个参数为插件方法，插件会接收从上游流下的文件，进行处理加工后，再往下流。

gulp.dest(‘输出路径’)//你所要输出结果的路径； gulp.Watch(‘监听路径’,[’任务名称’])//监听任务文件变化；

1.然后我们在gulpfile.js文件中就可以开始建立task操作我们要构建的项目 。

首先在文件中引入tasks任务，并引入插件require-dir



同样，我们要先安装require-dir插件



再者，将我们需要对项目文件的具体操作所需要的gulp插件引入，

例如：

要对less编译和对html以及img文件压缩，则需要先安装gulp-minify-less、gulp-htmlmin、

gulp-imagemin插件。Gulp上有很多插件，这些插件在gulp的官方文档上都能找到。http://www.gulpjs.com.cn/

3.使用npm安装gulp插件安装到项目根目录下

我们先安装gulp-minify-css、gulp-htmlmin、gulp-imagemin插件



成功安装完成之后在package.json文件夹中就会有相关的插件信息了，在node_modules文件夹下也将自动生成对应的插件文件夹





4.然后我们在根目下新建项目文件index.html和src文件夹、dist输出文件夹，大致的目录结构如下：



5.建好项目文件之后，我们就可以在gulpfile.js中操作了：

首先需要require以下gulp，这个是所有gulp操作的基础，然后引入相关的gulp插件

如图：



为了捕获操作中的异常，我们就需要先安装两个插件gulp-notify和gulp-plumber，然后在gulpfile.js文件中require它们：







6.接下来，我们来写task任务——对项目文件进行相关的gulp操作：

首先，我们来处理less文件，将src/less目录下的less文件编译为css文件：



现在我们先来测试下，是否能够顺利进行less编译。

在命令行工具中我们终于要使用到gulp命令啦！

7.使用gulp 命令进行构建



于是，我们在build文件夹下将看到前面对less文件的编译输出结果：



OK ,关于对less的操作就介绍这些。大家还可以实践一下对img、js、html等文件的操作，都是很相似的操作。

构建工具在前端工程中已作为一种标配在使用，它是前端工程中必要的一个环节，无论从节省资源和时间，还是从效率上都起到了很大的作用，类似的工具还有fis、grunt等。目前听说fis在构建方面表现的很突出，所以在下次中希望自己也能出一篇关于百度fis的文章吧！一起加油喽～