javascriptnode.jsgulpgulp-uglifygulp-usemin

Making gulp-usemin uglify only non-minified files


I'd like to have all the Javascript in a single scripts.js files. Here is a portion of my index.html:

<!-- build:inlinejs js/scripts.js -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/moment/locale/de.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

My current Gulp configuration is as follows:

gulp.task('usemin', function () {
  return gulp.src('./*.html')
      .pipe(usemin({
        css: [minifyCss(), 'concat'],
        html: [minifyHtml({empty: true})],
        js: [uglify(), rev()],
        inlinejs: [uglify()],
        inlinecss: [minifyCss(), 'concat'],
        inline: ['concat']
      }))
      .pipe(gulp.dest('dist/'));
});

As you can see there are already lots of minified Javascript files, so I don't want my build to waste precious time uglifying already minified files. How can I do in order to uglifying only non-minified files?


Solution

  • I know this has been asked a while ago, but I had the same problem and found the solution.

    In your html you can give names for build blocks:

    <!-- build:jsLibs js/libs.js -->
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <!-- endbuild -->
    
    <!-- build:jsApp js/app.js -->
    <script src="js/main.js"></script>
    <!-- endbuild -->
    

    And in the gulp task:

    gulp.task('usemin', function () {
        return gulp.src('./*.html')
            .pipe(usemin({
                ...
                jsLibs: ['concat'],
                jsApp: [uglify, rev]
          }))
          .pipe(gulp.dest('dist/'));
    });
    

    Hope that helps someone else.