CODEWITHSUNDEEP
angularjsgulpgulp-uglifyangular-components
MartianMartian
MartianMartian

Reputation: 1859

compile angular 1.5 component code with gulp uglify minify, not working when there are `` quoted html

'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>`
})

So i was using gulp to compile all the angular js code into one. It seems that in the angular 1.5.8 or close, when the `` quote are used, the uglify fails to minify the code..

'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"])
})

can some one experienced take a quick look?

Upvotes: 1

Views: 2026

Answers (1)

Duncan
Duncan

Reputation: 95712

The backticks are a feature of ES2015 but gulp-uglify only recognises ES5 syntax. The simplest solution would be to first pipe your source code through babel which can convert ES2015 to ES5 syntax and then uglify it.

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/'))
  })

should work and will let you use ES2015 syntax safely. You'll need to add gulp-babel and babel-preset-es2015 to your project. Maybe also babel-cli though I think installing gulp-babel should pull that in as a dependency

You also need to tell babel to use the es2015 plugin. You can do that by creating a .babelrc file or by adding the configuration to your package.json. The minimum config would be to create .babelrc containing:

{
  "presets": ["es2015"]
}

Check https://babeljs.io/docs/learn-es2015/ to find which parts of the ES2015 syntax it will let you use directly. For some features (e.g. generators) you may also need to add a polyfill but you can use a lot just by including babel in the build pipeline.

Upvotes: 1

Related Questions