Question

I have a problem with grunt-usemin plugin.

Basically, I want to put all my static content in static/ directory under app or dist (depends if the application is built or not).

Now, here is my grunt config

useminPrepare: {
  html: ['<%= yeoman.app %>/app.html', '<%= yeoman.app %>/login.html'],
  options: {
    dest: '<%= yeoman.dist %>/static'
  }
},
usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/static/styles/**/*.css'],
  options: {
    dirs: ['dist/static/']
  }
}

the first part goes ok watching on the output

Found a block:
    <!-- build:css(.tmp) login/styles/main.css -->
    <link rel="stylesheet" href="styles/bootstrap.css">
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
Updating config with the following assets:
    - .tmp/styles/bootstrap.css
    - .tmp/styles/main.css

Found a block:
    <!-- build:js({app/static}) login/scripts/libs.js -->
    <script src="bower_components/angular/angular.js"></script>
    <!-- endbuild -->
Updating config with the following assets:
    - {app/static}/bower_components/angular/angular.js

Found a block:
    <!-- build:js({.tmp,app/static}) login/scripts/scripts.js -->
    <script src="scripts/loginApp.js"></script>
    <script src="scripts/controllers/login.js"></script>
    <!-- endbuild -->
Updating config with the following assets:
    - {.tmp,app/static}/scripts/loginApp.js
    - {.tmp,app/static}/scripts/controllers/login.js

Configuration is now:

  cssmin:
  { 'dist/static/login/styles/main.css': 'dist/static/login/styles/main.css' }

  concat:
  { 'dist/static/login/styles/main.css': 
   [ '.tmp/styles/bootstrap.css',
     '.tmp/styles/main.css' ],
  'dist/static/login/scripts/libs.js': [ '{app/static}/bower_components/angular/angular.js' ],
  'dist/static/login/scripts/scripts.js': 
   [ '{.tmp,app/static}/scripts/loginApp.js',
     '{.tmp,app/static}/scripts/controllers/login.js' ] }

  uglify:
  { 'dist/static/login/scripts/libs.js': 'dist/static/login/scripts/libs.js',
  'dist/static/login/scripts/scripts.js': 'dist/static/login/scripts/scripts.js' }

  requirejs:
  {}

but the problem is with swapping normal files with their revved versions, for example, here is html before usemining:

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Login</title>
    <meta name="viewport" content="width=device-width">
    <!-- build:css(.tmp) login/styles/main.css -->
    <link rel="stylesheet" href="styles/bootstrap.css">
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
</head>
  <body ng-app="jsLinkedinConnectorLoginApp">
    <div class="container" ng-view=""></div>

    <!-- build:js({app/static}) login/scripts/libs.js -->
    <script src="bower_components/angular/angular.js"></script>
    <!-- endbuild -->

    <!-- build:js({.tmp,app/static}) login/scripts/scripts.js -->
    <script src="scripts/loginApp.js"></script>
    <script src="scripts/controllers/login.js"></script>
    <!-- endbuild -->
  </body>
</html>

and after:

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Login</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="login/styles/main.css">
</head>
  <body ng-app="jsLinkedinConnectorLoginApp">
    <div class="container" ng-view=""></div>

    <script src="login/scripts/libs.js"></script>

    <script src="login/scripts/scripts.js"></script>
  </body>
</html>

so it is almost right, it seems that grunt does not pick up revved files in dist/static directory.

Now when I move for example dist/static/login directory up, to the dist/login and change dirs to dist everything works fine, so giving subdirectory to dist seems to cause problems.

Was it helpful?

Solution

I solved my issue by updating grunt-usemin plugin to 2.0.0 version and switching dirs property to assetsDirs.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top