First of all, sorry for my english and sorry to be new with grunt.
Now, my question ;-)
I have 2 directories for my Javascript files (/components and /src/main/javascript) included on the index.html which is on /src/main/html. Imagine my gruntfile on the / directory.
I would like to find the simpliest way to have an only .js for all my javascript files on the /target/gui/javascript directory.
But before that, I'm ok to have one file by javascript sources directories. But, I have a problem when I do the following comment on the index.html.
<!-- build:js(components/angular) javascript/components.js -->
<script src="../../../components/angular/angular.js"></script>
<!-- endbuild -->
<!-- build:js(src/main/javascript) javascript/app.js -->
<script src="../javascript/app.js"></script>
<script src="../javascript/lists/services/lists.js"></script>
<script src="../javascript/lists/controllers/listsctrl.js"></script>
<script src="../javascript/lists/controllers/listctrl.js"></script>
<!-- endbuild -->
My problem is that my components.js is empty. I can see a strange thing when I launch my grunt build :
Found a block:
<!-- build:js(components/angular) javascript/components.js -->
<script src="../../../components/angular/angular.js"></script>
<!-- endbuild -->
Updating config with the following assets:
- ../components/angular/angular.js
Updating with ../components/angular/angular.js ? Not components/angular/angular.js ?
I don't understand.
I did the same thing with my CSS files, and it does what I want :
<!-- build:css(components/bootstrap/css) css/components.css -->
<link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap-responsive.css" type="text/css" />
<!-- endbuild -->
<!-- build:css(src/main/css) css/app.css -->
<link rel="stylesheet" href="../css/shoppinglist.css" type="text/css" />
<!-- endbuild -->
I can see
Found a block:
<!-- build:css(components/bootstrap/css) css/components.css -->
<link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="../../../components/bootstrap/css/bootstrap-responsive.css" type="text/css" />
<!-- endbuild -->
Updating config with the following assets:
- components/bootstrap/css/bootstrap.css
- components/bootstrap/css/bootstrap-responsive.css
So, for the CSS, grunt understand the path I want ?
What I have on my Gruntfile ?
(...)
dest: {
buildRoot : 'target',
guiRoot : 'target/gui',
html: {
index: 'target/gui/index.html',
partials: 'target/gui/partials'
},
res: 'target/gui/assets'
},
useminPrepare: {
html: '<%= dest.html.index %>'
},
usemin: {
html: ['<%= dest.html.index %>'],
options: {
dirs: ['<%= dest.guiRoot %>']
}
}
(...)
I use grunt build with :
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-usemin');
grunt.registerTask('build', ['clean', 'copy:html', 'copy:res', 'copy:server', 'copy:heroku', 'useminPrepare', 'concat', 'uglify', 'cssmin', 'usemin']);
Someone can help me ?
Best regards,
Manu