私はgulpタスクランナーを使用しているスクリプトファイルを縮小しようとしています、そしてgulp-uglifyプラグインをしようとしています
コード:
gulp.task('concat', function() {
return gulp.src('app/**/*.js')
// .pipe(concat('script.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'))
});
しかし、私は
gulp concatとしてgulpタスクを実行しようとすると、助けていただければ幸いです
主なエラーは、ES6形式を使用しているときに生成されます。このエラーを解決するには、「gulp-uglify」の代わりにgulp-uglify-esモジュールを使用します。
var uglify = require('gulp-uglify-es').default;
注:gulp-uglify-esは保守されなくなりました。代わりにterser
/gulp-terser
を使用することもできます。
コンソールでエラーを表示するには:
var gutil = require('gulp-util');
gulp.task('concat', function() {
return gulp.src('app/**/*.js')
// .pipe(concat('script.js'))
.pipe(uglify())
.on('error', function (err) { gutil.log(gutil.colors.red('[Error]'), err.toString()); })
.pipe(gulp.dest('./dist/'))
});
エラーレジスタの正確なファイル、行番号を見つけて、次のタスクを実行します。
var pump = require('pump');
gulp.task('uglify-error-debugging', function (cb) {
pump([
gulp.src('app/**/*.js'),
uglify(),
gulp.dest('./dist/')
], cb);
});
スクリプトファイルでES6形式を使用しましたか?もしそうならES5を試してください
gulp.task('concat', function() {
return gulp.src('app/**/*.js')
.pipe(concat('script.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'))
});
gulp concat
タスクを実行します
ここでの一番の答えは、エラーを取得する方法を説明していないと思います。 docs には、エラー処理に関するセクションがあります。
gulp-uglifyは、特定のファイルを縮小できない場合に「エラー」イベントを発行します
そのため、エラーをキャプチャし、必要な操作(コンソールへのロギングなど)を実行して、ファイル名、行番号、および追加情報を確認します。
uglify().on('error', console.error)
またはより大きなコンテキストで:
gulp.task('foo', () => {
return gulp.src([
'asset/src/js/foo/*.js',
'asset/src/js/bar/*.js',
])
.pipe(uglify().on('error', console.error))
.pipe(concat('bundle.js'))
.pipe(gulp.dest('./'));
});
これにより、非常に役立つエラーが発生します!
{ GulpUglifyError: unable to minify JavaScript
at [stack trace])
cause:
{ SyntaxError: Continue not inside a loop or switch
[stack trace]
message: 'Continue not inside a loop or switch',
filename: 'ProductForm.js',
line: 301,
col: 37,
pos: 10331 },
plugin: 'gulp-uglify',
fileName:
'/asset/src/js/foo/ProductForm.js',
showStack: false }
私にとって、それはエラーを生成した(そしてスクリプトを完全にクラッシュさせた)非推奨のオプション "preserveComments"でした。
次を使用して問題を見つけました:
gulp.task('concat', function() {
return gulp.src('app/**/*.js')
.pipe(uglify())
.on('error', function (err) { console.log( err ) })
.pipe(gulp.dest('./dist/'))
});
これを使ってみてください
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minifyJS = require('gulp-minify');
gulp.task('concat', function() {
return gulp.src('app/**/*.js')
.pipe(minifyJS())
.pipe(concat('bundle.min.js'))
.pipe(uglify({ mangle: false }))
.pipe(gulp.dest('./dist/'));
});
構文エラーがあるか、ES6構文を使用している可能性があります。 https://skalman.github.io/UglifyJS-online/ を最初に試すことができます。
JavaScriptを最小化できないという主なエラーは、パスが見つからないことです。タスクuseminを使用できます。これには、次のものが必要です。
$ Sudo npm install gulp-usemin --save-dev
$ Sudo npm install gulp-livereload --save-dev
$ Sudo npm install gulp-util --save-dev
そして必要:
var usemin = require('gulp-usemin');
var livereload = require('gulp-livereload');
var gutil = require('gulp-util'); //gutil for error display
gulp.task('usemin',['jshint'], function(){
return gulp.src('./app/index.html')
.pipe(usemin({
css: [minifycss(),rev()],
scripts: [uglify().on('error', function(err) {gutil.log(gutil.colors.red('[Error]'), err.toString());this.emit('end');}),rev()]
}))
.pipe(gulp.dest('dist'))
.pipe(livereload());
});
Change the js: [uglify(), rev()] to scripts: [uglify(), rev()]