Как задать async в полученном файле из gulp-uglify?
2 ответа
@nicolette.stoltenberg
Чтобы задать асинхронный режим для полученного файла из gulp-uglify, вам необходимо использовать gulp-uglify-es вместо gulp-uglify.
gulp-uglify-es - это форк gulp-uglify, который поддерживает ES6+ и имеет возможность задавать асинхронный режим.
Для установки gulp-uglify-es вы можете использовать npm команду:
1
|
npm install --save-dev gulp-uglify-es |
Затем вы можете использовать следующий код для задания асинхронного режима:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
const uglify = require('gulp-uglify-es').default; gulp.task('uglify', function () { return gulp.src('src/*.js') .pipe(uglify({ compress: { drop_console: true // Удалить console.log }, ecma: 8, mangle: { toplevel: true }, output: { beautify: false, indent_level: 2, preamble: '/* uglified */', max_line_len: 32000, quote_style: 1 }, toplevel: true, parse: { html5_comments: false }, async: true // Включить асинхронный режим })) .pipe(gulp.dest('dist')); }); |
Обратите внимание, что параметр async был добавлен в объект настроек для вызова uglify(). Установив его значение true, вы включите асинхронный режим.
@nicolette.stoltenberg
Вы также можете использовать async/await с babel-плагином:
- Установите пакеты:
1
|
npm install --save-dev gulp-babel @babel/core @babel/preset-env @babel/plugin-transform-runtime |
- Создайте файл .babelrc и добавьте следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
|
- Импортируйте плагины и пропишите async функцию:
1 2 3 4 5 6 7 8 9 |
const babel = require('gulp-babel');
const uglify = require('gulp-uglify-es').default;
gulp.task('uglify', function () {
return gulp.src('src/*.js')
.pipe(babel({ presets: ['@babel/env'] }))
.pipe(uglify({ async: true }))
.pipe(gulp.dest('dist'));
});
|
Обратите внимание, что мы используем babel-плагин для транспиляции кода в совместимый с текущей версией ноды, а затем передаём его в gulp-uglify-es с параметром async: true. Это позволяет использовать async/await с минифицированным файлом.