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 将执行默认任务,启动服务器并监视文件变化。

关于Zeno Chen

本人涉及的领域较多,杂而不精 程序设计语言: Perl, Java, PHP, Python; 数据库系统: MySQL,Oracle; 偶尔做做电路板的开发,主攻STM32单片机
此条目发表在Javascript分类目录。将固定链接加入收藏夹。