使用gulp uglify minify编译angular 1.5组件代码，当有' '引号的html时不起作用

Question

'use strict'
angular.module('dog.Component',[])
.component('dogComponent',{
  // templateUrl:'home.html',  // this line will be fine
  template:`<h1>Anything Here will screw up the code</h1>`
})

所以我用gulp把所有的angular js代码编译成一个。似乎在angular 1.5.8或close中，当使用' '引号时，丑化未能缩小代码…

'use strict';
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify')

var indexTarget=[
  './page.index/*.js'
]
gulp.task('index',function(){
  return gulp.src(indexTarget)
          .pipe(concat('index.js'))
          .pipe(uglify())
          .pipe(gulp.dest('page.index/'))
  })

gulp.task("watch", function(){
  gulp.watch(jstarget, ["js"])
})

有经验的人能看一下吗?

Answer 1

反引号是ES2015的一个特性，但是gulp-uglify只识别ES5语法。最简单的解决方案是首先通过babel管道将源代码转换为ES2015到ES5的语法，然后丑化它。

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify')
var babel = require('gulp-babel');
var indexTarget=[
  './page.index/*.js'
]
gulp.task('index',function(){
  return gulp.src(indexTarget)
          .pipe(concat('index.js'))
          .pipe(babel({ presets: ['es2015'] }))
          .pipe(uglify())
          .pipe(gulp.dest('page.index/'))
  })

应该可以工作，并且可以让你安全地使用ES2015语法。您需要将gulp-babel和babel-preset-es2015添加到您的项目中。也许也babel-cli虽然我认为安装gulp-babel应该把它作为一个依赖

你还需要告诉babel使用es2015插件。您可以通过创建.babelrc文件或将配置添加到package.json来实现这一点。最小的配置是创建.babelrc，包含:

{
  "presets": ["es2015"]
}

查看https://babeljs.io/docs/learn-es2015/以查找ES2015语法的哪些部分可以直接使用。对于某些功能(例如生成器)，您可能还需要添加一个polyfill，但您可以通过在构建管道中包含babel来使用很多。