1. 程式人生 > >gulp合並壓縮

gulp合並壓縮

寫上 block per 文件合並 alt cati 特定 assets 查看

1、文件合並壓縮

  var concat = require(‘gulp-concat’); //引用

  var uglify = require(‘gulp-uglify’);
  接下來,只要concat(‘xxx.js’)就算合並了。註意此時只是在內存中生成

  前面我們學過管道的概念,因此代碼整合非常簡單
  gulp.src([這裏寫上js]).pipe(concat(‘xxx.js’)).pipe(uglify()).pipe(gulp.dest(‘目錄’))

2、gulp-useref進行資源合並

  文件配置:通過插入特定的標簽,用於標示gulp-useref要處理的資源

 技術分享圖片

gulp腳本:

技術分享圖片

tip

通常,我們希望資源進行合並輸出後,刪除掉合並前的js和css,避免接下來進行其他處理時,要手動再寫腳本排除掉它們。
所以,需求是使用gulp-useref合並資源輸出並刪除合並前的文件。
查看源碼和參照官方配置,驚喜發現,改下gulp腳本就可以達到目的:

技術分享圖片

If you want to minify your assets or perform some other modification, you can use gulp-if to conditionally handle specific types of assets.

技術分享圖片

Blocks are expressed as:

技術分享圖片

gulp合並壓縮