如何使用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();
})