Gulp4构建案例：深入浅出，手把手教学

2024-02-22 00:37:02

概述

在前端开发中，构建工具是一个非常重要的工具。它可以帮助我们自动执行许多繁琐的任务，如编译代码、压缩代码、生成文档等。Gulp是一个非常流行的构建工具，它具有强大的功能和丰富的插件生态。本文将通过一个详细的例子来学习如何使用Gulp4构建一个前端项目。

设置环境

首先，我们需要设置Gulp4的环境。我们可以使用npm安装Gulp4和相关的插件。

npm install --save-dev gulp gulp-cli gulp-sass gulp-less gulp-autoprefixer gulp-concat gulp-uglify gulp-imagemin gulp-htmlmin gulp-clean-css gulp-del

然后，我们需要创建一个gulpfile.js文件。这个文件将包含Gulp4的配置和任务。

const gulp = require('gulp');
const sass = require('gulp-sass');
const less = require('gulp-less');
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');
const htmlmin = require('gulp-htmlmin');
const cleanCss = require('gulp-clean-css');
const del = require('del');

gulp.task('styles', function() {
  return gulp.src('src/styles/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(concat('styles.css'))
    .pipe(cleanCss())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('scripts', function() {
  return gulp.src('src/scripts/*.js')
    .pipe(concat('scripts.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

gulp.task('images', function() {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(htmlmin())
    .pipe(gulp.dest('dist'));
});

gulp.task('clean', function() {
  return del(['dist']);
});

gulp.task('build', gulp.series('clean', 'styles', 'scripts', 'images', 'html'));

gulp.task('watch', function() {
  gulp.watch('src/styles/*.scss', gulp.series('styles'));
  gulp.watch('src/scripts/*.js', gulp.series('scripts'));
  gulp.watch('src/images/*', gulp.series('images'));
  gulp.watch('src/*.html', gulp.series('html'));
});

gulp.task('default', gulp.series('build', 'watch'));

创建任务

在gulpfile.js文件中，我们可以创建各种各样的任务。比如，我们可以创建一个编译样式的任务、一个编译脚本的任务、一个压缩图片的任务、一个压缩HTML的任务等等。

gulp.task('styles', function() {
  return gulp.src('src/styles/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(concat('styles.css'))
    .pipe(cleanCss())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('scripts', function() {
  return gulp.src('src/scripts/*.js')
    .pipe(concat('scripts.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

gulp.task('images', function() {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

gulp.task('html', function() {
  return gulp.src('src/*.html')
    .pipe(htmlmin())
    .pipe(gulp.dest('dist'));
});