Пример структуры проекта с использованием Gulp для компиляции CSS/SCSS и JavaScript, а также запуска локального сервера:


/project-root
│
├── /dist                # Папка для финальных скомпилированных файлов
│   ├── /css             # Скомпилированные CSS файлы
│   └── /js              # Скомпилированные и минифицированные JS файлы
│
├── /src                 # Папка с исходными файлами
│   ├── /scss            # Исходные файлы SCSS
│   │   ├── main.scss    # Основной SCSS файл
│   │   └── _partials.scss  # Пример SCSS-подключаемых файлов
│   └── /js              # Исходные JS файлы
│       └── main.js      # Основной JS файл
│
├── /node_modules        # Установленные через npm модули
│
├── gulpfile.js          # Конфигурация Gulp
├── package.json         # Данные о проекте и зависимости
├── package-lock.json    # Автоматически сгенерированный файл зависимостей
└── index.html           # Основной HTML файл

Описание структуры:

  1. /dist: Папка, в которую Gulp будет сохранять скомпилированные и минифицированные файлы.
    • /css: здесь будут находиться все скомпилированные CSS файлы.
    • /js: сюда будут сохраняться минифицированные JS файлы.
  2. /src: Папка с исходными файлами.
    • /scss: исходные файлы стилей в формате SCSS. Основной файл стилей main.scss может импортировать другие файлы (например, _partials.scss).
    • /js: исходные файлы JavaScript.
  3. /node_modules: Здесь находятся все зависимости, установленные через npm. Эта папка создается автоматически при установке зависимостей.
  4. gulpfile.js: Файл с настройками Gulp, который описывает задачи для сборки проекта.
  5. package.json: Файл, который содержит информацию о проекте, его зависимости и команды для npm.
  6. package-lock.json: Автоматически сгенерированный файл с точной версией установленных пакетов.
  7. index.html: Основной HTML файл проекта, который будет использоваться для тестирования во время разработки.

Шаги для работы с проектом:

1. Инициализация проекта:


npm init -y

2. Установка Gulp и необходимых плагинов:


npm install gulp gulp-sass gulp-concat gulp-uglify gulp-rename browser-sync sass --save-dev

3. Создание Gulp-файла:


// Подключаем модули
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));  // Используем правильную версию gulp-sass
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const browserSync = require('browser-sync').create();

// Пути к файлам
const paths = {
    styles: {
        src: 'src/scss/**/*.scss',
        dest: 'dist/css'
    },
    scripts: {
        src: 'src/js/**/*.js',
        dest: 'dist/js'
    }
};

// Компиляция SCSS в CSS
function styles() {
    return gulp.src(paths.styles.src)
        .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))  // Компиляция с минификацией
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest(paths.styles.dest))
        .pipe(browserSync.stream());
}

// Минификация и объединение JS
function scripts() {
    return gulp.src(paths.scripts.src)
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' }))
        .pipe(gulp.dest(paths.scripts.dest))
        .pipe(browserSync.stream());
}

// Запуск локального сервера
function serve() {
    browserSync.init({
        server: {
            baseDir: './'
        }
    });

    gulp.watch(paths.styles.src, styles);
    gulp.watch(paths.scripts.src, scripts);
    gulp.watch('./*.html').on('change', browserSync.reload);
}

// Определение задач
gulp.task('styles', styles);
gulp.task('scripts', scripts);
gulp.task('default', gulp.series(gulp.parallel(styles, scripts), serve));

Что делает этот скрипт:

  1. Компиляция SCSS в минифицированный CSS:
    • Все SCSS файлы компилируются в CSS и минифицируются.
    • Компилированный файл получает суффикс .min.
  2. Минификация и объединение JS:
    • Все файлы JS объединяются в один файл all.min.js и минифицируются.
  3. Запуск сервера с автообновлением:
    • Сервер запускается на корневой директории, и страница обновляется при изменении файлов SCSS, JS или HTML.

Команды:

  • Запуск: Просто используйте команду gulp, чтобы запустить компиляцию, сервер и отслеживание изменений.