使用gulp對js、css、img進行合併壓縮

1 概述

最新使用AngularJS框架作單頁面項目，其中包括了不少庫的和自已寫的js、css、img文件，這些文件都不大，可是數量衆多，致使web請求文件過多，一次性加載時比較慢。有嘗試過使用異步加載，但由於AngularJS對異步加載不是很好，須要引入第三方庫，會更復雜，並且文件數量沒有減小，本質上沒有變。而後經過嘗試合併壓縮js/css、壓縮img來減小文件數量和文件大小，最終使得加載速度大大提升。下面記錄一下整個優化的過程。

2 步驟摘要

（1）安裝nodejs

（2）安裝gulp及其餘插件：gulp-minify-css、gulp-uglify、gulp-imagemin、gulp-concat、gulp-rename

（3）編寫gulpfile.js

（4）執行gulp開始合併壓縮

（5）引用合併壓縮後的JS/CSS文件

3 安裝nodejs

環境：window 10, 64位

nodejs版本：node-v6.2.0-x64.msi

直接雙擊默認安裝便可，經過node -v驗證是否安裝成功。

4 安裝gulp及其餘插件

經過包管理工具npm安裝gulp及其餘插件。如下都是CMD命令，都是在UI項目目錄下執行。

（1）安裝gulp，執行命令npm install gulp --save-dev (項目環境)

（2）安裝css壓縮插件gulp-minify-css，命令npm install gulp-minify-css --save-dev

（3）安裝js壓縮插件gulp-uglify，命令npm install gulp-uglify --save-dev

（4）安裝img壓縮插件gulp-imagemin，命令npm install gulp-imagemin --save-dev

（5）安裝html壓縮插件gulp-htmlmin，命令npm install gulp-htmlmin --save-dev

（6）安裝文件合併插件gulp-concat，命令npm install gulp-concat --save-dev

（7）安裝文件重命名插件gulp-rename，命令npm install gulp-rename --save-dev

5 編寫gulpfile.js

在UI目錄下，新建編寫gulpfile.js文件

5.1 引入依賴插件

1 // 引入依賴插件
2 var gulp = require('gulp');
3 var minifycss = require('gulp-minify-css');
4 var uglify = require('gulp-uglify');
5 var img = require('gulp-imagemin');
6 var htmlmin = require('gulp-htmlmin');
7 var concat = require('gulp-concat');
8 var rename = require('gulp-rename');

 

5.2 合併壓縮庫的JS文件

 1 // 合併壓縮庫的JS文件
 2 gulp.task('minjs_lib', function() {
 3 
 4     return gulp.src(['angular.min.js','angular-sanitize.min.js','angular-translate.min.js','jquery-2.2.2.min.js','jquery.i18n.properties-min-1.0.9.js','jquery.json.min.js','angular-ui-router.js','ui-bootstrap-tpls.js','bootstrap.min.js'],{ cwd: 'rcclib' })
 5         .pipe(concat('libs.js'))
 6         .pipe(gulp.dest('public'))
 7         .pipe(rename({suffix: '.min'}))
 8         .pipe(uglify())
 9         .pipe(gulp.dest('public'));
10 });

 

5.3 合併壓縮業務相關JS文件

 1 // 合併壓縮業務相關JS文件
 2 gulp.task('minjs_my', function() {
 3 
 4 return gulp.src('main/**/*.js')
 5 .pipe(concat('my.js'))
 6 .pipe(gulp.dest('public'))
 7 .pipe(rename({suffix: '.min'}))
 8 .pipe(uglify({mangle:false}))
 9 .pipe(gulp.dest('public'));
10 });

 

5.4 合併壓縮業務相關CSS

 1 // 合併壓縮業務相關css
 2 gulp.task('mincss_my', function() {
 3 
 4     return gulp.src('main/**/*.css')
 5         .pipe(concat('my.css'))
 6         .pipe(gulp.dest('public'))
 7         .pipe(rename({suffix: '.min'}))
 8         .pipe(minifycss())
 9         .pipe(gulp.dest('public'));
10 });

 

5.5 壓縮圖片文件

1 // 壓縮image
2 gulp.task('minimg_my', function() {
3 
4     return gulp.src('res/**/*.{jpg,png,gif}', { base: 'res' })
5         .pipe(img())
6         .pipe(gulp.dest('res'));
7 });

 

5.6 執行任務

1 gulp.task('default', function() {
2 
3     gulp.start('minjs_lib', 'minjs_my', 'mincss_my', 'minimg_my');
4 });

 

6 執行gulp開始合併壓縮

在CMD命令行裏，切換到UI目錄，執行gulp命令就開始合併壓縮過程

 

7 引用合併壓縮後的JS/CSS文件

在index.html頁面中引入壓縮後的js/css文件

1 <script type="text/javascript" src="public/libs.min.js"></script>
2 <link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css">
3 
4 <script src="public/my.min.js"></script>
5 <link rel="stylesheet" href="public/my.min.css">

 

8 總結

如下只是我的實驗的總結，也是剛接觸web前端不久，不必定徹底正確，若有誤請指出。

（1）AngularJs對異步加載的支持不是很好，不能動態配置路由。

（2）中小項目沒有必要使用異步加載，效果不明顯，反而使代碼複雜化。

（3）經過合併js/css文件減小文件加載，從而減小網絡鏈接，能明顯加快加載速度。

（4）html頁面進行壓縮後，不能正常顯示。並且也沒有必要進行壓縮，由於是須要時再加載，影響不大。