title: uglyfy top level functions with gulp
body: <p>Take this simple gulp example for uglification:</p>
  
  <pre><code>gulp.task('scripts', function() {
    // Minify and copy all JavaScript (except vendor scripts)
    return gulp.src(paths.scripts)
      .pipe(uglify())
      .pipe(concat('all.min.js'))
      .pipe(gulp.dest('build/js'));
  });
  </code></pre>
  
  <p>If you have two files:</p>
  
  <p>File <code>f1.js</code>:</p>
  
  <pre><code>function f1(){
    var hello = 1;
    return hello;
  }
  </code></pre>
  
  <p>File <code>f2.js</code>:</p>
  
  <pre><code>function f2(){
    return f1();
  }
  </code></pre>
  
  <p>The the result of the task in <code>all.min.js</code> is:</p>
  
  <pre><code>function f1(){var n=1;return n}
  function f2(){return f1()}
  </code></pre>
  
  <p>How can I get uglify to mangle these top level function names i.e. <code>f1</code> and <code>f2</code>? I have tried:</p>
  
  <p><strong>An extra uglify</strong></p>
  
  <pre><code>return gulp.src(paths.scripts)
      .pipe(uglify())
      .pipe(concat('all.min.js'))
      .pipe(gulp.dest('build/js'))
      .pipe(uglify());
  </code></pre>
  
  <p><strong>Passing mangle option</strong></p>
  
  <pre><code>return gulp.src(paths.scripts)
      .pipe(uglify({mangle: true}))
      .pipe(concat('all.min.js'))
      .pipe(gulp.dest('build/js'));
  </code></pre>
  
  <p><strong>Passing top level option</strong></p>
  
  <pre><code>return gulp.src(paths.scripts)
      .pipe(uglify({toplevel: true}))
      .pipe(concat('all.min.js'))
      .pipe(gulp.dest('build/js'));
  </code></pre>
  
  <p>But all to no effect at all.</p>