gulp 的使用

作者: CondorHero | 来源:发表于2019-08-25 00:18 被阅读2次

Gulp 使用方法(教程一)
gulp的简单使用
gulp入门
前端构建工具gulp构建项目
Gulp4(一)——基本使用及核心原理
gulp自动化构建html静态资源路径版本号添加和替换
gulp资源整理
html代码复用各种方法
gulp入门教程详解
Gulp

先看官网：

gulp 官网

官网的第一句话就是 gulp 的揭示了本质：

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

gulp 是基于 node 实现 Web 前端自动化开发的工具，利用它能够极大的提高开发效率。

在 Web 前端开发工作中有很多重复工作，比如压缩 CSS/JS 文件。而这些工作都是有规律的。找到这些规律，并编写 gulp 配置代码,让 gulp 自动执行这些重复工作。

说白了就是个便捷工具。就类似我们写代码的感应插件，去一个地方的交通工具。本质
都是为了方便。

一、gulp 安装简单配置

全局安装：

npm install -g gulp-cli

这个是 gulp 的命令行接口。

然后在本地 npm init 进行初始化，在安装：

npm install --save gulp

新建文件 gulpfile.js 文件：

文件内容就去官网扒拉：https://gulpjs.com/

官网给的模板内容
翻译：

// 从 gulp 里面引出来三个API
const { src, dest, parallel } = require('gulp');
// 下面四个全部是插件
const pug = require('gulp-pug');//编译pug模板
const less = require('gulp-less');//翻译less
const minifyCSS = require('gulp-csso');//压缩css
const concat = require('gulp-concat');//多个文件合并成一个

// 一个函数
function html() {
  //src用来打开文件同时还有正则的功能
  //下面的语句就是表示打开client/templates文件下的所有.png文件
  //client/templates/*.pug
  // pipe插件处理过程
  // dest处理完成文件输出地址
  return src('client/templates/*.pug')
    .pipe(pug())
    .pipe(dest('build/html'))
}
// 一个函数
function css() {
  return src('client/templates/*.less')
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(dest('build/css'))
}
// 一个函数
function js() {
  return src('client/javascript/*.js', { sourcemaps: true })
    .pipe(concat('app.min.js'))
    .pipe(dest('build/js', { sourcemaps: true }))
}

exports.js = js;
exports.css = css;
exports.html = html;
// parallel平行运行三个函数
exports.default = parallel(html, css, js);

下面来使用这个玩意，需要注意的是此工具基本都是配合插件来使用的。

二、gulp-csso 压缩 css

先写个 css 样式：

/* a.css */
body a{
    color:pink;
    display: block;
}
div {
    width: 100px;
    height: 200px;
}
div {
    width: 100px;
}
ul {
    /*你是大沙雕*/
    list-style:none;
}
ul li {
    width: 100px;
    height: 100px;
    background-color: #cfc;
}

改一下 gulpfile.js 文件

// 从 gulp 里面引出来三个API
const { src, dest, parallel } = require('gulp');
// 下面全部是插件
const minifyCSS = require('gulp-csso');//压缩css


// 一个函数
function css() {
  // 打开css文件里面全部的css文件
  // pipe（管道）运行
  // 最后输出
  return src('css/*.css')
    .pipe(minifyCSS())
    .pipe(dest('dist'))
}

exports.css = css;
// parallel平行执行函数
exports.default = parallel(css);

CMD 直接运行 gulp 命令查看结果：

gulp

然后直接报错，我们根据报错再安装插件：

安装插件：

npm install --save gulp-csso

再次 gulp 运行：

进去 dist 文件夹，然后就会看见打包的 index.css 文件，文件内容如下：

