html2js to bundle partials

README.md

@@ -65,7 +65,7 @@ But I think keeping first division by file type: scripts, styles, partials.
 * image optimization
 * Unit test (karma)
 * e2e test (Protratctor)
-* **TODO** *0.2* partials bundeling in js
+* *0.2* ng html2js
 * **TODO** lazy
 * **TODO** browser sync
 

app/files.json

@@ -11,7 +11,6 @@
     "test/e2e"
   ],
   "copies": [
-    "gulp/build.js",
     "gulp/e2e-tests.js",
     "gulp/server.js",
     "gulp/unit-tests.js",
@@ -29,6 +28,7 @@
     "package.json",
     "bower.json",
     "gulpfile.js",
+    "gulp/build.js",
     "app/index.html",
     "app/scripts/main/main-ctrl.js",
     "test/unit/main.js"

app/templates/_package.json

@@ -24,6 +24,9 @@
     "gulp-ngmin": "^0.2.0",
     "gulp-rev": "^0.3.2",
     "gulp-rev-replace": "^0.1.0",
+    "gulp-ng-html2js": "~0.1.6",
+    "gulp-minify-html": "~0.1.3",
+    "gulp-inject": "~0.4.1",
     "jshint-stylish": "^0.1.5",
     "opn": "^0.1.1",
     "wiredep": "^1.4.3",

app/templates/app/_index.html

@@ -43,9 +43,11 @@
     <!-- endbower -->
     <!-- endbuild -->
 
-    <!-- build:js scripts/main.js -->
+    <!-- build:js({app,.tmp}) scripts/main.js -->
     <script src="scripts/<%= appname %>.js"></script>
     <script src="scripts/main/main-ctrl.js"></script>
+    <!-- inject:partials -->
+    <!-- endinject -->
     <!-- endbuild -->
 
   </body>

app/templates/gulp/build.js → app/templates/gulp/_build.js

@@ -19,11 +19,32 @@ gulp.task('scripts', function () {
         .pipe($.size());
 });
 
-gulp.task('html', ['styles', 'scripts'], function () {
+gulp.task('partials', function () {
+  return gulp.src('app/partials/**/*.html')
+      .pipe($.minifyHtml({
+        empty: true,
+        spare: true,
+        quotes: true
+      }))
+      .pipe($.ngHtml2js({
+        moduleName: "<%= appname %>",
+        prefix: "partials/"
+      }))
+      .pipe(gulp.dest(".tmp/partials"))
+      .pipe($.size());
+});
+
+gulp.task('html', ['styles', 'scripts', 'partials'], function () {
     var jsFilter = $.filter('**/*.js');
     var cssFilter = $.filter('**/*.css');
 
     return gulp.src('app/*.html')
+        .pipe($.inject(gulp.src('.tmp/partials/**/*.js'), {
+          read: false,
+          starttag: '<!-- inject:partials -->',
+          addRootSlash: false,
+          ignorePath: '.tmp'
+        }))
         .pipe($.useref.assets())
         .pipe($.rev())
         .pipe(jsFilter)
@@ -40,12 +61,6 @@ gulp.task('html', ['styles', 'scripts'], function () {
         .pipe($.size());
 });
 
-gulp.task('partials', function () {
-  return gulp.src('app/partials/**/*.html')
-      .pipe(gulp.dest('dist/partials'))
-      .pipe($.size());
-});
-
 gulp.task('images', function () {
     return gulp.src('app/images/**/*')
         .pipe($.cache($.imagemin({

test/deps/package.json

@@ -32,7 +32,10 @@
     "karma-phantomjs-launcher": "^0.1.4",
     "gulp-protractor": "0.0.7",
     "protractor": "~0.22.0",
-    "require-dir": "~0.1.0"
+    "require-dir": "~0.1.0",
+    "gulp-ng-html2js": "~0.1.6",
+    "gulp-minify-html": "~0.1.3",
+    "gulp-inject": "~0.4.1"
   },
   "engines": {
     "node": ">=0.10.0"