Weedoze Weedoze - 3 months ago 13
AngularJS Question

How to handle all the minification / uglify process

I have a AngularJS application which I should deploy and I found that it is better to minify / uglify my javascript file for production.

I found different way to uglify my files like grunt for example.

But there is something I don't get...

I will minify/uglify those files then I will have a specific folder for those "production" files. OK

Then :


  1. How should I use them in my
    index.html
    ?

  2. How should I switch from dev to prod ?

  3. What should be the structure of my website folder ? Should I still contain the not-uglified files ?


Answer

So I can explain it to you using gulp instead of grunt.

How should I use them in my index.html ?

You can put JS and CSS files in your html. In html we can specify comments saying which files need to be compiled together along with destination file using bower.

For example:-

<!-- build:css styles/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="/bower_components/angular-material/angular-material.css" />
  <link rel="stylesheet" href="/bower_components/angular-ui-router-anim-in-out/css/anim-in-out.css" />
  <link rel="stylesheet" href="/bower_components/video.js/dist/video-js.css" />
  <link rel="stylesheet" href="/bower_components/angular-tooltips/dist/angular-tooltips.min.css" />
  <link rel="stylesheet" href="/bower_components/nvd3/build/nv.d3.css" />
  <!-- endbower -->
  <!-- endbuild -->

Now if see the above css files are compiled into vendor.css while you run the gulp script. Now in gulp script you can provide the option for uglification and minification.

Similarly you can put js files also. Now this is how uglification and minification takes places.

gulp.src('app/*.html')
    .pipe(assets)
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.minifyCss({
      compatibility: '*'
    })))

If you uglify/minify now you index.html has following:-

  <link rel="stylesheet" href="/styles/vendors.css" />

How should I switch from dev to prod ?

You can keep a nested JSON file and create individual elements for dev,prod and local and keep required settings here and use them in gulp while compiling the project.

{
  "dev": {
   //required keys
   },
  "prod" :{
  //required keys
}

What should be the structure of my website folder ? Should I still contain the not-uglified files ?

Your website structure can be as:-

  • app
    • scripts
    • styles
    • fonts
    • index.html
  • bower.json
  • gulpfile.js