Gulp 教程

Gulp 是一个前端自动化工具，用于优化前端的开发流程。通过 Gulp，你可以自动化许多任务，如文件压缩、图片优化、代码合并等。

安装 Gulp

首先，你需要安装 Node.js。安装完成后，打开命令行，运行以下命令安装 Gulp：

npm install --global gulp-cli

然后，在你的项目目录下创建一个 package.json 文件，并添加以下内容：

{
  "name": "your-project-name",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^4.0.0"
  }
}

接着，在项目目录下创建一个 gulpfile.js 文件，并添加以下内容：

const gulp = require('gulp');

gulp.task('default', function() {
  console.log('Gulp is running!');
});

现在，你已经成功安装并配置了 Gulp。

常用 Gulp 插件

以下是几个常用的 Gulp 插件：

• gulp-clean-css: 压缩 CSS 文件。
• gulp-uglify: 压缩 JavaScript 文件。
• gulp-imagemin: 优化图片文件。
• gulp-concat: 合并文件。

更多插件信息，请访问 Gulp 插件列表。

示例

以下是一个简单的 Gulp 任务示例，用于压缩 CSS 文件：

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

gulp.task('minify-css', function() {
  return gulp.src('src/css/*.css')
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(gulp.dest('dist/css'));
});

在命令行中运行 gulp minify-css，即可压缩 CSS 文件。

图片

Gulp 图标

更多信息，请访问 Gulp 官方网站。