Курс по программированию на JavaScript

Урок 45: Сборка проектов

Сборка проектов — это процесс объединения, минимизации и оптимизации кода для развертывания на сервере. В этом уроке мы рассмотрим основы сборки проектов с использованием инструментов Webpack и Parcel, а также автоматизацию задач с помощью Gulp и Grunt.

Основы сборки проектов

Webpack и Parcel — это популярные инструменты для сборки проектов. Они позволяют объединять и минимизировать файлы JavaScript, CSS и других ресурсов.

Webpack

Webpack — это модульный сборщик, который позволяет объединять и оптимизировать файлы. Рассмотрим пример настройки Webpack:

// Установка Webpack
npm install --save-dev webpack webpack-cli

// Создание файла конфигурации webpack.config.js
const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 mode: 'production'
};

// Файл конфигурации Webpack создан

В этом примере мы установили Webpack и создали файл конфигурации, который определяет точку входа и выходной файл для сборки.

Parcel

Parcel — это сборщик, который не требует дополнительной конфигурации. Рассмотрим пример использования Parcel:

// Установка Parcel
npm install -g parcel-bundler

// Запуск Parcel для сборки проекта
parcel src/index.html

// Parcel запущен и проект собран

Parcel автоматически обнаруживает зависимости и объединяет файлы для развертывания.

Автоматизация задач

Gulp и Grunt — это инструменты для автоматизации задач, таких как компиляция Sass, минимизация файлов и перезагрузка браузера.

Gulp

Gulp использует код для определения задач. Рассмотрим пример использования Gulp:

// Установка Gulp
npm install --save-dev gulp

// Создание файла gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');

gulp.task('styles', function() {
 return gulp.src('./src/scss/**/*.scss')
 .pipe(sass().on('error', sass.logError))
 .pipe(cleanCSS())
 .pipe(gulp.dest('./dist/css'));
});

gulp.task('default', gulp.series('styles'));

// Gulp настроен для компиляции и минимизации CSS

В этом примере мы установили Gulp и настроили задачу для компиляции Sass и минимизации CSS.

Grunt

Grunt использует файл конфигурации для определения задач. Рассмотрим пример использования Grunt:

// Установка Grunt
npm install --save-dev grunt

// Создание файла Gruntfile.js
module.exports = function(grunt) {
 grunt.initConfig({
 sass: {
 dist: {
 files: [{
 expand: true,
 cwd: 'src/scss',
 src: ['**/*.scss'],
 dest: 'dist/css',
 ext: '.css'
 }]
 }
 },
 cssmin: {
 target: {
 files: [{
 expand: true,
 cwd: 'dist/css',
 src: ['*.css', '!*.min.css'],
 dest: 'dist/css',
 ext: '.min.css'
 }]
 }
 }
 });

 grunt.loadNpmTasks('grunt-sass');
 grunt.loadNpmTasks('grunt-contrib-cssmin');

 grunt.registerTask('default', ['sass', 'cssmin']);
};

// Grunt настроен для компиляции и минимизации CSS

В этом примере мы установили Grunt и настроили задачи для компиляции Sass и минимизации CSS.

Упражнения

// Установка Webpack
npm install --save-dev webpack webpack-cli

// Создание файла src/index.js
console.log('Hello, Webpack!');

// Создание файла конфигурации webpack.config.js
const path = require('path');

module.exports = {
 entry: './src/index.js',
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 mode: 'production'
};

// Сборка проекта
npx webpack

// Hello, Webpack!

// Установка Gulp и плагинов
npm install --save-dev gulp gulp-sass gulp-clean-css

// Создание файла src/scss/style.scss
body {
 background-color: #f0f0f0;
}

// Создание файла gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');

gulp.task('styles', function() {
 return gulp.src('./src/scss/**/*.scss')
 .pipe(sass().on('error', sass.logError))
 .pipe(cleanCSS())
 .pipe(gulp.dest('./dist/css'));
});

gulp.task('default', gulp.series('styles'));

// Запуск Gulp
npx gulp

// Скомпилированный и минимизированный CSS файл создан в dist/css