Современная cборка Gulp для веб-разработки

Опубликовано автором

Gulp — это мощный инструмент для автоматизации задач, который помогает веб-разработчикам ускорять и упрощать рабочий процесс. В этой статье мы рассмотрим, как настроить современную сборку Gulp с использованием ES-модулей и строгого режима. Мы создадим проект, который будет автоматически компилировать SCSS в CSS, минифицировать JavaScript, обрабатывать HTML и запускать локальный сервер с отслеживанием изменений.

Содержание скрыть
1 Подготовка к установке
2 Установка зависимостей
3 Использования Gulp в строгом режиме и с модулями (ESM)
4 Настройка Gulp
5 Структура Проекта
6 Запуск cборки
7 Остановка cборки
8 Заключение
9 P.S.

Подготовка к установке

Перед установкой убедитесь что у вас на компьютере правильно настроенна политика запуска скриптов и установлены глобально Node.js и Gulp. Подробнее читайте здесь.

Установка зависимостей

Начнем с инициализации проекта и установки необходимых зависимостей.

  • Создайте папку проекта (у нас это project ).
  • Откройте её в редакторе VS Code.
  • Откройте терминал (Ctrl+`) и выполните следующие команды:
npm init -y
npm install gulp gulp-sass sass gulp-autoprefixer gulp-clean-css gulp-uglify gulp-concat gulp-sourcemaps browser-sync --save-dev

Эти команды создадут файл `package.json` и установят Gulp и его плагины, необходимые для нашего проекта.

 Использования Gulp в строгом режиме и с модулями (ESM)

Для использования Gulp в строгом режиме и с модулями (ESM), необходимо внести некоторые изменения в конфигурацию проекта. Для этого обновите package.json для использования ES-модулей, добавив "type": "module"

Увас должно получится что-то похожее:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "type": "module",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^3.0.2",
    "gulp": "^5.0.0",
    "gulp-autoprefixer": "^9.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-sass": "^5.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "sass": "^1.77.8"
  }
}

Главное написать эти строки правильно:

"main": "gulpfile.js",
"type": "module",

Всё остальное создается автоматически.

Настройка Gulp

Создайте файл `gulpfile.js` в корне вашего проекта и добавьте следующий код:

import gulp from 'gulp';
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import cleanCSS from 'gulp-clean-css';
import uglify from 'gulp-uglify';
import concat from 'gulp-concat';
import sourcemaps from 'gulp-sourcemaps';
import browserSync from 'browser-sync';

const sass = gulpSass(dartSass);
const server = browserSync.create();

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

// Компиляция SCSS в CSS
export function styles() {
return gulp.src(paths.styles.src, { sourcemaps: true })
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(cleanCSS())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.styles.dest))
.pipe(server.stream());
}

// Минификация и объединение JS файлов
export function scripts() {
return gulp.src(paths.scripts.src, { sourcemaps: true })
.pipe(sourcemaps.init())
.pipe(concat('main.min.js'))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(paths.scripts.dest))
.pipe(server.stream());
}

// Копирование HTML файлов
export function html() {
return gulp.src(paths.html.src)
.pipe(gulp.dest(paths.html.dest))
.pipe(server.stream());
}

// Запуск сервера и отслеживание изменений
export function serve() {
server.init({
server: {
baseDir: './dist'
}
});
gulp.watch(paths.styles.src, styles);
gulp.watch(paths.scripts.src, scripts);
gulp.watch(paths.html.src, html).on('change', server.reload);
}

// Определение задач
const build = gulp.series(gulp.parallel(styles, scripts, html), serve);

// Экспорт задач
export { build };

// Задача по умолчанию
export default build;

Этот файл определяет несколько задач для Gulp, включая компиляцию SCSS, минификацию JavaScript, копирование HTML-файлов и запуск локального сервера с отслеживанием изменений.

Структура Проекта

Создайте следующую структуру папок для вашего проекта:

project
│ gulpfile.js
│ package.json
└───src
    ├───scss
    │ style.scss
    ├───js
    │ script.js
    └───index.html

В этой структуре:

  • src/scss/style.scss — файл стилей SCSS.
  • src/js/script.js — файл JavaScript.
  • src/index.html — основной HTML файл вашего проекта.

Запуск cборки

Теперь, когда всё настроено, вы можете запустить сборку и сервер разработки с помощью команды:

npx gulp

или просто

gulp

Gulp автоматически выполнит все задачи, определенные в gulpfile.js, и запустит сервер разработки. Браузер автоматически обновится при изменении файлов в папке src.

Остановка cборки

После запуска сборки и создания всех необходимых файтов ( в папке  dist ) начнется отслежвание изменений в исходных файлах ( в папке src ).
Для остановки слежения и прекращения работы сборки нажмите Ctrl + C.

Заключение

Мы создали современную сборку Gulp, используя ES-модули и строгий режим. Эта сборка поможет вам автоматизировать задачи, связанные с компиляцией SCSS, минификацией JavaScript, обработкой HTML и запуском локального сервера. Такая автоматизация значительно ускоряет и упрощает процесс разработки веб-сайтов. Gulp — это мощный инструмент, который позволяет настроить рабочий процесс именно под ваши нужды, делая разработку более эффективной и приятной.

P.S.

Эта сборка самая простая, но является основой для дальнейшего её совершенствования, чем мы и займёмся в следующей статье:

Современная cборка Gulp для веб-разработки — 2 часть

 

Просмотры: 290