Gulp 使用简单介绍

Gulp 是一个基于 Node.js 的前端自动化构建工具，采用代码优于配置的理念，能够自动完成常见的前端任务，如压缩代码、编译 Sass/Less、实时刷新浏览器等。以下是 Gulp 的简单使用方法：

1. 安装 Node.js 和 npm

在使用 Gulp 之前，需要确保已经安装了 Node.js 和 npm（Node 包管理器）。可以在终端中输入以下命令检查是否已安装：

node -v
npm -v

2. 全局安装 Gulp CLI

使用 npm 全局安装 Gulp 的命令行工具，以便在命令行中使用 gulp 命令：

npm install --global gulp-cli

3. 初始化项目

在项目的根目录下，初始化 package.json 文件：

npm init -y

这将创建一个默认的 package.json 文件。

4. 安装 Gulp 到项目依赖

将 Gulp 安装到项目的开发依赖中：

npm install --save-dev gulp

5. 创建 gulpfile.js 文件

在项目根目录下创建一个名为 gulpfile.js 的文件，这是 Gulp 的配置文件，用于定义任务。

6. 编写 Gulp 任务

以下是一个简单的 Gulp 任务示例，用于压缩 JavaScript 文件：

// 引入 Gulp 和插件
const gulp = require('gulp');
const uglify = require('gulp-uglify');

// 定义一个名为 'scripts' 的任务
gulp.task('scripts', function() {
    return gulp.src('src/js/**/*.js') // 指定源文件路径
        .pipe(uglify())               // 压缩文件
        .pipe(gulp.dest('dist/js'));  // 输出到目标路径
});

7. 运行 Gulp 任务

在终端中，执行以下命令运行指定的任务：

gulp scripts

这将执行名为 scripts 的任务，压缩指定的 JavaScript 文件。

8. 监视文件变化

可以使用 Gulp 的 watch 功能，当文件发生变化时自动执行任务：

// 定义一个默认任务，监视文件变化
gulp.task('default', function() {
    gulp.watch('src/js/**/*.js', gulp.series('scripts'));
});

在终端中执行 gulp 命令即可开始监视：

gulp

9. 编译 Sass 文件

如需编译 Sass 文件，可以安装 gulp-sass 插件：

npm install --save-dev gulp-sass sass

在 gulpfile.js 中添加任务：

const sass = require('gulp-sass')(require('sass'));

gulp.task('styles', function() {
    return gulp.src('src/scss/**/*.scss') // 指定 Sass 源文件
        .pipe(sass().on('error', sass.logError)) // 编译 Sass
        .pipe(gulp.dest('dist/css')); // 输出到目标路径
});

更新默认任务，监视 Sass 文件变化：

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

10. 合并多个任务

可以使用 gulp.series 或 gulp.parallel 方法来组合任务：

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

执行 gulp build 命令即可依次运行 scripts 和 styles 任务。

11. 常用插件

• gulp-uglify：压缩 JavaScript 文件。

• gulp-sass：编译 Sass 文件。

• gulp-concat：合并文件。

• gulp-rename：重命名文件。

• gulp-clean-css：压缩 CSS 文件。

• gulp-imagemin：优化图像文件。

• browser-sync：实时刷新浏览器。

12. 示例完整的 gulpfile.js

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();

// 压缩 JavaScript
gulp.task('scripts', function() {
    return gulp.src('src/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
        .pipe(browserSync.stream());
});

// 编译 Sass
gulp.task('styles', function() {
    return gulp.src('src/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
});

// 静态服务器 + 监视文件变化
gulp.task('serve', function() {
    browserSync.init({
        server: './dist'
    });

    gulp.watch('src/js/**/*.js', gulp.series('scripts'));
    gulp.watch('src/scss/**/*.scss', gulp.series('styles'));
    gulp.watch('dist/*.html').on('change', browserSync.reload);
});

// 默认任务
gulp.task('default', gulp.series('scripts', 'styles', 'serve'));

13. 执行默认任务

在终端中运行：

gulp

Gulp 将执行默认任务，启动服务器并监视文件变化。