CODEWITHSUNDEEP
javascriptangularjsgruntjsproductionuglifyjs
Weedoze
Weedoze

Reputation: 13943

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 ?

Upvotes: 1

Views: 762

Answers (2)

Mohamed Ali
Mohamed Ali

Reputation: 3995

another way is to use gulp-useref plugin, putting comments inside the html file to mark all js files and name the resulting bundle

in the html file

<!-- build:js bundle.js -->
<script src="js/jsfile1.js" ></script>
<script src="js/jsfile2.js" ></script>
<script src="js/jsfile3.js" ></script>
<!-- endbuild -->

in the gulpfile.js

gulp.task('build', function(){
   gulp.src('app/*.html')
   .pipe(useref())
   .pipe(gulpIf('*.js', uglify()))
   .pipe(gulp.dest('build'));
});

this will result a single minified js file bundle.js with proper reference in the html file

Upvotes: 1

Harkirat Saluja
Harkirat Saluja

Reputation: 8114

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

Upvotes: 1

Related Questions