Fixing Blank JavaScript Files When Building with Grunt

Diagnosing the Problem

If your built .js files come out blank and you use the grunt plugin usemin, check the useminPrepare task’s output in Terminal. Make sure it correctly generates the paths for:

  1. cssmin,
  2. concat,
  3. uglify, and
  4. requirejs.

If useminPrepare correctly sets your paths, keep Googling; if not, read on.

The (Potential) Solution

If usemin incorrectly generates your paths, check out this excerpt from the README.md:

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->
  • type: either js or css
  • alternate search path: (optional) By default the input files are relative to the treated file. Alternate search path allow[s you] to change that
  • path: the file path of the optimized file, the target output

Example

I had to set the alternate search path to app.

My Directory Setup

  • ~
    • Sites
    • project_dir
      • app Statamic installation location
      • bower_components
        • third_party
        • javascript
      • _themes
        • my_theme
          • js Post-build third_party javascript location

Excerpt From My Gruntfile.js

usemin: {
  html: ['dist/_themes/cb/**/*.html'],
  css: ['dist/_themes/cb/css/{,*/}*.css'],
  options: {
    dirs: ['dist']
  }
},

useminPrepare: {
  html: 'app/_themes/cb/{,*/}*.html',
  options: {
    dest: 'dist'
  }
},

My HTML Build Blocks

<!-- build:js(app) /_themes/cb/js/vendor/modernizr.js -->
<script src="/bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->

...

<!-- build:js(app) /_themes/cb/js/plugins.js -->
<script src="/bower_components/jquery/jquery.js"></script>
<script src="/bower_components/sass-bootstrap/js/affix.js"></script>
<script src="/bower_components/sass-bootstrap/js/alert.js"></script>
<script src="/bower_components/sass-bootstrap/js/button.js"></script>
<script src="/bower_components/sass-bootstrap/js/carousel.js"></script>
<script src="/bower_components/sass-bootstrap/js/collapse.js"></script>
<script src="/bower_components/sass-bootstrap/js/dropdown.js"></script>
<script src="/bower_components/sass-bootstrap/js/modal.js"></script>
<script src="/bower_components/sass-bootstrap/js/scrollspy.js"></script>
<script src="/bower_components/sass-bootstrap/js/tab.js"></script>
<script src="/bower_components/sass-bootstrap/js/tooltip.js"></script>
<script src="/bower_components/sass-bootstrap/js/popover.js"></script>
<script src="/bower_components/sass-bootstrap/js/transition.js"></script>
<!-- endbuild -->

<!-- build:js(app) /_themes/cb/js/cb.js -->
<script src="/_themes/cb/js/cb.js"></script>
<!-- endbuild -->
comments powered by Disqus