gulp-minify-html删除空HTML属性,导致Angular应用程序出现问题

Question

我最近将AngularJS应用程序转换为使用Browserify,同时,我从Mimosa切换到Gulp作为我的构建系统.

在处理了许多其他小问题之后,我遇到了一些问题:

1. 使用ng-switch和ng-switch-when时,我的index.html中出现以下错误:

   Error: [$compile:ctreq] Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found!

2. ng-include对我不起作用(没有错误消息,没有包含任何内容,也没有发出网络请求).

3. 我的一个自定义属性中的代码从未被调用过,即使它显然是我原始index.html文件中HTML标记的一部分.

我花了很多时间尝试各种各样的事情,看看问题可能是什么,但最终跟踪它,如下面的答案所述.

Answer 1

我的gulpfile.js的一部分使用gulp - minify -html来缩小HTML.事实证明,默认情况下,gulp-minify-html会从HTML中删除空属性.对于Angular应用程序来说,这显然是致命的.

因此,ng-switch,ng-include和我的自定义属性正在从缩小的HTML中完全删除,因此Angular错误消息在ng-switch情况下完全正确.

为了解决这个问题,我只是改变了我的gulp规则来传递{empty:true}选项minifyHTML(),这意味着"不要删除空属性".我的gulp任务现在看起来像这样:

var minifyHTML = require('gulp-minify-html');

gulp.task('htmlmin', function() {
   var htmlSrc = './app/index.html',
   htmlDst = './public/';
   var opts = {empty: true};

   gulp.src(htmlSrc)
      .pipe(changed(htmlDst))
      .pipe(minifyHTML(opts))
      .pipe(gulp.dest(htmlDst));
});

有关其他优化标志的更多信息,请参阅此处的文档.