常用 Gulp 插件
HTML 文件处理
压缩处理 HTML 文件，详细参数参数见 Options Quick Reference 。
安装：
yarn add gulp-htmlmin --dev使用：
const { src, dest } = require('gulp');
const minifyHtml = require('gulp-htmlmin');
function minifyHtml() {
const options = {
collapseWhitespace: true, // 是否将 HTML 代码折叠成一行，默认 false
removeComments: true // 是否删除注释，默认 false
};
return src('./*.html')
.pipe(minifyHtml(options))
.pipe(dest('./dist/'));
};使用 HTML 注释标记替换文档内容，支持 .hbs/.jsp/.php 等模板文件 。
安装：
yarn add gulp-processhtml --dev使用：
const { src, dest } = require('gulp');
const processHtml = require('gulp-processhtml');
function processHtml() {
return src('./index.html')
.pipe(processHtml())
.pipe(dest('./dist/'));
}需要处理的文档内容添加标记：
<!DOCTYPE html>
<html>
<head>
<!-- build:css /css/bundle.css -->
<link rel="stylesheet" href="/libraries/normalize/normalize.css">
<link rel="stylesheet" href="/css/screen.css">
<!-- /build -->
<!-- build:js /js/bundle.js -->
<script src="/libraries/jquery/jquery.js"></script>
<script src="/js/index.js"></script>
<!-- /build -->
</head>
<body>
<!-- build:remove -->
remove
<!-- /build -->
<!-- build:replace 'processhtml' -->
PROCESSHTML
<!-- /build -->
</body>
</html>处理之后的文档内容：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/bundle.css">
<script src="/js/bundle.js"></script>
</head>
<body>
processhtml
</body>
</html>CSS 文件处理
PostCSS 插件，用于给 CSS 添加兼容性前缀。
安装：
yarn add gulp-postcss autoprefixer --dev使用：
const { src, dest } = require('gulp');
const postCss = require('gulp-postcss');
const autoPreFixer = require('autoprefixer');
function processCss() {
const postCssPlugins = [autoPreFixer()];
return src('./assets/css/*.css', { base: './' })
.pipe(postCSss(postCssPlugins))
.pipe(dest('./dist/'));
}使用 Browserslist 来配置浏览器支持列表，可在项目根目录中添加 .browserslistrc 配置文件：
# Browsers that we support
# https://github.com/browserslist/browserslist
last 2 version
> 1%
IE 11PostCSS 插件，用于处理 CSS 文件中使用 url() 引用的文件（SVG 或者媒体文件）。可以自动修改引用文件路径，引用文件的文件名换成 Hash，内联引用文件。
安装：
yarn add gulp-postcss postcss-url --dev自动修改引用文件路径：
/**
* 处理前文件目录：
* ./assets/css/*.css
* ./assets/icons/icon.svg
* 处理后文件目录：
* ./dist/assets/*.css
* ./dist/assets/icons/icon.svg
* 处理前引用路径：background-image: url('../icons/icon.svg');
* 处理后引用路径：background-image: url('icons/icon.svg');
*/
const { src, dest } = require('gulp');
const postCss = require('gulp-postcss');
const postUrl = require('postcss-url');
function processCss() {
const postUrlOptions = { url: 'rebase' };
const postCssPlugins = [postUrl(postUrlOptions)];
const postCssOptions = {
from: './assets/css/*.css',
to: './dist/assets/*.css'
};
return src('./assets/css/*.css', { base: './' })
.pipe(postCSss(postCssPlugins, postCssOptions))
.pipe(dest('./dist/'));
}引用文件的文件名换成 Hash：
/**
* 处理前文件目录：
* ./assets/css/*.css
* ./assets/icons/icon.svg
* 处理后文件目录：
* ./dist/assets/css/*.css
* ./dist/assets/icons/a34223d4.svg
* 处理前引用路径：background-image: url('../icons/icon.svg');
* 处理后引用路径：background-image: url('../icons/a34223d4.svg');
*/
const { src, dest } = require('gulp');
const postCss = require('gulp-postcss');
const postUrl = require('postcss-url');
function processCss() {
const postUrlOptions = {
url: 'copy',
useHash: true,
basePath: '../icons/', // 需要处理的引用文件路径，相对于 PostCSS 选项中的 'from'
assetsPath: '../icons/', // 处理后存放引用文件路径，相对于 PostCSS 选项中的 'to'
};
const postCssPlugins = [postUrl(postUrlOptions)];
const postCssOptions = {
from: './assets/css/*.css',
to: './dist/assets/css/*.css'
};
return src('./assets/css/*.css', { base: './' })
.pipe(postCSss(postCssPlugins, postCssOptions))
.pipe(dest('./dist/'));
}内联文件：
const { src, dest } = require('gulp');
const postCss = require('gulp-postcss');
const postUrl = require('postcss-url');
function processCss() {
const postUrlOptions = {
url: 'inline',
encodeType: 'base64', // 编码方式
maxSize: 6 * 1024 // 最大文件大小
};
const postCssPlugins = [postUrl(postUrlOptions)];
return src('./assets/css/*.css', { base: './' })
.pipe(postCSss(postCssPlugins))
.pipe(dest('./dist/'));
}PostCSS 插件，用于模块化压缩 CSS 文件。
安装：
yarn add gulp-postcss cssnano --dev使用：
const { src, dest } = require('gulp');
const postCss = require('gulp-postcss');
const cssNano = require('cssnano');
function processCss() {
const postCssPlugins = [cssNano()];
return src('./assets/css/*.css', { base: './' })
.pipe(postCSss(postCssPlugins))
.pipe(dest('./dist/'));
}JS 文件处理
压缩 JS 文件。
安装：
yarn add gulp-uglify --dev使用：
const { src, dest } = require('gulp');
const postCss = require('gulp-postcss');
const minifyJs = require('gulp-uglify');
function processJs() {
return src('./assets/js/*.js', { base: './' })
.pipe(minifyJs())
.pipe(dest('./dist/'));
}通用文件处理
文件名添加 Hash。
安装：
yarn add gulp-rev --dev使用：
const { src, dest } = require('gulp');
const rev = require('gulp-rev');
function processJs() {
return src('./assets/js/*.js', { base: './' })
.pipe(rev())
.pipe(dest('./dist/'));
}根据配合 gulp-rev 生成的 manifest 文件替换文件引用。
安装：
yarn add gulp-rev gulp-rev-rewrite --dev使用：
const { src, dest } = require('gulp');
const rev = require('gulp-rev');
const revRewrite = require('gulp-rev-rewrite');
const revManifest = './dist/rev-manifest.json';
const revOptions = {
base: './dist/', // manifest 文件路径
merge: true // 当已有 mainifest 文件时，合并文件
};
function processCss() {
return src('./assets/css/*.css', { base: './' })
.pipe(rev())
.pipe(dest('./dist/'))
.pipe(rev.manifest(revManifest, revOptions))
.pipe(dest('./dist/'));
}
function processJs() {
return src('./assets/js/*.js', { base: './' })
.pipe(rev())
.pipe(dest('./dist/'))
.pipe(rev.manifest(revManifest, revOptions))
.pipe(dest('./dist/'));
}
function reWriteRefs() {
return src('./dist/index.html')
.pipe(revRewrite({ manifest: src(revManifest) }))
.pipe(dest('./dist/'));
}将目录或文件打包成 zip 压缩包。
安装：
yarn add gulp-zip --dev使用：
const { src, dest } = require('gulp');
const zip = require('gulp-zip');
function zipper() {
return src('./dist/**/*.*')
.pipe(zip('dist.zip'))
.pipe(dest('./zip/'));
}Last updated