一看就懂的gulp操作指南：让前端工作变得更加轻松（一）https://developer.aliyun.com/article/1426314
自动监测文件更改
在Gulp中，监测文件变化的插件是非常实用的。一个实用的插件叫做gulp-watch，它允许监视文件的变化并在变化后重新启动任务。安装方式：npm install gulp-watch --save-dev。
以下是一个例子，显示如何使用gulp-watch来监视文件变化：
const gulp = require('gulp'); const watch = require('gulp-watch'); gulp.task('watch', () => { watch('src/**/*.js', () => { gulp.start('js'); }); watch('src/**/*.scss', () => { gulp.start('sass'); }); // watch any other file types like images or css });
代码说明：
- 加载gulp和gulp-watch插件
- 定义一个命名为“watch”的任务，它监视src目录下的所有.js文件和.scss文件
- 如果文件变化，则重新启动相关任务（例如，如果.js文件变化，则启动名为“js”的任务）。
使用gulp-watch插件，可以轻松捕捉文件的变化，并自动重新执行相关任务，从而使项目开发更加高效。
IV. Gulp的实战应用
使用gulp优化图片
在Web应用程序中，图片是一种常见且非常重要的资源。为了提供更好的用户体验和更快的网站加载速度，我们需要对图片进行优化。在Gulp中，有许多插件可以帮助我们自动优化图片，常用插件包括gulp-imagemin、gulp-pngquant和gulp-jpegoptim等。
以下是一个使用gulp-imagemin插件减小图像大小的例子：
const gulp = require('gulp'); const imagemin = require('gulp-imagemin'); gulp.task('images', () => gulp.src('src/images/*') .pipe(imagemin()) .pipe(gulp.dest('dist/images')) );
代码说明：
- 加载gulp和gulp-imagemin插件
- 定义一个名为“images”的任务，它将src/images文件夹中的所有图像进行压缩优化
- 优化后的图像将保存在dist/images文件夹中。
使用gulp-imagemin插件，可以很容易地将Web应用程序中的图片进行优化，并将其减小到最小的文件大小，从而提高网站的性能。
使用gulp压缩CSS、JS文件
使用 Gulp 压缩 CSS 和 JS 文件可以提高网站访问速度，以下是分别压缩 CSS 和 JS 文件的示例：
- 压缩 CSS 文件：
// 引入 Gulp 和插件 const gulp = require('gulp'); const cleanCSS = require('gulp-clean-css'); // 压缩 CSS 文件 gulp.task('minify-css', function () { return gulp.src('src/css/*.css') // 匹配需要压缩的 CSS 文件 .pipe(cleanCSS()) // 执行压缩 .pipe(gulp.dest('dist/css')); // 输出到目标目录 });
在上述代码中，我们使用 gulp-clean-css 插件来压缩 CSS 文件。该插件可以自动将多余的空格、Tab 等内容去掉，并将 CSS 文件压缩为一行代码。执行命令 gulp minify-css 即可在 dist/css 目录下生成压缩后的 CSS 文件。
- 压缩 JS 文件：
// 引入 Gulp 和插件 const gulp = require('gulp'); const uglify = require('gulp-uglify'); // 压缩 JS 文件 gulp.task('minify-js', function () { return gulp.src('src/js/*.js') // 匹配需要压缩的 JS 文件 .pipe(uglify()) // 执行压缩 .pipe(gulp.dest('dist/js')); // 输出到目标目录 });
在上述代码中，我们使用 gulp-uglify 插件来压缩 JS 文件。该插件可以自动压缩变量名、删除注释、空白等并将 JS 文件压缩为最小体积。执行命令 gulp minify-js 即可在 dist/js 目录下生成压缩后的 JS 文件。
值得注意的是，代码压缩通常用于生产环境，开发环境中不建议使用代码压缩。并且压缩后的代码不易于阅读和调试，如果需要调试，请保留原代码。
使用gulp做自动化工作流
使用 Gulp 进行自动化工作流，可以使得前端开发变得更加高效、便捷。下面是一个简单的 Gulp 自动化工作流示例，包括将 SCSS 文件编译成 CSS 文件、压缩 CSS、JS 文件等任务：
1. 安装 gulp 和其他必须的依赖
npm install --save-dev gulp gulp-sass gulp-rename gulp-clean-css gulp-uglify
本例中使用了 gulp-sass、gulp-rename、gulp-clean-css、gulp-uglify 插件，分别用于编译 SCSS 文件、重命名文件、压缩 CSS 文件和 JS 文件。
2. 创建 gulpfile.js 文件
下面是一个包含了 SCSS 编译、CSS 压缩、JS 压缩等任务的样例 gulpfile.js 文件：
// 引入依赖 const gulp = require('gulp'), sass = require('gulp-sass'), rename = require('gulp-rename'), cleanCSS = require('gulp-clean-css'), uglify = require('gulp-uglify'); // 编译 SASS gulp.task('sass', () => { return gulp.src('src/sass/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('dist/css/')); }); // 压缩 CSS gulp.task('minify-css', () => { return gulp.src('dist/css/*.css') .pipe(rename({ suffix: '.min' })) .pipe(cleanCSS()) .pipe(gulp.dest('dist/css/')); }); // 压缩 JS gulp.task('minify-js', () => { return gulp.src('src/js/*.js') .pipe(rename({ suffix: '.min' })) .pipe(uglify()) .pipe(gulp.dest('dist/js/')); }); // 监听文件变化 gulp.task('watch', () => { gulp.watch('src/sass/*.scss', gulp.series('sass', 'minify-css')); gulp.watch('src/js/*.js', gulp.series('minify-js')); }); // 构建（默认）任务 gulp.task('default', gulp.series('sass', 'minify-css', 'minify-js', 'watch'));
在终端中执行如下命令即可启动默认的任务：
gulp
该任务会监听 src/sass 和 src/js 目录下的文件变化，并执行相应的任务，自动编译和压缩文件。
V. Gulp的实际案例
使用gulp来管理项目
首先，你需要在项目根目录下安装好gulp和各种相关的插件。可以使用npm安装，命令如下：
npm install gulp gulp-sass gulp-autoprefixer gulp-uglify gulp-rename gulp-concat --save-dev
以上依赖包含了常用的gulp插件，包括sass编译、自动添加CSS前缀、压缩混淆JS、重命名文件、合并文件等。
安装好gulp和插件后，你需要在项目根目录下创建一个名为gulpfile.js的文件，用来定义gulp任务和对应的操作。
下面是一个简单的gulpfile.js文件示例，用来编译sass文件并添加前缀：
const gulp = require('gulp'); const sass = require('gulp-sass'); const autoprefixer = require('gulp-autoprefixer'); gulp.task('sass', () => { return gulp.src('src/scss/*.scss') .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError)) .pipe(autoprefixer()) .pipe(rename({ extname: '.min.css' })) .pipe(gulp.dest('dist/css')) }); gulp.task('watch', () => { gulp.watch('src/scss/*.scss', gulp.series('sass')); }); gulp.task('default', gulp.series('sass', 'watch'));
以上代码定义了两个gulp任务：
- sass任务：用来编译scss文件并添加前缀，然后将编译后的css文件保存到dist/css目录下。
- watch任务：使用gulp.watch监听src/scss目录下的scss文件修改，并在文件修改时自动执行sass任务。
此外，还定义了一个默认任务（default），该任务会依次执行sass和watch任务。
最后，在命令行中输入gulp命令即可启动gulp任务，如：
gulp
这将会启动default任务，并开始监听文件修改。每次修改文件时，gulp会自动执行相应任务，生成输出文件。
一看就懂的gulp操作指南：让前端工作变得更加轻松（三）https://developer.aliyun.com/article/1426317
