Gulp学习笔记- 基本使用

原创于 2022-03-28 17:50:21 发布 · 172 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #javascript

本文介绍如何使用Gulp进行自动化构建流程，包括安装Gulp、配置gulpfile.js、定义任务等步骤，并通过示例展示了基本的文件处理过程。

Gulp使用

1.npm install gulp --save-dev / yarn add gulp --save-dev
2.在项目根目录下建立gulpfile.js文件
3.重构项目的文件夹结构，src放置源代码文件，dist目录放置构建后文件
4.在gulpfile.js中编写任务
5.在命令行工具中执行gulp任务

Gulp中提供的方法

gulp.src() 获取任务要处理的文件
gulp.dest() 输出文件
gulp.task() 建立gulp任务
gulp.watch(); 监控文件的变化

// 引入gulp模块
const gulp = require("gulp");
// 使用gulp.task()建立任务
gulp.task("first",() => {
    console.log("gulp任务执行了");
    // 使用gulp.src() 获取要处理的文件
    gulp.src("./src/style/base.css")
        .pipe(gulp.dest("./dist/css"));
});