扩展GULP的使用 - 认识常用的API

认识GULP常用的API

为了高效地使用GULP，我们需要熟悉一些常用的API。这些API提供了丰富的功能，可以帮助我们轻松地处理各种任务。

1. gulp.src()：文件选择器

gulp.src()函数用于选择要处理的文件。它可以接受一个或多个文件路径、文件名或Glob模式作为参数。例如：

const gulp = require('gulp');

gulp.task('copy-files', function () {
  gulp.src('src/images/*')
    .pipe(gulp.dest('dist/images'));
});

在上面的示例中，gulp.src('src/images/*')会选择src/images目录下的所有文件，然后通过管道传递给gulp.dest()函数进行复制。

2. gulp.dest()：目标目录

gulp.dest()函数用于指定将处理后的文件输出到哪个目录。它可以接受一个目录路径作为参数。例如：

const gulp = require('gulp');

gulp.task('copy-files', function () {
  gulp.src('src/images/*')
    .pipe(gulp.dest('dist/images'));
});

在上面的示例中，gulp.dest('dist/images')指定了将处理后的文件输出到dist/images目录。

3. gulp.task()：任务定义

gulp.task()函数用于定义一个任务。任务是GULP的基本执行单元，它可以执行一系列的操作。例如：

const gulp = require('gulp');

gulp.task('copy-files', function () {
  gulp.src('src/images/*')
    .pipe(gulp.dest('dist/images'));
});

在上面的示例中，gulp.task('copy-files', function () { ... })定义了一个名为copy-files的任务，该任务将src/images目录下的所有文件复制到dist/images目录。

4. gulp.watch()：文件监听

gulp.watch()函数用于监听文件或目录的变化。当被监听的文件或目录发生变化时，GULP会自动触发相应的任务。例如：

const gulp = require('gulp');

gulp.task('watch-files', function () {
  gulp.watch('src/images/*', gulp.series('copy-files'));
});

在上面的示例中，gulp.watch('src/images/*', gulp.series('copy-files'))监听src/images目录下的所有文件，当这些文件发生变化时，GULP会自动触发copy-files任务。

5. gulp.parallel()：并行任务执行

gulp.parallel()函数用于并行执行多个任务。例如：

const gulp = require('gulp');

gulp.task('build', gulp.parallel('copy-files', 'compile-sass'));

在上面的示例中，gulp.task('build', gulp.parallel('copy-files', 'compile-sass'))定义了一个名为build的任务，该任务并行执行copy-files和compile-sass任务。

6. gulp.series()：串行任务执行

gulp.series()函数用于串行执行多个任务。例如：

const gulp = require('gulp');

gulp.task('build', gulp.series('clean', 'copy-files', 'compile-sass'));

在上面的示例中，gulp.task('build', gulp.series('clean', 'copy-files', 'compile-sass'))定义了一个名为build的任务，该任务串行执行clean、copy-files和compile-sass任务。

通过掌握这些常用的API，您就可以编写出更强大、更高效的任务自动化脚本，从而简化您的开发工作流程。