常用插件

Gulp 常用插件

Gulp 生态系统中常用的插件集合

---

📋 目录

• JavaScript 处理插件
• CSS 处理插件
• HTML 处理插件
• 图片处理插件
• 文件操作插件
• 开发工具插件
• 其他实用插件

---

JavaScript 处理插件

gulp-uglify

JavaScript 压缩插件

npm install --save-dev gulp-uglify

const uglify = require('gulp-uglify');
 
function scripts() {
  return src('src/js/*.js')
    .pipe(uglify())
    .pipe(dest('dist/js'));
}
 
// 选项
uglify({
  mangle: true,              // 混淆变量名
  compress: {
    drop_console: true       // 移除 console
  }
})

gulp-babel

ES6+ 转 ES5

npm install --save-dev gulp-babel @babel/core @babel/preset-env

const babel = require('gulp-babel');
 
function scripts() {
  return src('src/js/*.js')
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(dest('dist/js'));
}

gulp-webpack

Webpack 集成

npm install --save-dev gulp-webpack webpack

const webpack = require('gulp-webpack');
 
function scripts() {
  return src('src/js/app.js')
    .pipe(webpack({
      mode: 'production',
      output: {
        filename: 'app.bundle.js'
      }
    }))
    .pipe(dest('dist/js'));
}

gulp-eslint

ESLint 代码检查

npm install --save-dev gulp-eslint

const eslint = require('gulp-eslint');
 
function lint() {
  return src(['src/js/**/*.js'])
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
}

gulp-sourcemaps

生成 Source Map

npm install --save-dev gulp-sourcemaps

const sourcemaps = require('gulp-sourcemaps');
 
function scripts() {
  return src('src/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/js'));
}

gulp-concat

文件合并

npm install --save-dev gulp-concat

const concat = require('gulp-concat');
 
function scripts() {
  return src('src/js/*.js')
    .pipe(concat('app.js'))
    .pipe(dest('dist/js'));
}

---

CSS 处理插件

gulp-sass

Sass 编译

npm install --save-dev gulp-sass sass

const sass = require('gulp-sass')(require('sass'));
 
function styles() {
  return src('src/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('dist/css'));
}

gulp-less

Less 编译

npm install --save-dev gulp-less

const less = require('gulp-less');
 
function styles() {
  return src('src/less/*.less')
    .pipe(less())
    .pipe(dest('dist/css'));
}

gulp-postcss

PostCSS 处理

npm install --save-dev gulp-postcss autoprefixer cssnano

const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
 
function styles() {
  return src('src/css/*.css')
    .pipe(postcss([
      autoprefixer(),
      cssnano()
    ]))
    .pipe(dest('dist/css'));
}

gulp-clean-css

CSS 压缩

npm install --save-dev gulp-clean-css

const cleanCSS = require('gulp-clean-css');
 
function styles() {
  return src('src/css/*.css')
    .pipe(cleanCSS())
    .pipe(dest('dist/css'));
}

---

HTML 处理插件

gulp-htmlmin

HTML 压缩

npm install --save-dev gulp-htmlmin

const htmlmin = require('gulp-htmlmin');
 
function html() {
  return src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true,
      minifyCSS: true,
      minifyJS: true
    }))
    .pipe(dest('dist/'));
}

gulp-pug

Pug 模板编译

npm install --save-dev gulp-pug

const pug = require('gulp-pug');
 
function html() {
  return src('src/pug/*.pug')
    .pipe(pug({
      pretty: true
    }))
    .pipe(dest('dist/'));
}

gulp-file-include

HTML 文件包含

npm install --save-dev gulp-file-include

const fileInclude = require('gulp-file-include');
 
function html() {
  return src('src/*.html')
    .pipe(fileInclude({
      prefix: '@@',
      basepath: '@file'
    }))
    .pipe(dest('dist/'));
}

gulp-nunjucks

Nunjucks 模板编译

npm install --save-dev gulp-nunjucks

const nunjucks = require('gulp-nunjucks');
 
function html() {
  return src('src/templates/*.html')
    .pipe(nunjucks.compile({
      name: 'World'
    }))
    .pipe(dest('dist/'));
}

---

图片处理插件

gulp-imagemin

图片压缩

npm install --save-dev gulp-imagemin

const imagemin = require('gulp-imagemin');
 
function images() {
  return src('src/images/**/*')
    .pipe(imagemin([
      imagemin.gifsicle({ interlaced: true }),
      imagemin.mozjpeg({ quality: 75, progressive: true }),
      imagemin.optipng({ optimizationLevel: 5 }),
      imagemin.svgo({
        plugins: [
          { removeViewBox: true },
          { cleanupIDs: false }
        ]
      })
    ]))
    .pipe(dest('dist/images'));
}

gulp-webp

