如何使用Gulp执行任务？

文章目录

1.Gulp 使用
2.Gulp 中提供的方法
3.Gulp 执行任务的简单示例（文件复制）

1.Gulp 使用

使用npm install gulp 下载gulp库文件
在项目根目录下建立gulpfile.js文件
重构项目的文件夹结构——src目录存放源代码文件、dist目录存放处理后的文件
在gulpfile.js文件中编写任务
在命令行工具中执行gulp任务

2.Gulp 中提供的方法

gulp.src（）：获取任务要处理的文件
gulp.dest（）：输出文件
gulp.task（）：建立gulp任务
gulp.watch（）：监控文件的变化`

3.Gulp 执行任务的简单示例（文件复制）

//gulpfile.js文件
//引用gulp模块
const gulp = require('gulp');
/* 
 *gulp.task(参数1，参数2)
 *参数1：任务的名称
 *参数2：任务的回调函数
 */
gulp.task('first', ()=> {
    console.log('任务开始执行');
    //1.使用gulp.src获取要处理的文件
    gulp.src('src/tab.css')
        .pipe(gulp.dest('dist/css'));
});

执行gulp任务的步骤

下载gulp命令行工具： npm install gulp-cli -g

执行命令：gulp 任务名

控制台输出 "Did you forget to signal async completion?"的解决方案

原因详细请看API的异步执行

解决方案见下方代码

方案一

gulp.task('first', async() => {
    console.log('任务开始执行');
    //1.使用gulp.src获取要处理的文件
    gulp.src('src/tab.css')
        .pipe(gulp.dest('dist/css'));
});

方案二

gulp.task('first', (done) => {
    console.log('任务开始执行');
    //1.使用gulp.src获取要处理的文件
    gulp.src('src/tab.css')
        .pipe(gulp.dest('dist/css'));
    done();
})

来源：CSDN

作者：艾豆子

链接：https://blog.csdn.net/VR_tyy/article/details/104745558

标签

gulp