MikaAK · July 20, 2014 03:35
diff --git a/blogpostJadeInject b/blogpostJadeInject
 ### Original Code
    gulp.task('jade', function() {
      gulp.src('app/**/*.jade')
        .pipe(jade({pretty: true}))
        .pipe(gulp.dest('.tmp'))
    })
    gulp.task('inject', function() {
      bComp = removeScss(bower)
      gulp.src('.tmp/index.html')
        .pipe(inject(gulp.src(bComp, {read: false})))
        .pipe(gulp.dest('.tmp'))
    })


 This generates html without included files

 <!DOCTYPE html>
 <html ng-app="bleedingColors">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="appples">
    <meta name="viewport" content="width=device-width">
    <title>bleedingColors</title>
    <base href="localhost:9000">
  </head>
  <body>
    <section ui-view></section>
    <!-- inject:js-->
    <!-- endinject-->
  </body>
 </html>


 This doesn't work because src directory cannot be destination directory

 and jade generates comments different from the format expected by gulp-inject

 format expected:
 , {starttag: '<!-- inject:{{ext}} -->', endtag: '<!-- endinject -->'}

 jade generated
 , {starttag: '<!-- inject:{{ext}}-->', endtag: '<!-- endinject-->'}

 To fix it, you can specify the starttag and endtag to match the way jade generates html comments (without the space at the end)

 gulp.task('inject', function() {
  bComp = removeScss(bower)
  gulp.src('app/index.jade')
    .pipe(jade({pretty: true}))
    .pipe(inject(gulp.src(bComp, {read: false}), {starttag: '<!-- inject:{{ext}}-->', endtag: '<!-- endinject-->'}))
    .pipe(gulp.dest('.tmp'))
 })
	### Original Code
	gulp.task('jade', function() {
	gulp.src('app/*/.jade')
	.pipe(jade({pretty: true}))
	.pipe(gulp.dest('.tmp'))
	})
	gulp.task('inject', function() {
	bComp = removeScss(bower)
	gulp.src('.tmp/index.html')
	.pipe(inject(gulp.src(bComp, {read: false})))
	.pipe(gulp.dest('.tmp'))
	})


	This generates html without included files

	<!DOCTYPE html>
	<html ng-app="bleedingColors">
	<head>
	<meta charset="utf-8">
	<meta name="description" content="appples">
	<meta name="viewport" content="width=device-width">
	<title>bleedingColors</title>
	<base href="localhost:9000">
	</head>
	<body>
	<section ui-view></section>
	<!-- inject:js-->
	<!-- endinject-->
	</body>
	</html>


	This doesn't work because src directory cannot be destination directory

	and jade generates comments different from the format expected by gulp-inject

	format expected:
	, {starttag: '<!-- inject:{{ext}} -->', endtag: '<!-- endinject -->'}

	jade generated
	, {starttag: '<!-- inject:{{ext}}-->', endtag: '<!-- endinject-->'}

	To fix it, you can specify the starttag and endtag to match the way jade generates html comments (without the space at the end)

	gulp.task('inject', function() {
	bComp = removeScss(bower)
	gulp.src('app/index.jade')
	.pipe(jade({pretty: true}))
	.pipe(inject(gulp.src(bComp, {read: false}), {starttag: '<!-- inject:{{ext}}-->', endtag: '<!-- endinject-->'}))
	.pipe(gulp.dest('.tmp'))
	})