1. Сначала необходимо убедиться, что у вас установлен Gulp и все необходимые плагины (gulp-sass, gulp-autoprefixer, gulp-concat, gulp-clean-css) через npm:
```bash
npm install gulp gulp-sass gulp-autoprefixer gulp-concat gulp-clean-css --save-dev
```
2. Создайте файл `gulpfile.js` в корне вашего проекта и добавьте в него следующий код:
```javascript
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const paths = {
styles: {
src: 'src/scss/**/*.scss',
dest: 'dist/css/'
}
}
function styles() {
return gulp.src(paths.styles.src)
.pipe(sass())
.pipe(autoprefixer())
.pipe(concat('styles.css'))
.pipe(cleanCSS())
.pipe(gulp.dest(paths.styles.dest));
}
function watch() {
gulp.watch(paths.styles.src, styles);
}
exports.styles = styles;
exports.watch = watch;
```
3. Запустите Gulp командой:
```bash
gulp watch
```
Теперь Gulp будет автоматически компилировать SASS файлы, добавлять префиксы, конкатенировать и минифицировать CSS при изменении исходных файлов.