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 系列 (一)：為什么需要前端構建