构建工具-Gulp 相关知识

Posted 2022-10-28 zhangyangdev

---

layout: layout
title: 『构建工具-Gulp』相关内容整理
date: 2017-04-26 22:15:46
tags: Gulp
categories: Tools
---

Gulp- 简介

Automate and enhance your workflow | 用自动化构建工具增强你的工作流程

Gulp 是什么？

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；
使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器，它能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

Gulp的核心概念？

流，简单来说就是建立在面向对象基础上的一种抽象的处理数据的工具。在流中，定义了一些处理数据的基本操作，如读取数据，写入数据等，程序员是对流进行所有操作的，而不用关心流的另一头数据的真正流向。流不但可以处理文件，还可以处理动态内存、网络数据等多种数据形式。

而gulp正是通过流和代码优于配置的策略来尽量简化任务编写的工作。这看起来有点“像jQuery”的方法，把动作串起来创建构建任务。早在Unix的初期，流就已经存在了。流在Node.js生态系统中也扮演了重要的角色，类似于*nix将几乎所有设备抽象为文件一样，Node将几乎所有IO操作都抽象成了stream的操作。因此用gulp编写任务也可看作是用Node.js编写任务。当使用流时，gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。

Gulp的特点?

• 易于使用:
  通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理。
• 构建快速:
  利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
• 易于学习:
  通过最少的 API，掌握 gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
• 插件高质:
  gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

Gulp- 环境搭建

gulp 是基于 node 实现的，那么我们就需要先安装 node。

Node是一个基于Google V8 JavaScript引擎建立的一个平台，可以利用它实现Web服务，做类似php的事。

npm install -g gulp  # 全局安装gulp 
gulp -v  # 查看gulp是否安装成功

?  ~ gulp -v
   [20:17:32] CLI version 3.9.1

Gulp- 构建项目

使用Gulp来构建项目:

mkdir Gulp && cd Gulp && npm init -y && npm install gulp --save-dev
#使用npm初始化项目并且安装Gulp模块,能够看到如下的package.json文件中已经包含了Gulp的相关信息。

  "name": "Gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \\"Error: no test specified\\" && exit 1"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "gulp": "^3.9.1"
  

gulpfile.js文件的使用：

gulp也需要一个文件作为它的主文件，在gulp中这个文件叫做gulpfile.js。

创建gulpfile.js文件，与package.json文件一样放在项目根目录中，之后需要做的就是在gulpfile.js文件中定义任务了。

在gulpfile.js文件中写入以下内容：

    var gulp = require('gulp');
    gulp.task('default', function() 
      console.log("Gulp OK!");
    );

完成之后在Terminal中运行gulp命令，然后会看到刚才在task任务中要输出的内容.

?  gulp
[00:35:29] Using gulpfile ~/WebStrom-Work/Gulp/gulpfile.js
[00:35:29] Starting 'default'...
Gulp OK!
[00:35:29] Finished 'default' after 141 μs

Gulp- API

gulp.src()

语法：

gulp.src(globs[, options])

输出（Emits）符合所提供的匹配模式（glob）或者匹配模式的数组（array of globs）的文件。 将返回一个 Vinyl files 的 stream 它可以被 piped 到别的插件中。

名称	类型	含义
globs	String 或 Array	所要读取的 glob 或者包含 globs 的数组。
options	Object	通过 glob-stream 所传递给 node-glob 的参数。

gulp.dest()

语法：

gulp.dest(path[, options])

能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它。

• path 类型： String or Function ,文件将被写入的路径（输出目录）。也可以传入一个函数，在函数中返回相应路径，这个函数也可以由 vinyl 文件实例 来提供。

• options
  类型： Object , 为一个可选的参数对象，通常我们不需要用到

gulp.task()

语法：

 gulp.task(name[, deps], fn)

• name
  类型： String，任务的名字，如果你需要在命令行中运行你的某些任务，那么，请不要在名字中使用空格。

