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