這是在講 Gulp 不是飲料是任務自動化工具這件事：壓縮 JS 篇

發表於 分類於

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你 ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

Buy Me A Coffee ｜ Buy Me A Coffee
接下來將針對 JS 加入一個壓縮功能，那壓縮的時機僅限於 prod 的模式，所以這邊紀錄一下該如何使用

前言

接下來將針對 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