generator-ionic
generator-ionic copied to clipboard
Grunt compress and Sass
- Trying to compile my app for iOS using build.phonegap.com
- When I upload zipped /www folder (after running 'grunt serve'), I don't get to see my app (after it's installed on my iPhone) but something else instead: '--- name: simple component: ionCheckbox ---' which is one of the ionic demos. But when I open the same index.html in my browser, I do get to see my project as should. Anyway...
- So I run 'grunt compress', but then I don't get my main.scss attached to project, and the only style there is, is vendor.css
Do I need to modify anything in my index.html or Gruntfile.js?
I now have to use Ionic View to preview my app and that works brilliant (apart from problem with images) but I want to come back to PhoneGap builder
+1 I have the same problem...
Exactly the same issue, any news about this?. When I use grund compress, I only get 'vendor.css' inside my '/styles' folder
Try adding a 'copy:tmp'
between 'copy:dist'
and 'cssmin'
in the 'compress'
task. That will copy your custom styles to the www/styles
folder.
Here's what I have and it's working properly:
grunt.registerTask('compress', [
'clean',
'ngconstant:production',
'wiredep',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'concat',
'ngAnnotate',
'copy:dist',
'copy:tmp',
'cssmin',
'uglify',
'usemin',
'htmlmin'
]);
The other thing I changed was the 'cssmin'
task, so that it minifies my custom css.
Here's what I have:
cssmin: {
dist: {
files: [{
expand: true,
cwd: '.temp/<%= yeoman.styles %>',
src: ['*.css'],
dest: '<%= yeoman.dist %>/<%= yeoman.styles %>',
}]
}
},
I also added a new task for when I want to run the cssmin task alone (rarely), so it runs the copy:tmp first:
grunt.registerTask('cssmin:manual', [
'copy:tmp',
'cssmin'
]);
Thank you ,@frozeek! It seems working well.
Looks like the usemin comments are missing. From this:
<link href="styles/style.css" rel="stylesheet">
<link href="styles/main.css" rel="stylesheet">
to this:
<!-- build:css({.temp,app}) styles/main.css -->
<link href="styles/style.css" rel="stylesheet">
<link href="styles/main.css" rel="stylesheet">
<!-- endbuild -->
You shouldn't need to change anything in the Gruntfile.
@frozeek Thanks! Worked for me :)