title: Grails - migrating from the resources to the asset-pipeline plugin
body: <p>I've been trying to install the <em>angularjs/restangular</em> js libraries in my Grails app based on a chapter in <a href="http://www.manning.com/gsmith2/" rel="nofollow noreferrer">Grails In Action</a>. The problem is that the code in this book uses the <em>resources</em> plugin which has been replaced in the version of Grails I'm using (2.4) by the <em>asset-pipeline</em> plugin.</p>
  
  <p>I've tried to implementing the book code using <a href="http://grails.github.io/grails-doc/2.4.x/guide/single.html#resources" rel="nofollow noreferrer">the official documentation </a> as a guide, but the required javascript is not getting included in my gsp files. Also, references to <code>&lt;r:layoutResources/&gt;</code> and <code>&lt;r:require module="core"/&gt;</code> in my gsp files, are being highlighted as "unknown tags" in the GGTS editor.</p>
  
  <p>Can anyone advise on where I've gone wrong migrating from the <em>resources</em> plugin to the <em>asset-pipeline</em>? Specifically I have copied the following <em>js libraries</em> into my web-app/js folder:</p>
  
  <p><img src="https://i.stack.imgur.com/xxOif.png" alt="enter image description here"></p>
  
  <p>And I want to define dependencies between those modules and so I have created the following <code>conf\ApplicationResources.groovy</code>:</p>
  
  <pre><code>modules = {
  
      angularjs {
          resource url:'js/angular-1.3.15.js', disposition: 'head'
      }
  
      restangular {
          dependsOn 'angularjs'
          resource url:'js/restangular-1.4.0.js'
      }
  
      lodashjs {
          resource url:'js/lodash-3.6.0.js'
      }
  
      core {
          dependsOn 'restangular, lodashjs'
          resource url:'/js/custom.js'
      }
  }
  </code></pre>
  
  <p>And <code>views\layout\main.gsp</code> contains:</p>
  
  <pre><code>&lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt;
      &lt;title&gt;&lt;g:layoutTitle default="Grails"/&gt;&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="shortcut icon" href="${assetPath(src: 'favicon.ico')}" type="image/x-icon"&gt;
      &lt;link rel="apple-touch-icon" href="${assetPath(src: 'apple-touch-icon.png')}"&gt;
      &lt;link rel="apple-touch-icon" sizes="114x114" href="${assetPath(src: 'apple-touch-icon-retina.png')}"&gt;
        &lt;asset:stylesheet src="application.css"/&gt;
      &lt;asset:javascript src="application.js"/&gt;
      &lt;g:layoutHead/&gt;
      &lt;r:layoutResources/&gt; &lt;-- why is this highlighted as 'unknown'?
  &lt;/head&gt;
  </code></pre>
  
  <p>And <code>views\post\singlepage.gsp</code>:</p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;Timeline for ${ user.userid }&lt;/title&gt;
      &lt;meta name="layout" content="main"/&gt;
      &lt;content tag="htmlAttrs"&gt;ng-app="testsparestang"&lt;/content&gt;
      &lt;r:require module="core"/&gt; &lt;-- again, this is unknown!
  &lt;/head&gt;
  </code></pre>