Стоит ли переписать gulp на webpack?

Question

[Сергей Бурдужа]

Всем привет.
Есть конфиг gulp, которым пользуюсь уже несколько лет.
Но появилась проблема, и думаю перейти на webpack.

Выше версии 14 gulp-sass не подерживается, и приходится понижать node.

В конфиги есть компиляция scss, js и перезагрузка браузера, при изменении этих файлов, а также php.
Можно такие же действия сделать с помощью webpack?

Вот мой конфиг:

"use strict";
const siteUrl = "http://bs-base.local/";
const gulp = require("gulp");
const webpack = require("webpack-stream");
const sass = require('gulp-sass');
const autoprefixer = require("gulp-autoprefixer");
const sourcemaps = require('gulp-sourcemaps');
const plumber = require("gulp-plumber");
const wait = require('gulp-wait'),
	notify = require("gulp-notify");
const browserSync = require("browser-sync");
const log = require("fancy-log");
let isDev = true;
let webpackConfig = {
	output: {
		filename: "webpack.js"
	},
	watch: false,
	module: {
		rules: [{
			test: /\.m?js$/,
			exclude: /(node_modules|bower_components)/,
			use: {
				loader: 'babel-loader',
				options: {
					presets: [
						['@babel/preset-env', {
							debug: true,
							corejs: 3,
							useBuiltIns: "usage"
						}]
					]
				}
			}
		}]
	},
	mode: isDev ? 'development' : 'production',
	devtool: isDev ? 'eval-source-map' : 'none',
};
gulp.task('webpack', function () {
	return gulp.src('assets/src/js/main.js')
		.pipe(webpack(webpackConfig))
		.pipe(gulp.dest('assets/js/'));
});
gulp.task("scss", function () {
	return gulp.src('assets/src/scss/my.scss')
		.pipe(plumber())
		.pipe(sourcemaps.init())
		.pipe(wait(500))
		.pipe(sass().on('error', notify.onError(function (error) {
			return 'An error occurred while compiling sass.\nLook in the console for details.\n' + error;
		})))
		.pipe(autoprefixer({
			cascade: false
		}))
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest('assets/css/'))
		.pipe(browserSync.stream());
});
gulp.task("watch", function () {
    browserSync.init({
        proxy: {
            target: siteUrl,
            ws: true,
        },
        injectChanges: true,
        notify: true,
        open: false
        // online: true
        // reloadDelay: 1500,
    });	gulp.watch("**/*.html").on('change', browserSync.reload);
	gulp.watch("**/*.php").on('change', browserSync.reload);
	gulp.watch("**/*.css").on('change', browserSync.reload);
	gulp.watch("assets/js/webpack.js").on('change', browserSync.reload);
	gulp.watch("assets/js/custom-jquery.js").on('change', browserSync.reload);
	gulp.watch('assets/src/scss/**/*.scss', gulp.series('scss'));
	gulp.watch('assets/src/js/**/*.js', gulp.series('webpack'));
});
gulp.task('default', gulp.series('webpack', 'scss', gulp.parallel('watch')));

Заранее благодарен за помощь.

Comments

[Антон Литвиненко]

ваши то где попытки переписать? или просто сделать за вас?

[Сергей Бурдужа]

Антон Литвиненко, Изменил вопрос

[Galdar Turin]

Раньше то же пользовался gulp, но по итогу перешёл на framework Angular. Разработка упростилась, не надо думать от таких проблемах как подключить зависимости, соответствие версий. Сразу садишься и работаешь не тратя на это времени. Конечно может и есть что-то в gulp и webpack, но пока не было таких задач чтобы потребовалось использовать именно их.

Так же есть React или Vue

[Сергей Бурдужа]

Galdar Turin, Спасибо за ответ.
Я каждый день работаю с wordpress, изредко с vue или react.

[Антон Литвиненко]

Galdar Turin, я конечно не претендую на истину, сразу видно, вы немного опытнее меня, но все же гдето на подкорке у меня чешется мысль что фреймворки типа ангуляра, реакта и вью не совсем для того, чтобы скомпилить SASS, добавить вендорные префиксы и перегрузить браузер

[Кирилл Романов]

