Question

gulp.js - 基于流(stream) 的自动化构建工具。Grunt 采用配置文件的方式执行任务，而 Gulp 一切都通过代码实现。

https://www.gulpjs.com.cn/

Gulp 是一个基于流的任务自动化工具，用于简化和自动化前端开发任务，如文件编译、压缩、预处理等。它通过定义任务并将其串联起来执行，帮助开发者提高效率并减少重复工作。

主要特点：

1. 基于流 : 通过使用流（streams）处理文件，允许在文件处理过程中进行操作而无需将其写入磁盘，这提高了效率。
2. 插件生态 : 提供了丰富的插件，可以处理各种任务，如 Sass 编译、JavaScript 压缩、图片优化等。
3. 简单的 API : 通过简洁的 API 定义任务和任务依赖关系，使得任务定义和配置易于理解和维护。

安装：

1. 全局安装 Gulp CLI :

   npm install --global gulp-cli
   

2. 在项目中安装 Gulp 和所需插件 :

   npm install --save-dev gulp
   

创建 Gulp 文件：

在项目根目录下创建 gulpfile.js 文件，定义任务。

示例 gulpfile.js ：

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

// 编译 Sass
gulp.task('sass', function() {
  return gulp.src('src/scss/*.scss') // 输入文件
    .pipe(sass().on('error', sass.logError)) // 编译 Sass
    .pipe(cleanCSS()) // 压缩 CSS
    .pipe(gulp.dest('dist/css')); // 输出目录
});

// 合并和压缩 JavaScript
gulp.task('scripts', function() {
  return gulp.src('src/js/*.js') // 输入文件
    .pipe(concat('all.js')) // 合并文件
    .pipe(uglify()) // 压缩 JavaScript
    .pipe(gulp.dest('dist/js')); // 输出目录
});

// 默认任务
gulp.task('default', gulp.series('sass', 'scripts'));

运行任务：

• 运行默认任务 （在 gulpfile.js 中定义的默认任务）：

  gulp
  

• 运行特定任务 ：

  gulp sass
  gulp scripts
  

监视文件变化：

可以使用 gulp.watch 来监视文件变化并自动运行任务：

gulp.task('watch', function() {
  gulp.watch('src/scss/*.scss', gulp.series('sass'));
  gulp.watch('src/js/*.js', gulp.series('scripts'));
});

// 添加到默认任务中
gulp.task('default', gulp.series('sass', 'scripts', 'watch'));

Gulp 通过其流式处理和丰富的插件系统，提供了一种高效、灵活的方式来管理前端构建任务。