縮小包含路由的js文件

Question

我正在通過gulp來縮小一個角度項目。該項目包含index.html，css，libraries，app.js（包含路由層+控制器的Angular模塊）和視圖。

我可以很容易地縮小+ CONCAT所有的JS文件，庫和CSS文件合併成一個包file.HTML文件也很容易精縮，但問題是我有路由在我app.js這使templateUrl像

.state('dashboard.home', { 
       url: '/home', 
       templateUrl: 'app/views/dashboard/home.html' 
      }) 

現在，因爲這個路由我不能將所有的html文件合併爲一個，因爲每條路由都會使用文件名來呈現一個視圖，而只有一個文件命名爲bundle.html。

在這裏，我需要一個關於如何處理這種情況的指南。

感謝問候

Answer 1

我使用gulp-ng-template此：

gulpfile.js：

var ngTemplate = require('gulp-ng-template'); 

.... 

gulp.task('templates', function() { 
    return gulp.src(['view1.html', 'view2.html']) 
    .pipe(ngTemplate({filePath: 'js/tpl.js'})) 
    .pipe(gulp.dest('test')); 
}); 

ngTemplate結合你的意見，並將它們放入單個文件js/tpl.js，這將是這樣的：

angular.module('ngTemplates').run(['$templateCache', function($templateCache) { 
    $templateCache.put('view1.html', '<div class="test">A</div>\n'); 
    $templateCache.put('view2.html', '<div class="test">\n <span>B</span>\n</div>\n'); 
}]); 

現在您只需要將此文件包含到index.html中。您的視圖將以角度編譯器的原始路徑提供。您無需再將原始html視圖添加到項目中。

您可以將此文件js/tpl.js手動添加到您的index.html文件中或使用ng-html-replace。

Answer 2

而不將所有的模板到一個html文件，你應該使用$templateCache角提供商和轉換所有的html模板到JavaScript代碼。通過使用templateCache，您可以將所有的模板放到一個文件中，並且可以很好地與路由機制配合使用。試試這個吞掉模塊Gulp ng templates