CODEWITHSUNDEEP
gruntjsgrunt-usemin
François Romain
François Romain

Reputation: 14393

how to handle absolute url to css with grunt-usemin

I am using grunt-usemin to build an app project

css are linked with absolute paths: 

  <!-- build:css(.) /app/css/libs.css -->
  <link rel="stylesheet" href="/app-dev/lib/css/style.css"/>
  <link rel="stylesheet" href="/app-dev/lib/css/another.css">
  <!-- endbuild -->

javascript files are linked with relative paths:

  <!-- build:js js/app.js -->
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <!-- endbuild -->

the grunt config:

  useminPrepare: {
        html: 'app-dev/index.html',
        options: {
              dest: 'app'
        }
  },
  usemin: {
        html: ['app/{,*/}*.html'],
        css: ['app/css/{,*/}*.css'],
        options: {
              assetsDirs: ['app']
        }
  }

The problem is there is one spare subfolder level in the css output: 

app
- app
- - css
- - - libs.css
- js
- - app.js
- etc

while the reference in the outputed html file is correct 

<link rel="stylesheet" href="/app/css/libs.css">

How to output the css to the correct folder hierarchy?

Upvotes: 3

Views: 1794

Answers (2)

Thomas Decaux
Thomas Decaux

Reputation: 22671

The HTML file should be under "app" folder as well, so you can remove "/app-dev".

Upvotes: 0

xphong
xphong

Reputation: 1114

Try removing the / in front of your build path

<!-- build:css app/css/libs.css -->
<link rel="stylesheet" href="/app-dev/lib/css/style.css"/>
<link rel="stylesheet" href="/app-dev/lib/css/another.css">
<!-- endbuild -->

Upvotes: 1

Related Questions