-1

I created a new angularjs project with angularjs seed. I added some external dependencies with bower - like bootstrap4 and some angularjs additional modules like ui-rout and ui-grid.

The size of all the source files is about 25 Megabyte.

I want to minify it obviously :)

I tried doing with grunt and grunt-es and uglify with concatanating the files and without, and it always fails :( Usually with 'unexpected character' error.

Anyone here that Minified Angularjs seed + bootstrap4 with grunt or any other tasks manager tool that can guide me?

Im getting really frustrated :(

MY PACKAGE.JSON

{
  "name": "angular-seed",
  "private": true,
  "version": "0.0.0",
  "description": "A starter project for AngularJS",
  "repository": "https://github.com/angular/angular-seed",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "bower": "^1.7.7",
    "grunt": "^1.0.3",
    "grunt-babel": "^7.0.0",
    "grunt-cli": "^1.2.0",
    "grunt-contrib-uglify-es": "git+https://github.com/gruntjs/grunt-contrib-uglify.git#harmony",
    "grunt-dist": "0.0.6",
    "grunt-es6-transpiler": "^1.0.2",
    "http-server": "^0.9.0",
    "jasmine-core": "^2.4.1",
    "karma": "^0.13.22",
    "karma-chrome-launcher": "^0.2.3",
    "karma-firefox-launcher": "^0.1.7",
    "karma-jasmine": "^0.3.8",
    "karma-junit-reporter": "^0.4.1",
    "protractor": "^4.0.9"
  },
  "scripts": {
    "postinstall": "bower install",
    "update-deps": "npm update",
    "postupdate-deps": "bower update",
    "prestart": "npm install",
    "start": "http-server -a localhost -p 8000 -c-1 ./app",
    "pretest": "npm install",
    "test": "karma start karma.conf.js",
    "test-single-run": "karma start karma.conf.js --single-run",
    "preupdate-webdriver": "npm install",
    "update-webdriver": "webdriver-manager update",
    "preprotractor": "npm run update-webdriver",
    "protractor": "protractor e2e-tests/protractor.conf.js",
    "update-index-async": "node -e \"var fs=require('fs'),indexFile='app/index-async.html',loaderFile='app/bower_components/angular-loader/angular-loader.min.js',loaderText=fs.readFileSync(loaderFile,'utf-8').split(/sourceMappingURL=angular-loader.min.js.map/).join('sourceMappingURL=bower_components/angular-loader/angular-loader.min.js.map'),indexText=fs.readFileSync(indexFile,'utf-8').split(/\\/\\/@@NG_LOADER_START@@[\\s\\S]*\\/\\/@@NG_LOADER_END@@/).join('//@@NG_LOADER_START@@\\n'+loaderText+'    //@@NG_LOADER_END@@');fs.writeFileSync(indexFile,indexText);\""
  },
  "dependencies": {
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-qunit": "^2.0.0",
    "grunt-contrib-watch": "^1.1.0"
  }
}

PROJECT STRUCTRUE enter image description here

nadavgam
  • 2,014
  • 5
  • 20
  • 48

1 Answers1

2

I found this thread

AngularJS has some naming conventions which seem to collide with minification:

Since AngularJS infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for the PhoneListController controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.

This plugin seems deal with the issue: ng-annotate

mchl18
  • 2,119
  • 12
  • 20