面试题：CSS 预处理器与 Gulp 在复杂项目中的优化

安装依赖：
- 首先需要安装gulp、gulp-less、gulp-autoprefixer、gulp-clean-css等插件。
- gulp是整个工作流的基础工具，用于定义和执行任务。
- gulp-less用于将Less文件编译为CSS文件，因为它专门处理Less到CSS的转换。
- gulp-autoprefixer自动为CSS添加浏览器前缀，以保证CSS在不同浏览器中的兼容性。
- gulp-clean-css用于压缩CSS文件，减少文件体积，提高页面加载速度。
定义Gulp任务：

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

// 编译Less任务
gulp.task('less:compile', function () {
    return gulp.src('src/pages/**/*.less')
      .pipe(less())
      .pipe(gulp.dest('dist/css'));
});

// 添加浏览器前缀任务
gulp.task('css:prefix', ['less:compile'], function () {
    return gulp.src('dist/css/*.css')
      .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
      .pipe(gulp.dest('dist/css'));
});

// 压缩CSS任务
gulp.task('css:compress', ['css:prefix'], function () {
    return gulp.src('dist/css/*.css')
      .pipe(cleanCSS())
      .pipe(gulp.dest('dist/css'));
});

// 定义默认任务
gulp.task('default', ['css:compress']);

处理公共部分优化：
- 可以使用Less的@import规则来处理公共部分。在每个页面的Less文件中通过@import "path/to/common.less"引入公共Less文件。这样在编译时，gulp-less会自动将公共部分合并到每个页面的CSS文件中，实现公共部分的复用，同时减少重复代码。在上述Gulp任务中，gulp-less在编译时会自动处理这些@import语句，无需额外插件专门处理。

这样，通过上述Gulp工作流，就可以实现Less文件的编译、自动添加浏览器前缀、压缩CSS以及处理公共部分的优化。

面试题：CSS 预处理器与 Gulp 在复杂项目中的优化

知识考点

面试题答案