А откуда мысль, что gulp-sass не поддерживается на ноде выше 14?
Может быть у тебя проблема с node-sass?
Его пора уже закопать и перейти на sass. Новые версии gulp-sass позволяют работать и с тем и с тем

[Сергей Бурдужа]

Кирилл Романов, из личного опыта

[Galdar Turin]

Антон Литвиненко, я и не говорю что они для этого, я всего лишь написал, что можно использовать gulp и все процессы по сборке писать самому, а можно использовать фреймворки и это там уже сделано за тебя.

[VolgaVolga]

Galdar Turin, рано или поздно придется настраивать сборку самому.

[Сергей Бурдужа]

Антон Литвиненко,

Внизу есть готовый конфиг.

Только почему-то при изменения scss, браузер перезагружается, но должны менятся только стили без перезагрузки, как это в gulp работало.

Наверное из-за того, что в browser-sync в files прописал css?

[Кирилл Романов]

Сергей Бурдужа,

из личного опыта

Ну я лично запускал его на Node 16, так что ты ошибаешься. Проблема наверняка именно в node-sass

Answer 1

[Natebash]

Если дело касается верстки - использую данный конфиг
https://github.com/agragregra/OptimizedHTML-5

Если дело касается разработки под wp, просто меняю dist конфига что бы стили сразу попадали в assets корневой папки с темой wp, сам node-modules + gulp конфиг лежат в корне. Т.е gulp автоматически компилит и вотчит php файлы, sass, сжимает картинки и все кладет в assets

Comments

[Сергей Бурдужа]

Спасибо, но я на счет webpack спросил, gulp у меня уже есть, и он меня вполне устраивает.

[Natebash]

Сергей Бурдужа, Я бы не стал заморачиваться с вебпаком, особенно с разработкой под wp. Gulp покрывает 100% задач, и нет такого чего бы дал бы webpack

[Сергей Бурдужа]

Natebash, Вот именно это я и хотел услышать.

[VolgaVolga]

Gulp покрывает 100% задач, и нет такого чего бы дал бы webpack

Только Gulp - сборщик, а Webpack - загрузчик.

[Антон Литвиненко]

VolgaVolga,

Только Gulp - сборщик, а Webpack - загрузчик.

Только Webpack - сборщик, а Gulp - таск-раннер

[VolgaVolga]

Антон Литвиненко, таск-раннер - да, но Webpack отличается именно загрузчиками.

[Антон Литвиненко]

VolgaVolga, я не собираюсь переубеждать. если вам нравится сборщик модулей называть загрузчик - ваше право

[VolgaVolga]

Антон Литвиненко, ну хорошо, сборщик модулей с возможностью использования/написания загрузчиков.

Answer 2

[Roman K]

webpack - это помойка. Медленная, грязная и монструозная. Попробуй лучше https://vitejs.dev/ или https://parceljs.org/

Ну или можно остаться на gulp, только тормознутый babel заменить на esbuild или swc, а sass компилировать dart-sass

Answer 3

[Сергей Бурдужа]

Вот что у меня получилось

const path = require('path');
const miniCss = require('mini-css-extract-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const url = "http://bsbase.local/";

module.exports = {
    mode: 'development',
    // mode: 'production',
    entry: './assets/src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'assets/js'),
        filename: 'webpack.js'
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    miniCss.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            sourceMap: true
                        },
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
            }
        ],
    },
    plugins: [
        new miniCss({
            filename: '../css/my.css',
        }),
        new BrowserSyncPlugin(
            // BrowserSync options
            {
                // browse to http://localhost:3000/ during development
                host: 'localhost',
                port: 3000,
                // proxy the Webpack Dev Server endpoint
                // (which should be serving on http://localhost:3100/)
                // through BrowserSync
                proxy: url,
                open: false,
                notify: true,
                reloadDelay: 500,
                injectChanges: true,
                files: [
                    {
                        match: [
                            '**/*.php',
                            '**/*.js',
                            '**/*.css',
                        ],
                        fn: function (event, file) {
                            if (event === "change") {
                                const bs = require('browser-sync').get('bs-webpack-plugin');
                                bs.reload();
                            }
                        }
                    }
                ]
            },
            // plugin options
            {
                // prevent BrowserSync from reloading the page
                // and let Webpack Dev Server take care of this
                reload: false
            }
        )
    ]
};