• deps
  类型： Array，一个包含任务列表的数组，这些任务会在你当前任务运行之前完成。
  $xslt demo gulp.task(‘mytask‘, [‘array‘, ‘of‘, ‘task‘, ‘names‘], function() // 做一些事 );
  注意： 你的任务是否在这些前置依赖的任务完成之前运行了？请一定要确保你所依赖的任务列表中的任务都使用了正确的异步执行方式：使用一个 callback，或者返回一个 promise 或 stream。

• fn
  该函数定义任务所要执行的一些操作。通常来说，它会是这种形式：gulp.src().pipe(someplugin())。

gulp.watch()

语法：

gulp.watch(glob[, opts], tasks)

gulp.watch()用来监视文件的变化，当文件发生变化后，我们可以利用它来执行相应的任务。

• glob类型： String or Array ,一个 glob 字符串，或者一个包含多个 glob 字符串的数组，用来指定具体监控哪些文件的变动。

• opts 类型： Object

传给 gaze 的参数。

• cb(event)
  类型： Function ,每次变动需要执行的 callback。

参考：Gulp-API

Gulp- 常用插件

压缩JS -> gulp-uglify:

安装 gulp-uglify:

 npm install gulp-uglify --save-dev 

示例代码：

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('javascript',function ()  // javascript: 任务名称
    gulp.src('./src/js/*.js')  // src: 定位到需要压缩的js文件目录下
        .pipe(uglify()) // 执行压缩文件
        .pipe(gulp.dest('./dist/js')); // 输出到指定目录
);

API参考：gulp-uglify

压缩CSS -> gulp-minify-css:

安装 gulp-minify-css：

npm install gulp-minify-css --save-dev

示例代码：

var gulp = require('gulp');
var minify = require('gulp-minify-css')

gulp.task('css',function () 
    gulp.src('./src/css/*.css')
    .pipe(minify())
    .pipe(gulp.dest('./dist/css'));
);

API参考：gulp-minify-css

压缩图片 -> gulp-imagemin：

安装 gulp-imagemin：

npm install gulp-imagemin --save-dev

示例代码：

var gulp = require('gulp');
var image = require('gulp-imagemin');

gulp.task('image',function () 
    gulp.src('./src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'));
);

API参考：gulp-imagemin

编译Less-> gulp-less:

安装 gulp-less：

npm install gulp-less --save-dev

示例代码：

var gulp = require('gulp');
var less = require('gulp-less');

gulp.task('less',function () 
    gulp.src('./src/less/*.*')
        .pipe(less())
        .pipe(gulp.dest('./dist/less'));
);

API参考：gulp-less

自动刷新-> gulp-livereload：

安装gulp-livereload：

npm install gulp-livereload --save-dev

示例代码：

在每个gulp.task()方法中的gulp.src()方法后追加   .pipe(livereload());    即可。

需要配合谷歌浏览器插件 LiveReload插件来使用，实现自动刷新。

API参考：gulp-livereload

Google Chrome Plugin：LiveReload

完整gulpfile.js文件：

var gulp = require('gulp'); // Gulp
var uglify = require('gulp-uglify');  // JavaScript
var minify = require('gulp-minify-css'); // CSS
var imagemin = require('gulp-imagemin'); // Images
var less = require('gulp-less'); // Less
var livereload = require('gulp-livereload') // LiveReload

// 执行所有任务
gulp.task('default', ['javascript','css','less','image']);

gulp.task('javascript',function ()  // jsscript: 任务名称
    gulp.src('./src/js/*.js')  // src: 定位到需要压缩的js文件目录下
        .pipe(uglify()) // 执行压缩文件
        .pipe(gulp.dest('./dist/js')); // 输出到指定目录
);



gulp.task('css',function () 
    gulp.src('./src/css/*.css')
        .pipe(minify())
        .pipe(gulp.dest('./dist/css'));
);

gulp.task('less',function () 
    gulp.src('./src/less/*.*')
        .pipe(less())
        .pipe(gulp.dest('./dist/css'));
);


gulp.task('image',function () 
    gulp.src('./src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'));
);

Gulp- 参考资料

• Gulp官网
• Gulp中文网
• 一点CSS-Gulp
• npmjs Gulp-插件
• Gulp常用插件介绍
• Gulp使用介绍和技巧
• Thenewboston-视频教程

常见web项目目录：

在当前项目的根目录下执行tree命令，即可看到项目的整个目录结构，如果没有tree命令，在Mac系统下可以使用brew进行安装：

?  Glup tree ../Glup
../Glup

├── build # 项目构建脚本
├── src # 源码目录
│?? ├── css # CSS文件
│?? ├── fonts # 字体文件
│?? ├── images # 图片文件
│?? ├── js # js脚本文件
│?? ├── less # less文件
│?? └── sass # sass文件
├── dist # 编译出来的发布版本目录
│?? ├── css 
│?? ├── fonts
│?? ├── images
│?? └── js 
├── docs # 文档
├── test # 测试脚本
├── gulpfile.js # Gulp工具构建项目的主文件
├── node_modules # npm包存放目录
├── package-lock.json #npm5.0以上项目依赖文件
├── package.json # npm包管理配置文件
├── LICENSE # 授权协议
└── README.md # 项目说明文件