前端自动化构建工具 Gulp 常用插件

[dolphin836]

英文官网

中文官网

Github 主页

简介

gulp 是基于 Node 的前端自动化构建工具。

我们可以使用 gulp 构建自己的前端工作流，帮助我们处理编译、压缩、合并、替换等工作，从而构建出性能更优的前端页面。

基于 npm 社区，大量的优秀插件被分享出来，对于初学者只需要简单的了解 gulp 和相关的插件就可以开始使用了。

安装

1. 安装 Node；
2. 全局安装 gulp；

$ npm install --global gulp

3. 在项目中安装 Gulp；

$ npm install --save-dev gulp

4. 在项目根目录下创建一个名为 gulpfile.js 的文件：

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
});

5. 运行 gulp 命令执行任务

插件

gulp-rev

给静态资源添加文件名 Hash 后缀，例如：unicorn.css → unicorn-d41d8cd98f.css

Hash 值是基于文件内容计算生成的，所有只要文件有变化就会生成新的 Hash 值

可以很简单的实现缓存的更新，因为浏览器是根据文件名称来缓存静态文件的

插件还提供 manifest 功能，一个 json 文件，记录原文件名和新文件名的对应关系

例如：

{
	"css/unicorn.css": "css/unicorn-d41d8cd98f.css",
	"js/unicorn.js": "js/unicorn-273c2c123f.js"
}

利用 manifest 功能，再结合 gulp-rev-collector 插件就可以轻松的把 Html 中的文件名替换掉了

gulp-rev-collector

结合 gulp-rev 使用

gulp-uglify

压缩 JavaScript 脚本

但是 gulp-uglify 不支持 ES6+

terser

gulp-uglify 的一个分支，支持 ES6+

gulp-imagemin

优化图片

gulp-concat

合并文件，可以配置 gulp-sourcemaps 使用生成 Source maps

gulp-sourcemaps

使用生成 Source maps

gulp-typescript

TypeScript 编译

gulp-less

Less 编译

gulp-html-replace

替换 Html 中预定义的内容块

可以结合 gulp-concat 使用，例如：

原 Html 中引用了 3 个 JavaScript 脚本

<!-- build:common-script -->
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script src="./node_modules/popper/dist/popper.js"></script>
<script src="./node_modules/bootstrap/dist/bootstrap.js"></script>
<!-- endbuild -->

使用 gulp-html-replace 规定的格式将要替换的内容标记出来

使用 gulp-concat 把 jquery.js、popper.js、bootstrap.js 合并成一个文件 common.js

let gulp = require('gulp');
let concat = require('gulp-concat');

gulp.task('common-script', function() {                         
    gulp.src(['./node_modules/jquery/dist/jquery.js', './node_modules/popper/dist/popper.js', './node_modules/bootstrap/dist/bootstrap.js'])
        .pipe(concat('common.js'))
        .pipe(gulp.dest('./dist/js'))
});

再使用 gulp-html-replace 将 Html 中标记的内容替换成 common.js

let gulp = require('gulp');
let htmlReplace  = require('gulp-html-replace');

gulp.task('rev', function() {
    gulp.src(['index.html'])
        .pipe(htmlReplace({
            'common-script': '/assets/dist/js/common.js'
        }))
        .pipe(gulp.dest('./dist'))
});

gulp-clean-css

压缩 CSS