WebP 转换

npm install --save-dev gulp-webp

const webp = require('gulp-webp');
 
function webpImages() {
  return src('src/images/**/*.{jpg,png}')
    .pipe(webp({
      quality: 85
    }))
    .pipe(dest('dist/images'));
}

gulp-responsive

响应式图片生成

npm install --save-dev gulp-responsive

const responsive = require('gulp-responsive');
 
function images() {
  return src('src/images/**/*.{jpg,png}')
    .pipe(responsive({
      '*.jpg': [
        { width: 320, rename: { suffix: '-small' } },
        { width: 640, rename: { suffix: '-medium' } },
        { width: 1024, rename: { suffix: '-large' } }
      ]
    }))
    .pipe(dest('dist/images'));
}

---

文件操作插件

del

删除文件（Gulp 4.x 推荐使用）

npm install --save-dev del

const del = require('del');
 
function clean() {
  return del(['dist/*']);
}

gulp-rename

文件重命名

npm install --save-dev gulp-rename

const rename = require('gulp-rename');
 
function scripts() {
  return src('src/js/app.js')
    .pipe(uglify())
    .pipe(rename({
      suffix: '.min',
      extname: '.js'
    }))
    .pipe(dest('dist/js'));
}

gulp-filter

文件过滤

npm install --save-dev gulp-filter

const filter = require('gulp-filter');
 
function scripts() {
  const jsFilter = filter('**/*.js', { restore: true });
  
  return src('src/**/*')
    .pipe(jsFilter)
    .pipe(uglify())
    .pipe(jsFilter.restore)
    .pipe(dest('dist/'));
}

gulp-if

条件判断

npm install --save-dev gulp-if

const gulpif = require('gulp-if');
const { argv } = require('yargs');
 
function scripts() {
  return src('src/js/*.js')
    .pipe(gulpif(argv.production, uglify()))
    .pipe(dest('dist/js'));
}

---

开发工具插件

browser-sync

浏览器同步

npm install --save-dev browser-sync

const browserSync = require('browser-sync').create();
 
function server() {
  browserSync.init({
    server: {
      baseDir: './dist'
    },
    port: 3000
  });
}
 
function reload(cb) {
  browserSync.reload();
  cb();
}

gulp-connect

本地服务器

npm install --save-dev gulp-connect

const connect = require('gulp-connect');
 
function server() {
  connect.server({
    root: 'dist',
    port: 8080,
    livereload: true
  });
}

gulp-plumber

错误处理（防止管道中断）

npm install --save-dev gulp-plumber

const plumber = require('gulp-plumber');
 
function scripts() {
  return src('src/js/*.js')
    .pipe(plumber())  // 防止错误中断
    .pipe(babel())
    .pipe(uglify())
    .pipe(dest('dist/js'));
}

gulp-notify

系统通知

npm install --save-dev gulp-notify

const notify = require('gulp-notify');
 
function scripts() {
  return src('src/js/*.js')
    .pipe(babel())
    .on('error', notify.onError('Error: <%= error.message %>'))
    .pipe(dest('dist/js'));
}

---

其他实用插件

gulp-size

显示文件大小

npm install --save-dev gulp-size

const size = require('gulp-size');
 
function scripts() {
  return src('src/js/*.js')
    .pipe(uglify())
    .pipe(size({
      showFiles: true,
      showTotal: false
    }))
    .pipe(dest('dist/js'));
}

gulp-util

Gulp 工具函数

npm install --save-dev gulp-util

const gutil = require('gulp-util');
 
function scripts() {
  if (gutil.env.production) {
    return src('src/js/*.js')
      .pipe(uglify())
      .pipe(dest('dist/js'));
  } else {
    return src('src/js/*.js')
      .pipe(dest('dist/js'));
  }
}

gulp-changed

只处理修改过的文件

npm install --save-dev gulp-changed

const changed = require('gulp-changed');
 
function images() {
  return src('src/images/**/*')
    .pipe(changed('dist/images'))
    .pipe(imagemin())
    .pipe(dest('dist/images'));
}

gulp-newer

只处理新文件

npm install --save-dev gulp-newer

const newer = require('gulp-newer');
 
function images() {
  return src('src/images/**/*')
    .pipe(newer('dist/images'))
    .pipe(imagemin())
    .pipe(dest('dist/images'));
}

gulp-debug

调试输出

npm install --save-dev gulp-debug

const debug = require('gulp-debug');
 
function scripts() {
  return src('src/js/*.js')
    .pipe(debug({ title: 'scripts:' }))
    .pipe(uglify())
    .pipe(dest('dist/js'));
}

---

📚 相关链接

• Gulp 官方插件库
• npm 搜索 gulp-plugin
• Awesome Gulp

---

标签: gulp 插件 构建工具 工程化