Почему gulp uglify выдаёт ошибку?

Question

[ZeeGi01]

Вообщем когда сохраняю JavaScript в CMD выходит ошибка:

Unexpected token string «langs», expected punc «,»

Вот код gulp:

"use strict";

const {src, dest} = require("gulp");
const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cssbeautify = require("gulp-cssbeautify");
const removeComments = require('gulp-strip-css-comments');
const rename = require("gulp-rename");
const sass = require("gulp-sass");
const cssnano = require("gulp-cssnano");
const rigger = require("gulp-rigger");
const uglify = require('gulp-uglify-es').default;
const plumber = require("gulp-plumber");
const imagemin = require("gulp-imagemin");
const del = require("del");
const panini = require("panini");
const browsersync = require("browser-sync").create();


/* Paths */
var path = {
    build: {
        html: "dist/",
        js: "dist/assets/js/",
        css: "dist/assets/css/",
        images: "dist/assets/img/"
    },
    src: {
        html: "src/*.html",
        js: "src/assets/js/*.js",
        css: "src/assets/sass/style.scss",
        images: "src/assets/img/**/*.{jpg,png,svg,gif,ico,webmanifest,xml}"
    },
    watch: {
        html: "src/**/*.html",
        js: "src/assets/js/**/*.js",
        css: "src/assets/sass/**/*.scss",
        images: "src/assets/img/**/*.{jpg,png,svg,gif,ico,webmanifest,xml}"
    },
    clean: "./dist"
}



/* Tasks */
function browserSync(done) {
    browsersync.init({
        server: {
            baseDir: "./dist/"
        },
        port: 3000
    });
}

function browserSyncReload(done) {
    browsersync.reload();
}

function html() {
    panini.refresh();
    return src(path.src.html, { base: "src/" })
        .pipe(plumber())
        .pipe(panini({
            root: 'src/',
            layouts: 'src/tpl/layouts/',
            partials: 'src/tpl/partials/',
            helpers: 'src/tpl/helpers/',
            data: 'src/tpl/data/'
        }))
        .pipe(dest(path.build.html))
        .pipe(browsersync.stream());
}

function css() {
    return src(path.src.css, { base: "src/assets/sass/" })
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer({
            browsers: ['last 8 versions'],
            cascade: true
        }))
        .pipe(cssbeautify())
        .pipe(dest(path.build.css))
        .pipe(cssnano({
            zindex: false,
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(removeComments())
        .pipe(rename({
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(dest(path.build.css))
        .pipe(browsersync.stream());
}

function js() {
    return src(path.src.js, {base: './src/assets/js/'})
        .pipe(plumber())
        .pipe(rigger())
        .pipe(gulp.dest(path.build.js))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min",
            extname: ".js"
        }))
        .pipe(dest(path.build.js))
        .pipe(browsersync.stream());
}

function images() {
    return src(path.src.images)
        .pipe(imagemin())
        .pipe(dest(path.build.images));
}

function clean() {
    return del(path.clean);
}

function watchFiles() {
    gulp.watch([path.watch.html], html);
    gulp.watch([path.watch.css], css);
    gulp.watch([path.watch.js], js);
    gulp.watch([path.watch.images], images);
}

const build = gulp.series(clean, gulp.parallel(html, css, js, images));
const watch = gulp.parallel(build, watchFiles, browserSync);



/* Exports Tasks */
exports.html = html;
exports.css = css;
exports.js = js;
exports.images = images;
exports.clean = clean;
exports.build = build;
exports.watch = watch;
exports.default = watch;

Comments

[hellcaster]

Возможно это с файлом .js проблемы

[ZeeGi01]

hellcaster, А что с ним может быть ? Все написано вроде как правильно,вы случайно не знаете из за чего это ошибка в принципе может быть ?

[hellcaster]

ZeeGi01, Нашел такое

[hellcaster]

ZeeGi01, пробуйте установить terser

[ZeeGi01]

hellcaster, Тоже самое пишет и с ним,наверное реально что то в коде вот с без гальпа он ругается вот на эту строчку в коде почему то:

localStorage.getItem(key: "langs")

[hellcaster]

ZeeGi01, Storage.getItem()
localStorage.getItem("langs");

[ZeeGi01]

Спасибо@web_Developer_Victor,

Answer 1

[nowm]

Uglify не поддерживает ES6 и следующие версии JavaScript. Это значит, что он будет падать с ошибкой, если в коде используются такие вещи:

const alertLangs = langs => alert(langs);

localStorage.getItem(key: "langs");

Чтобы Uglify не ругался, нужно либо писать код, который соответствует стандарту «ECMAScript 5», либо использовать препроцессоры, вроде gulp-babel до вызова .pipe(uglify()).

const babel = require('gulp-babel');

...
return src(path.src.js, {base: './src/assets/js/'})
    .pipe(...)
    .pipe(...)
    .pipe(babel({
        presets: ['@babel/preset-env']
    }))
    .pipe(uglify())
    .pipe(...)
    .pipe(...)

...

Answer 2

[Руслан Лопатин]

Используйте terser вместо давно устаревшего uglify.

Comments

[fronMood]

terser выдает такую же ошибку

Answer 3

[Brendan Castaneda]

Или как вариант
Для того, что-бы uglify-js поддерживал ES2015 + (ES6 +)
Нужно установить дополнительно экспериментальную ветвь harmony

npm install --save-dev uglify-js@github:mishoo/UglifyJS2#harmony

Ничего в gulpfile.js менять (подключать её) не нужно, просто установить и всё будет работать.
Все настройки в gulp-uglify встанут автоматически.

Более подробно uglify-js-es6