基本使用

Gulp 基本使用

Gulp 的基本使用方法和常见任务配置

---

📋 目录

• 创建 gulpfile.js
• 定义基本任务
• 处理 JavaScript
• 处理 CSS
• 处理 HTML
• 处理图片
• 文件监听
• 创建开发服务器

---

创建 gulpfile.js

基本结构

// gulpfile.js
const { src, dest, watch, series, parallel } = require('gulp');
 
// 定义任务
function taskName() {
  return src('src/file')
    .pipe(dest('dist/'));
}
 
// 导出任务
exports.taskName = taskName;
exports.default = taskName;

项目结构

project/
├── src/                    # 源文件目录
│   ├── js/                # JavaScript 文件
│   ├── css/               # CSS 文件
│   ├── images/            # 图片文件
│   └── index.html         # HTML 文件
├── dist/                   # 输出目录（自动生成）
├── gulpfile.js            # Gulp 配置文件
└── package.json           # 项目配置

---

定义基本任务

复制文件

// 复制所有文件
function copy() {
  return src('src/**/*')
    .pipe(dest('dist/'));
}
 
// 复制特定文件
function copyHtml() {
  return src('src/*.html')
    .pipe(dest('dist/'));
}
 
exports.copy = copy;

清理文件

const del = require('del');
 
// 清理 dist 目录
function clean() {
  return del(['dist/*']);
}
 
// 清理特定文件
function cleanJs() {
  return del(['dist/js/*.js']);
}
 
exports.clean = clean;

---

处理 JavaScript

压缩 JavaScript

const uglify = require('gulp-uglify');
 
// 压缩 JS
function scripts() {
  return src('src/js/**/*.js')
    .pipe(uglify())
    .pipe(dest('dist/js'));
}
 
exports.scripts = scripts;

合并 JavaScript

const concat = require('gulp-concat');
 
// 合并 JS 文件
function scripts() {
  return src('src/js/**/*.js')
    .pipe(concat('app.js'))  // 合并为 app.js
    .pipe(uglify())
    .pipe(dest('dist/js'));
}

Babel 转译

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

生成 Source Map

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

完整 JavaScript 处理流程

function scripts() {
  return src('src/js/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(concat('app.min.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/js'));
}

---

处理 CSS

压缩 CSS

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

Sass 编译

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

Less 编译

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

PostCSS 处理

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

完整 CSS 处理流程

function styles() {
  return src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([
      autoprefixer(),
      cssnano()
    ]))
    .pipe(concat('app.min.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/css'));
}

---

处理 HTML

压缩 HTML

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

模板引擎

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

文件包含

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

---

处理图片

压缩图片

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'));
}

响应式图片

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'));
}

WebP 转换

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

---

文件监听

基本监听

const { watch } = require('gulp');
 
// 监听文件变化
function dev() {
  watch('src/js/**/*.js', scripts);
  watch('src/css/**/*.css', styles);
  watch('src/*.html', html);
  watch('src/images/**/*', images);
}
 
exports.dev = dev;

监听选项

function dev() {
  watch('src/js/**/*.js', {
    delay: 500,           // 防抖延迟（毫秒）
    ignoreInitial: false, // 是否忽略初始文件
    queue: true          // 是否排队执行
  }, scripts);
}

监听事件

function dev() {
  const watcher = watch('src/js/**/*.js', scripts);
  
  watcher.on('change', (path) => {
    console.log(`File ${path} was changed`);
  });
  
  watcher.on('add', (path) => {
    console.log(`File ${path} was added`);
  });
  
  watcher.on('unlink', (path) => {
    console.log(`File ${path} was removed`);
  });
}

---

创建开发服务器

使用 gulp-connect

const connect = require('gulp-connect');
 
// 启动开发服务器
function server() {
  connect.server({
    root: 'dist',
    port: 8080,
    livereload: true
  });
}
 
// 自动刷新
function html() {
  return src('src/*.html')
    .pipe(htmlmin())
    .pipe(dest('dist'))
    .pipe(connect.reload());
}
 
exports.server = series(build, server, dev);

使用 browser-sync

const browserSync = require('browser-sync').create();
 
// 初始化 BrowserSync
function server() {
  browserSync.init({
    server: {
      baseDir: './dist'
    },
    port: 3000,
    open: true
  });
}
 
// 自动刷新
function html() {
  return src('src/*.html')
    .pipe(htmlmin())
    .pipe(dest('dist'))
    .pipe(browserSync.stream());
}
 
// 监听文件
function dev() {
  watch('src/js/**/*.js', series(scripts, browserSync.reload));
  watch('src/css/**/*.css', series(styles, browserSync.reload));
  watch('src/*.html', series(html, browserSync.reload));
}
 
exports.dev = series(build, parallel(server, dev));

完整开发环境配置

// 开发模式
gulp.task('dev', gulp.series(
  'build',
  gulp.parallel('server', 'watch')
));
 
// 生产构建
gulp.task('build', gulp.series(
  'clean',
  gulp.parallel('scripts', 'styles', 'html', 'images')
));
 
// 默认任务
gulp.task('default', gulp.series('dev'));

---

完整示例

完整 gulpfile.js

const { src, dest, watch, series, parallel } = require('gulp');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const htmlmin = require('gulp-htmlmin');
const imagemin = require('gulp-imagemin');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const browserSync = require('browser-sync').create();
const del = require('del');
 
// 清理
gulp.task('clean', () => {
  return del(['dist/*']);
});
 
// JavaScript
gulp.task('scripts', () => {
  return src('src/js/**/*.js')
    .pipe(sourcemaps.init())
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(concat('app.min.js'))
    .pipe(uglify())
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/js'))
    .pipe(browserSync.stream());
});
 
// CSS
gulp.task('styles', () => {
  return src('src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([
      autoprefixer(),
      cssnano()
    ]))
    .pipe(concat('app.min.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/css'))
    .pipe(browserSync.stream());
});
 
// HTML
gulp.task('html', () => {
  return src('src/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true
    }))
    .pipe(dest('dist'))
    .pipe(browserSync.stream());
});
 
// Images
gulp.task('images', () => {
  return src('src/images/**/*')
    .pipe(imagemin())
    .pipe(dest('dist/images'));
});
 
// Server
gulp.task('server', () => {
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  });
});
 
// Watch
gulp.task('watch', () => {
  watch('src/js/**/*.js', scripts);
  watch('src/scss/**/*.scss', styles);
  watch('src/*.html', html);
  watch('src/images/**/*', images);
});
 
// Build
gulp.task('build', series(
  clean,
  parallel(scripts, styles, html, images)
));
 
// Dev
gulp.task('dev', series(
  build,
  parallel(server, watch)
));
 
// Default
gulp.task('default', dev);

---

📚 相关链接

• Gulp 简介与安装
• Gulp 核心概念
• 常用插件
• 前端项目构建实战

---

标签: gulp 基本使用 javascript css html