body a{color:pink;display:block}div,ul li{height:200px;width:100px}ul{list-style:none}ul li{height:100px;background-color:#cfc}

结果就是去掉了注释空格，合并或删除了你写的无用的 css 样式。

三、gulp-base64 插件图片变成base64

gulp-base64 插件官网介绍：

Gulp task for converting all files found within a stylesheet (those within a url( ... ) declaration) into base64-encoded data URI strings.
Gulp任务用于将样式表中找到的所有文件（url（...）声明中的文件）转换为base64编码的数据URI字符串。

根据官网代码配置代码：

const gulp = require('gulp');
const base64 = require('gulp-base64');
// gulp.task的写法

// 第一种方法在命令行直接使用 gulp build 启动此任务
gulp.task('build', function () {
    return gulp.src('./css/*.css')
        .pipe(base64({
            baseDir: 'css',
            extensions: ['svg', 'png', 'jpg' , /\.jpg#datauri$/i],
            exclude:    [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],
            maxImageSize: 60*1024, // bytes
            debug: true
        }))
        .pipe(gulp.dest('./dist'));
});
// baseDir如果你有绝对的图像路径在样式表,在这个选项中指定的路径将被用作基础目录(相对于gulpfile)。
// extensions指定扩展。字符串匹配文件扩展名。而regexp测试原始URL的值。
// exclude跳过这些模式相匹配的文件。
// maxImageSize 约束最大文件大小范围改变图像，使用base64地址显示。我css引入的最大图片58k所以我写60
// debug错误能够打印在控制台

// 使用 gulp.task('default') 定义默认任务
// 第二种方法在命令行使用 gulp 启动 bulid 
gulp.task('default', ['build']);

控制台运行，报错：
这是gulp3 的写法，gulp4 不在支持。

还是用第一个案例的写法：

const { src, dest, parallel } = require('gulp');
const base64 = require('gulp-base64');
// gulp.task的写法


function build() {
    return src('./css/*.css')
        .pipe(base64({
            baseDir: 'css',
            extensions: ['svg', 'png', 'jpg' , /\.jpg#datauri$/i],
            exclude:    [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],
            maxImageSize: 61*1024, // bytes
            debug: true
        }))
        .pipe(dest('./dist'));
};
// baseDir如果你有绝对的图像路径在样式表,在这个选项中指定的路径将被用作基础目录(相对于gulpfile)。
// extensions指定扩展。字符串匹配文件扩展名。而regexp测试原始URL的值。
// exclude跳过这些模式相匹配的文件。
// maxImageSize 约束最大文件大小范围改变图像，使用base64地址显示。我css引入的最大图片60k所以我写61
// debug错误能够打印在控制台

exports.build = build;
// parallel平行执行函数
exports.default = parallel(build);

运行结果

再次查看打包后的 css 的样式变成了，地址全部变成 base64 位的地址：

base64

三、gulp-zip 压缩文件

ile文件夹里面的全部文件

实例代码：

const { src, dest, parallel } = require('gulp');

const zip = require('gulp-zip');
 

function compress () {
    // 加压缩file文件夹里面的全部文件，压缩到dist文件里面命名为compress.zip
    return src('file/*')
    .pipe(zip('compress.zip'))
    .pipe(dest('dist'))
};

exports.compress  = compress ;
// parallel平行执行函数
exports.default = parallel(compress );

CMD 运行 gulp 结果如下：


C:\Users\Administrator\Desktop\gulp>gulp
[23:57:58] Using gulpfile ~\Desktop\gulp\gulpfile.js
[23:57:58] Starting 'default'...
[23:57:58] Starting 'compress'...
[23:57:59] Finished 'compress' after 184 ms
[23:57:59] Finished 'default' after 190 ms

去文件夹查看结果：

查看压缩的文件

四、gulp-imagemin 图片压缩

压缩源代码：
参考配置：gulp-cli - npm https://www.npmjs.com/package/gulp-cli

const { src, dest, parallel } = require('gulp');
 
const imagemin = require('gulp-imagemin');
 
function imgZip (){
    // images文件夹里面的全部图片，压缩完成放在dist的images里面
    return src('images/*')
        .pipe(imagemin([
            imagemin.gifsicle({interlaced: true}),
            imagemin.jpegtran({progressive: true}),
            imagemin.optipng({optimizationLevel: 5}),
            imagemin.svgo({
                plugins: [
                    {removeViewBox: true},
                    {cleanupIDs: false}
                ]
            })
        ])).pipe(dest('dist/images'))
}
// gifsicle — Compress GIF images interlaced: true交错的gif逐步呈现。
// jpegtran — Compress JPEG images {progressive: true} 无损转换。
// optipng — Compress PNG images optimizationLevel 表示优化等级
// svgo — Compress SVG images
exports.imgZip  = imgZip ;
// parallel平行执行函数
exports.default = parallel(imgZip);

gulp 运行


C:\Users\Administrator\Desktop\gulp>gulp
[09:15:03] Using gulpfile ~\Desktop\gulp\gulpfile.js
[09:15:03] Starting 'default'...
[09:15:03] Starting 'imgZip'...
[09:15:04] gulp-imagemin: Minified 4 images (saved 7.65 kB - 4.2%)
[09:15:04] Finished 'imgZip' after 651 ms
[09:15:04] Finished 'default' after 658 ms

gulp-imagemin 图片压缩

五、概念补充

1. JavaScript 和 Gulpfile 的关系：

Gulp 允许使用现有 JavaScript 知识来书写 gulpfile 文件，除了本身 gulp 自带的 API ，gulp 中的其他代码都是纯 JavaScript 代码。

gulp 中最重要的文件就是 gulpfile.js （或者首字母大写 Gulpfile.js 文件）在运行 gulp 命令时此文件会被自动加载。在这个文件中，你经常会看到类似 src()、dest()、series() 或 parallel() 函数之类的 gulp API，除此之外，纯 JavaScript 代码或 Node 模块也会被使用。任何导出（export）的函数都将注册到 gulp 的任务（task）系统中。

2. 创建任务（task）

每个 gulp 任务（task）都是一个异步的 JavaScript 函数，可以简单的认为 task 就是一个函数。例如：

function css(cb) {
  cb();
}

任务（tasks）可以是 public（公开）或 private（私有）类型的。

公开任务（Public tasks）从 gulpfile 中被导出（export），可以通过 gulp 命令直接调用。例如：exports.build = build;
私有任务（Private tasks）被设计为在内部使用，通常作为 series() 或 parallel() 组合的组成部分。例如：exports.default = series(build);

可以看出公开任务私有任务的区别就在于，到底有没有 export ，还有就是CMD窗口运行的时候，公开任务运行是 gulp bulid ，私有任务是直接 gulp。

顺带提一嘴：组合任务

gulp 两个重要的 API series() 和 parallel()，series 表示系列的意思，parallel 表示平行的意思。根据英语也明白了 series 表示事件顺序执行，一旦其中一个出错，后面的就不在执行了，parallel 表示平行执行，一起做，不管谁出错，各个只负责自己把事件执行完成。

经典嵌套组合任务：

exports.build = series(clean, parallel(css, javascript));

3. 常见 API

除了上面的 series 和 parallel 还有几个常用的，另外注意的是为了代码能全部执行，一般都是用 parallel 平行执行。

src() 就是用来打开文件的。
官网解释：
接受 glob 参数，并从文件系统中读取文件然后生成一个 Node 流（stream）。它将所有匹配的文件读取到内存中并通过流（stream）进行处理。这种处理方式很好的保护了计算机，grunt 与其相比就太逊了。

什么是 glob 参数？
glob 是由普通字符和/或通配字符组成的字符串，用于匹配文件的路径。比较常用的用法是：
一个星号 * ：'*.js' 配置所有.js 的文件
两个星号 **：'src/**/*.js' 可以匹配的路径包括：src文件里面的所有 .js 和 src 文件夹下所有文件夹里面的 .js 文件
一个感叹号！：['src/**/*.js', '!img'] 取反的意思，表示不匹配这个 img 路径。

.pipe() 方法，没啥好解释的记住就行了。
流（stream）所提供的主要的 API 是 .pipe() 方法，用于连接转换流（Transform streams）或可写流（Writable streams）
dest 方法
dest() 接受一个输出目录作为参数，并且它还会产生一个 Node 流（stream），通常作为终止流（terminator stream），就是输出文件的路径。
插件的用法
插件直接引用并作为一个方法放在 pipe 这个方法里面，插件就可以起作用了。通常插件的位置是放在 src 和 dest 方法之间的。
文件监控
这个没啥用，了解一下就行。 watch() 方法利用文件系统的监控程序（file system watcher）将 globs 与任务（task）进行关联。就例如：

// 可以只关联一个任务
watch('img/*.css', img);
// 或者关联一个任务组合
watch('src/*.js', series(clean, javascript));

watch 方法第一个参数和 src 这个方法相同，第二个参数就是个 task ，一个函数。

Gulp 使用方法(教程一)
Gulp 官网目录 Gulp 环境 Gulp 环境初始化目录结构安装 gulp gulp 的简单使用使用 ...
gulp的简单使用
gulp使用流程：安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gu...
gulp入门
安装gulp 安装gulp插件 gulp使用与执行在目录创建gulpfile.js文件执行:gulp defa...
前端构建工具gulp构建项目
使用前提条件 gulp是基于Nodejs的自动任务运行器，gulp依赖于nodejs，因此，在使用gulp之前需要...
Gulp4(一)——基本使用及核心原理
目录 GlupGulp的使用步骤Gulp的基本使用安装起步默认任务gulp4.0之前的任务注册Gulp的组合任务G...
gulp自动化构建html静态资源路径版本号添加和替换
在使用gulp自动添加版本号时稍作一点修改，欢迎指正。我使用的是（gulp-rev+gulp-rev-colle...
gulp资源整理
Gulp官网 Gulp中文网 Gulp插件网博客：前端构建工具gulpjs的使用介绍及技巧 - 无双 gulp...
html代码复用各种方法
1.gulp-file-include（工具）使用步骤：1.安装gulp以及gulp-file-include(...
gulp入门教程详解
最近使用gulp自动化构建工具来开发网站，在此给大家分享一下使用gulp的一些使用教程。一 gulp安装 1、安...
Gulp
gulp的基本使用