serii81
@serii81
Я люблю phр...

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

Всем привет.
Есть конфиг 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')));


Заранее благодарен за помощь.
  • Вопрос задан
  • 335 просмотров
Решения вопроса 1
Natebash
@Natebash
React, Vue, Angular, Navite JS, Python / Node JS
Если дело касается верстки - использую данный конфиг
https://github.com/agragregra/OptimizedHTML-5

Если дело касается разработки под wp, просто меняю dist конфига что бы стили сразу попадали в assets корневой папки с темой wp, сам node-modules + gulp конфиг лежат в корне. Т.е gulp автоматически компилит и вотчит php файлы, sass, сжимает картинки и все кладет в assets
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@deliro
Агрессивное программирование
webpack - это помойка. Медленная, грязная и монструозная. Попробуй лучше https://vitejs.dev/ или https://parceljs.org/

Ну или можно остаться на gulp, только тормознутый babel заменить на esbuild или swc, а sass компилировать dart-sass
Ответ написан
Комментировать
serii81
@serii81 Автор вопроса
Я люблю phр...
Вот что у меня получилось

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
            }
        )
    ]
};
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы