Angular企業級開發(6)-使用Gulp構建和打包前端項目

1.gulp介紹

基於流的前端自動化構建工具，利用gulp能夠提升前端開發效率，特別是在先後端分離的項目中。使用gulp能完成如下任務：

• 壓縮html、css和js
• 編譯less或sass等
• 壓縮圖片
• 啓動本地靜態服務器
• 其餘

2.gulp構建

前端構建流程：

開發->分析->測試->編譯->發佈部署

一段簡單的基於gulp的項目構建代碼，gulpfile.js內容以下所示:

gulp.task('default',function(){    
return gulp
        .src("**/*.js")
        .pipe(jshint())
        .pipe(concat())
        .pipe(uglify())
        .pipe(gulp.dest('./build/'))        
})

上面gulp配置完成的內容是：

1.將目錄下全部的以.js結尾的文件

2.執行jshint代碼檢查

3.而後concat合併爲一個文件，

4.再使用uglify對文件進行壓縮，

5.最後輸出到當前目錄下，build文件夾中。

項目構建中須要使用的模塊有如下這些：

var gulp = require("gulp");
//connect靜態服務器
var connect = require("gulp-connect");


// 合併文件模塊
var concat = require('gulp-concat');

//less編譯模塊
var less = require('gulp-less');

//壓縮js
var uglify = require('gulp-uglify');
//壓縮css
var minifyCss = require('gulp-minify-css');
//壓縮html
var minifyHtml = require('gulp-minify-html');

//項目中須要將.less文件重命名爲.css
var rename = require('gulp-rename');

//jshint檢查js靜態語法檢查
var jshint = require('gulp-jshint');

3.gulp打包

由於項目中使用bower進行類庫的管理，因此在項目打包的過程，須要從bower_components文件夾中就項目實際使用的js和css文件複製發佈文件夾中。在gulpfile.js中有一個task名爲vendor，主要任務就是將項目中實際使用的js和css複製到發佈文件夾中。咱們項目發佈文件夾名字爲dist。task代碼以下:

gulp.task('vendor', function () {

    gulp.src([
        'app/assets/bower_components/ui-select/dist/select.min.css',
        'app/assets/bower_components/toastr/toastr.min.css',
        'app/assets/bower_components/angular-tour/dist/angular-tour.css',
        'app/assets/bower_components/jquery/jquery.min.js',
        'app/assets/bower_components/angular/angular.min.js',
        'app/assets/bower_components/angular-cookies/angular-cookies.min.js',
        'app/assets/bower_components/angular-messages/angular-messages.min.js',
        'app/assets/bower_components/angular-animate/angular-animate.min.js ',
        'app/assets/bower_components/bootstrap/dist/js/bootstrap.min.js',
        'app/assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js',
        'app/assets/bower_components/angular-ui-router/release/angular-ui-router.min.js',
        'app/assets/bower_components/angular-sanitize/angular-sanitize.min.js',
        'app/assets/bower_components/ui-select/dist/select.js',
        'app/assets/bower_components/oclazyload/dist/oclazyload.min.js',
        'app/assets/bower_components/angular-smart-table/dist/smart-table.min.js',
        'app/assets/bower_components/angular-file-upload/dist/angular-file-upload.min.js',
        'app/assets/bower_components/echarts/dist/echarts.min.js',
        'app/assets/bower_components/angular-tour/dist/angular-tour-tpls.js',
        'app/assets/bower_components/toastr/toastr.min.js'
    ], { base: 'app' })
        .pipe(gulp.dest("dist"));
});

開發的源代碼 vs 發佈的代碼文件文件大小對比

4.參考內容

http://www.gulpjs.com.cn/

前端構建工具gulp使用

前端構建大法 Gulp 系列 (一)：爲何須要前端構建