При конвертировании app.min.js конвертируется огромным и непонятным.

Question

При конвертировании app.min.js конвертируется огромным и непонятным.

Никита Якименко Ученик (124), на голосовании 2 месяца назад

При конвертировании app.min.js он выходит ультра большой, много разного говна, копирует из app.js(который в исходниках src) все комменты и все импортированные закомментированные функции. при конвертации JS файлов использую плагин webpack - stream.
Код из файла js.js, который находиться в gulp/tasks

import webpack from "webpack-stream";

export const js = () => {
return app.gulp.src(app.path.src.js, { sourcemaps: app.isDev })
.pipe(app.plugins.plumber(
app.plugins.notify.onError({
title: "JS",
message: "Error: <%= error.message %>"
}))
)
.pipe(webpack({
mode: app.isBuild ? 'production' : 'development',
output: {
filename: 'app.min.js',
}
}))
.pipe(app.gulp.dest(app.path.build.js))
.pipe(app.plugins.browsersync.stream());
}
в файле gulpfile.js стоит обычный наблюдатель на js и параллельное выполнение этой задачи с основными, типа html scss и т.д.

на выходе app.min.js, который выходит в папке с результатом dist, выходит таким, как на картинке.

как видно, в консоле ERR никаких нет, Все работает, но скрипты из app.min.js не работают

Answer 1

Похоже, что проблема связана с тем, что в исходном файле app.js остались закомментированные функции и комментарии, которые затем были включены в конечный файл app.min.js при использовании webpack.

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

Чтобы использовать плагин UglifyJS в вашей задаче Gulp, установите его с помощью npm:

npm install --save-dev gulp-uglify

Затем измените вашу задачу js следующим образом:

import uglify from "gulp-uglify";

export const js = () => {
return app.gulp.src(app.path.src.js, { sourcemaps: app.isDev })
.pipe(app.plugins.plumber(
app.plugins.notify.onError({
title: "JS",
message: "Error: <%= error.message %>"
}))
)
.pipe(uglify())
.pipe(app.gulp.dest(app.path.build.js))
.pipe(app.plugins.browsersync.stream());
}

Это должно создать более чистый и оптимизированный файл app.min.js без неиспользуемого кода и комментариев. Если после этого вы по-прежнему сталкиваетесь с проблемой, пожалуйста, сообщите мне дополнительную информацию, чтобы мы могли рассмотреть возможные причины проблемы.