使用 gulp 打造流畅的小程序开发体验

2023-10-07 15:07:56

在项目开发中，技术选型总是层出不穷。我们的小程序前端开发也没有逃离这个「魔咒」。最开始，我们使用原生方式开发，但这样也有一个弊端，那就是无法使用框架带来的效率提升，于是我们决定使用 Gulp，并配置了一套工作流，来帮助我们提升开发效率。

Gulp 基础介绍

Gulp 是一款开源的任务构建工具，可以帮助开发人员自动化一些任务，例如代码编译、打包、压缩等。Gulp 的工作原理是使用管道（Stream）来处理文件，每个管道代表一个任务，任务之间可以通过管道连接起来，形成一个工作流。

配置 Gulp 工作流

下面介绍一下如何配置一个简单的 Gulp 工作流：

安装 Gulp 和相关的插件。在命令行中执行以下命令：

npm install --save-dev gulp

创建一个 Gulpfile.js 文件。这个文件是 Gulp 的配置文件，用于定义任务。
在 Gulpfile.js 文件中添加以下代码：

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');

gulp.task('sass', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions']
    }))
    .pipe(cleanCSS())
    .pipe(rename({
      suffix: '.min'
    }))
    .pipe(gulp.dest('./dist/css'));
});