generator-ionic icon indicating copy to clipboard operation
generator-ionic copied to clipboard

Grunt compress and Sass

Open unostella opened this issue 9 years ago • 6 comments

  1. Trying to compile my app for iOS using build.phonegap.com
  2. 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...
  3. 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

unostella avatar Mar 22 '15 15:03 unostella

+1 I have the same problem...

jayconstanza avatar Apr 09 '15 18:04 jayconstanza

Exactly the same issue, any news about this?. When I use grund compress, I only get 'vendor.css' inside my '/styles' folder

emartinezmoreno avatar Apr 14 '15 17:04 emartinezmoreno

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'
  ]);

frozeek avatar Jun 08 '15 22:06 frozeek

Thank you ,@frozeek! It seems working well.

wladpaiva avatar Jun 10 '15 13:06 wladpaiva

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.

cmcnamara87 avatar Jul 09 '15 07:07 cmcnamara87

@frozeek Thanks! Worked for me :)

bogini avatar Aug 08 '15 14:08 bogini