Grunt usemin and filerev not working with build:js comment

Question

I don't know why, because there has to be a problem, but my task 'usemin' doesn't replace the script import that i've made, i tell it in a better way:

I have an app that when i type 'grunt build', it creates a dist folder, and inside dist/scripts, it have a concatenated, uglified file called 'application.js'

When it comes the time to run grunt-filerev, it hash the files and then i have, for example dist/scripts/application.12345678.js

And this is cool, the filerev has to hash the file js, but the problem (I think) is between the connection from filerev to usemin.

I have this in my .html file:

<head>
<link rel="stylesheet" href="styles/main.css"/>
</head>

<body ng-app="prova">
<!-- build:js scripts/application.js -->
<script src="scripts/app.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/routes.js"></script>
<script src="scripts/directives/home-box/home-box-controller.js"></script>
<script src="scripts/directives/home-box/home-box-directive.js"></script>
<!-- endbuild -->
</body>

In these configurations below, the variable distFolder is just 'dist' String

This usemin && useminPrepare configuration:

useminPrepare: {
        html: 'app/index.html',
        options: {
            dest: '<%= distFolder %>'
        }
    },
    usemin: {
        html: ['<%= distFolder %>/index.html'],
        options: {
            assetsDirs: ['<%= distFolder %>'],
        }
    }

And this filerev configuration:

filerev: {
        options: {
            encoding: 'utf8',
            algorithm: 'md5',
            length: 8
        },
        assets: {
            files: [{
                src: [
                    '<%= distFolder %>/bower_components/angular.js',
                    '<%= distFolder %>/scripts/application.js',
                    '<%= distFolder %>/styles/main.css'
                ]
            }]
        }
    }

The problem is only mt main.css get concatenated, minified, revisioned and parsed correctly, so in my dist folder i can see the right reference, the build:js comment for application.js doesn't work, and i see the html script imports as i never used usemin and useminPrepare, they're the same as non-builded application

I've got a similar problem: stackoverflow.com/questions/42413309 — Amir Savand

Unknown Unknown · Accepted Answer · 2016-09-03T18:49:26

Well, it's kinda simple that i didn't try to control the sequence of tasks, i was having filerev after htmlmin, which probably, deleted the comments, probably before adding filerev it was working because a problem between filerev and usemin, don't know, by the way the solution is to put in order

useminPrepare
filerev
usemin
htmlmin

Grunt usemin and filerev not working with build:js comment

1 Answers