Gulp 使用gulp壓縮JS

本節咱們學習如何使用 gulp 壓縮 JS，在實際項目中，若是 JS 文件太大，那麼可能致使頁面加載變慢。因此咱們能夠將這些 JS 文件進行壓縮。咱們除了能夠選擇使用各類工具手動來進行壓縮，還能夠經過 gulp 來實現 JS 文件的壓縮。

壓縮JS文件

使用 gulp 來壓縮 JS 文件，須要用到一個 gulp-uglify 插件，下面咱們一塊兒來看一下，要如何壓縮 JS 文件。

例如咱們要實現的工做是壓縮 js 目錄下的全部 .js 文件，將這些 JS 文件壓縮到 dist 目錄下的 js 文件夾中。

安裝插件

首先咱們須要安裝 gulp-uglify 插件，打開命令行工具，或者直接在 VSCode 中打開終端。而後進入到 gulpfile.js 文件所在的目錄下，若是你的項目中尚未這個文件，則須要建立這個文件喲，由於 gulp 的全部配置代碼都寫在 gulpfile.js 文件。。

以下圖所示，在命令行工具中執行安裝 gulp-uglify 插件的命令：

npm install gulp-uglify

在gulpfile.js文件中編寫代碼

插件安裝成功後，咱們就能夠在 gulpfile.js 文件中編寫代碼，首先一樣是應用 gulp 模塊：

// 獲取 gulp
var gulp = require('gulp')

而後獲取 uglify 模塊：

var uglify = require('gulp-uglify')

接着就能夠經過 task() 方法建立壓縮任務：

gulp.task('script', function() {
    // 找到要壓縮的js文件
    gulp.src('js/*.js')
    // 壓縮文件
        .pipe(uglify())
    // 將壓縮後的文件存到只指定目錄
        .pipe(gulp.dest('dist/js'))
})

執行壓縮命令

而後咱們能夠命令行工具中，執行 gulp script 命令，其中 script 是任務名稱。

而後咱們能夠看到看到項目根目錄下會自動生成一個 dist 目錄，指定的 JS 文件成功被壓縮到了這個目錄下的 js 文件夾中。