让构建任务从零开始：使用Gulp4搭建项目脚手架

2023-11-18 23:29:38

脚手架搭建：Gulp4新体验

Gulp4作为一款强大的前端构建工具，可以帮助开发人员自动化各种重复性任务，提高开发效率。在本文中，我们将使用Gulp4来搭建一个全新的项目脚手架，让构建任务从零开始。无论是新项目还是老项目，Gulp4都能让你更高效地完成工作。

脚手架结构及相关插件

Gulp4脚手架的结构一般如下：

gulpfile.js： Gulp的配置文件
package.json： 项目的包管理文件
node_modules： 包依赖项的安装目录
src： 源代码目录
dist： 构建后的代码目录

所需插件：

gulp@4.0：Gulp的最新版本
gulp-sass：用于编译Sass文件
gulp-autoprefixer：用于自动添加浏览器前缀
gulp-imagemin：用于压缩图像
gulp-uglify：用于压缩JavaScript文件
gulp-htmlmin：用于压缩HTML文件

配置Gulp任务

在gulpfile.js文件中配置Gulp任务，详细过程如下：

首先，安装必要的依赖项。

npm install --save-dev gulp gulp-sass gulp-autoprefixer gulp-imagemin gulp-uglify gulp-htmlmin

在gulpfile.js中导入这些依赖项。

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');

定义Gulp任务。

gulp.task('sass', () => {
  return gulp.src('./src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(gulp.dest('./dist/css'));
});

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

gulp.task('uglify', () => {
  return gulp.src('./src/js/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js'));
});

gulp.task('htmlmin', () => {
  return gulp.src('./src/**/*.html')
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true
    }))
    .pipe(gulp.dest('./dist'));
});