Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Grunt usemin with templates

Tags:

gruntjs

yeoman

Given the following directory structure:

– Gruntfile.js
– app
    |– index.php
    |– js
    |– css
    |– templates
         |– template.php
– dist

How can I configure grunt usemin to update the references to styles and scripts in my template file relative to the index.php which uses the template?

currently the tasks look like this:

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

And the blocks inside of the template look like this:

<!-- build:js js/main.js -->
    <script src="js/script1.js"></script>
    <script src="js/script2.js"></script>
<!-- endbuild -->
like image 731
gang Avatar asked Apr 01 '13 16:04

gang


1 Answers

Okay I found it out: The solution is to use the alternate search path option:

<!-- build:<type>(alternate search path) <path> -->
... HTML Markup, list of script / link tags.
<!-- endbuild -->

The build blocks now look like this:

<!-- build:js(app) js/main.js -->
    <script src="js/script1.js"></script>
    <script src="js/script2.js"></script>
<!-- endbuild -->

and the usemin task is configured as follows:

usemin: {
    html: '<%= yeoman.dist %>/templates/template.php',
    css: ['<%= yeoman.dist %>/css/*.css'],
    options: {
        dirs: ['<%= yeoman.dist %>']
    }
}
like image 188
gang Avatar answered Sep 27 '22 18:09

gang