前言
接下來將針對 JS 加入一個壓縮功能,那壓縮的時機僅限於 prod 的模式,所以這邊紀錄一下該如何使用
安裝gulp-uglify
一樣先安裝套件 gulp-uglify
1
| npm install --save gulp-uglify
|
使用方式
接下來可以依照官方文件來試著撰寫一次
1 2 3 4 5 6 7 8 9 10 11
| gulp.task('babel', () => { return gulp.src('./src/js/**/*.js') .pipe($.sourcemaps.init()) .pipe($.babel({ presets: ['@babel/env'] })) .pipe($.concat('all.js')) .pipe($.uglify()) .pipe($.sourcemaps.write('.')) .pipe(gulp.dest('./public/js')); });
|
然後執行 gulp babel
看看結果
![Image]()
可是我們調整成只有 prod 模式的時候才會做 JS 編譯,所以要加入判斷式 $.if
1 2 3 4 5 6 7 8 9 10 11
| gulp.task('babel', () => { return gulp.src('./src/js/**/*.js') .pipe($.sourcemaps.init()) .pipe($.babel({ presets: ['@babel/env'] })) .pipe($.concat('all.js')) .pipe($.if(options.env === 'prod',$.uglify())) .pipe($.sourcemaps.write('.')) .pipe(gulp.dest('./public/js')); });
|
接下來就可以試著輸入 gulp babel
看看有沒有被壓縮
![dev]()
也可以輸入 gulp babel --env prod
![prod]()