Warnings and Aborts when performing 'grunt serve' command

[ltfschoen]

Workflow that causes warnings and aborts when running 'grunt serve' and attempts to resolve them with limited success

#1) Followed the steps in Readme file under the title "Usage" at https://github.com/diegonetto/generator-ionic, including:

npm install -g generator-ionic
mkdir yeoman_ionic && cd $_
yo ionic

• selected Yes that I wanted to use Sass with Compass (I am using Ruby version 2.1.2)
• selected all of the Cordova plugins
• setup my git repository
• attempted to start a connect server with the following command

grunt serve

• screenshot of warning received is shown below, which caused it to abort the execution:
  
  Your skeleton is almost empty...why share this? #2) First Attempt to Solve the Problem
• I proceeded to review the Readme file (lines 111 to 133) of Wiredep, which is contained in directory /Users/Luke/code/git/ionic/yeoman_ionic/node_modules/grunt-wiredep/node_modules/
• I tried installing wiredep globally and binding the correct location of the bowerJson file to wiredep with the following commands (but when I ran 'grunt serve' again, it still showed the same warning and aborted):

grunt serve
npm install -g wiredep
wiredep --bowerJson /Users/Luke/code/git/ionic/yeoman_ionic --src /Users/Luke/code/git/ionic/yeoman_ionic/www/index.html
grunt serve

#3) Second Attempt to Solve the Problem

• As the warning message is telling me that it could not find a 'bower.json' file in /Users/Luke/code/git/ionic/yeoman_ionic/app/bower.json (but it is actually located in the Parent directory /Users/Luke/code/git/ionic/yeoman_ionic/bower.json), I decided to just copy and paste the existing bower.json file into the /app/ subdirectory, when I then ran 'grunt serve', I got the following error:

grunt serve

• I then decided to delete this duplicate copy of the bower.json file, as this wasn't getting me anywhere
  error on 'yo ionicjs' #4) Third Attempt to Solve the Problem
• I decided to follow the tip that accompanied the warning as a last resort by typing the following at command prompt:

grunt serve --force

• this seems to work, screenshot below of terminal output, and of the webpage that it automatically opened in my browser. I tried editing the file /Users/Luke/code/git/ionic/yeoman_ionic/app/index.html, and it automatically refreshes the webpage with the new contents (awesome!!!)
  
  
  sass through compass, concurrent, autoprefixer #5) Fourth Attempt to Solve the Problem
• At this stage, when I run 'grunt serve --force' it successfully runs the server, but it displays the following Warnings:
  
  

To try and resolve them I tried the following:

• i then installed Grunt Contrib Compass, which compiles Sass to CSS using Compass following steps at this link:
  https://github.com/gruntjs/grunt-contrib-compass

npm install grunt-contrib-compass --save-dev

• enable plugin in Gruntfile
• inserted the following in the Gruntfile.js (just before the registerTask methods, as described in this sample Gruntfile http://gruntjs.com/sample-gruntfile)

grunt.loadNpmTasks('grunt-contrib-compass’);

• i then ran the following command again and the Error that was displayed under “copy:styles” (see previous screenshot) disappeared
• i checked the version of Ruby that I am using with

ruby -v

• this returned: ruby 2.1.2p95 (2014-05-08 revision 45877) [x86_64-darwin13.0]
• i then updated Compass and Sass with the following command:

gem update --system && gem install compass

• i then ran ‘grunt server’ again, and the Error that was displayed under “compass:server” changed to the following:

grunt serve

• to try and get rid of this warning i typed: "grunt compass —force —trace", and it returned the following warnings
  
• i tried running the following but it didn't make any difference

bower install

• the code in the file where it triggered the error states the following (but I don't know how to tackle this problem)
  
  2-spaces indentation, added vendor folder with README.md, updated Gruntf... #6) Final Questions:

• The outcome of my attempts to close out all the warnings that are displayed when running 'grunt serve --force' is that:

  a) I don't know how to resolve the following Warnings from displaying still (i.e. wiredep pointing to a 'bower.json' location that wasn't generated even though I followed the Generator Ionic Setup instructions, and some unknown error associated with Compass import paths). Will they impact my ability to use Generator Ionic effectively? Is anyone able to give me any tips on how to overcome these remaining issues?
  
  
  
  

  b) Do these bugs appear to be a common issue that other people would encounter if they tried to install Generator Ionic? Will anyone work on resolving them? Are there any quick fixes or instructions (or updates to the Readme file) that could be prepared in the interim?

Note: Computer being used
OSX 10.9.3
Ruby v2.1.2

[diegonetto]

@ltfschoen Thank you for the very detailed writeup! I was able to replicate this issue, and am investigating it right now. Hope to have a fix by later today.

[diegonetto]

@ltfschoen can you please update to the latest version and give this another go to verify the fix in version 0.5.4 has resolved this issue?

Thanks!

[ltfschoen]

@diegonetto I reinstalled NPM, updated to the latest Generator Ionic version and ran the following commands:

npm install -g generator-ionic
yo ionic

It all works fine but it gives me a Warning: "npm WARN package.json YeomanIonic@0.0.0 No repository field." (see at the bottom of this Screenshot). Is this a problem? Note the Line 1 of the Grunfile.js states:

// Generated on 2014-09-08 using generator-ionic 0.5.4

Lines 1-3 of package.json states

{
  "name": "YeomanIonic",
  "version": "0.0.0", 

When I then proceed to run the server with the following command I do not get any warnings (I don't have to run 'grunt serve --force' anymore, which is great!). All "green" 👍 (see this Screenshot)

grunt serve

Now, I decided to add the iOS platform and emulate it with the following commands (described in the "Cordova Commands" section of the Readme), which didn't give any errors, and just loaded the iOS Simulator with the Apache Cordova logo

grunt platform:add:ios
grunt emulate:ios

I then realised I need to built it first, so I ran the command, which gave me the following Warning (similar to the ones experienced earlier)

grunt build:ios

So, I went for the suggested 'force' build option with the following command, which gave the following Warnings (similar to experienced before too)

grunt build:ios --force

I then emulated it in iOS without any errors or warnings with the following command, and it displayed the "iOS Blank Starter" text from /app/index.html successfully (see below Screenshot):

grunt emulate:ios

After doing all this I realised there is an "Initial Walkthrough" in the Readme, with slightly different commands, so I tested it out with:

grunt serve

I tried changing the title in /app/index.html to the following, which updated straight away:

<h1 class="title">Map for Luke</h1>

I then wanted to change the CSS of this title (of class .title), and noticed that in the /app/styles/ directory there are two files, so I added the following to each of them to see if I could change the font colour, but it didn't work (I know it was detecting the Sass file in the browser somehow, because if I used the wrong syntax it would display):

main.sass

.title
  color: #447799

main.scss

.title {
  color: #447799;
}

I noticed that in /app/index.html, on Line 17, it references "/styles/main.css", which is a file that doesn't exist. I tried changing it to the Sass and SCSS file extensions but it didn't work either

As a last resort I created a new file /app/styles/main.css and gave it the following contents:

.title {
  color: #447799;
}
* {
  border: 1px solid black;
}

This didn't display anything differently either. I am using the Google Chrome browser, and opened Inspect Element > Network, where it was clearly being loaded (see below Screenshot). This also exposed another potential bug in that it is loading a 'cordova.js' file that cannot be found as is giving 404 error.

As a final step following the "Initial Walkthrough" in the Readme, I ran the following command and the Build succeeded

npm install -g ios-sim

It gave a few Warnings as shown in below screenshots:

The iOS platform had already been added so I skipped running 'grunt platform:add:ios'.
I proceeded to emulate in iOS with the following, which worked without any errors:

grunt emulate:ios

[diegonetto]

@ltfschoen The first set of warnings you mentioned are referring to your project's package.json file. I pushed a fix but am holding out on bumping the version for now. You can make these go away by adding "private": true, to your package.json file (see referenced commit above).

You can go ahead and delete either the main.scss or main.sass file. The generator has been updated to use .scss files, but they are technically interchangeable and it depends on your preference. I prefer SCSS syntax (good read - http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better), so on a fresh scaffold (new project directory) you won't see the main.sass file anymore.

You are correct that main.css doesn't exist in app/styles/. If you inspect the index.html file you will see that the stylesheet link is wrapped in a very specific comment block containing <!-- build:css({.tmp,app}) styles/main.css -->. The wiredep plugin uses this annotation, which in this case tells it to search for main.css inside of the .tmp/ or app/ directories. Since you're using SASS, the Grunt build system actually places the compiled CSS files into the .tmp/ directory, so that your app/styles/ directory isn't littered with both SCSS/SASS and CSS files.

There has been some confusion about the grunt build command, since there is also a cordova build command. In its current state, the generator's grunt build command first builds the application assets for distribution into the www/ directory and then runs cordova build. Specifying grunt build:<platform> is not currently supported, so all registered platforms will be built. The workflow (after running yo ionic) is:

grunt platform:add:ios
grunt build
grunt emulate:ios

This should be working correctly (just spot checked on a fresh scaffold of the maps starter), so please let me know if this helps!

[diegonetto]

@ltfschoen The wiredep issues should have gone away. If you're still seeing this issue, please try the following:

npm cache clear
npm install -g generator-ionic

Then try scaffolding a new project.

[ltfschoen]

@diegonetto I followed your recommended workflow and now it actually displays the map in iOS Simulator 👍 I'm going to stick with SASS too, I haven't managed to get it to work, but I'm sure I'll work it out soon. I also spent the afternoon trying to get it to emulate in the Android Simulator, and I managed to get it to work, so I'll make a pull request to add a workflow to your Readme for your consideration.

[diegonetto]

@ltfschoen glad you were able to get the starter working!

SASS should be working out of the box now. Can you revert any changes to the usemin blocks inside index.html and post the wiredep configuration object from your Gruntfile.js here? There was a line removed (containing a cwd option) that might not have been deleted if you re-scaffolded an existing project versus starting fresh with a new one.

I verified this morning that if you scaffold a new project with the maps starter template, run grunt serve then modify the generated app/styles/main.scss file (for instance delete all the styles) you should see it refresh your browser with compiled changes.

Renaming main.scss to main.sass and changing the contents as shown below also works automatically.

map
  display: block
  width: 100%
  height: 100%

.scroll
  height: 100%

Thanks for submitting the PR with your guide on setting up the Android Emulator. Since the main README is starting to get very long, I'm going to be adding a FAQ page to the documentation for this generator, so I will comment on your PR when I have restructured the docs so you can add adjust it accordingly. Thanks!

[ltfschoen]

@diegonetto I created a fresh project with the same settings. I checked instances of the wiredep object in the Gruntfile and they appear the same as my existing project, stored here: https://github.com/ltfschoen/yeoman_ionic/blob/master/Gruntfile.js

I created a YouTube video of my testing SCSS and Sass and emulating iOS and Android here (it all took about 10 minutes longer than this clip, but I removed long delays in Adobe Premiere):
https://www.youtube.com/watch?v=Y7OLq_NHfnc&feature=youtu.be

Note that I have since discovered that the reason why I couldn't change the font colour of my custom title text "Map for Luke" having the "title" class (.title) with the following command, was because it inherits from classes ".bar.bar-stable":

.title {
  color: red;
}

So, in order to change the font colour of the title I had to change the code to:

.bar.bar-stable .title {
  color: red;
}

I discovered this was the reason when I checked using the "Element" and "Styles" tabls of Dev Tools in Google Chrome, which shows this is due to inheritance from ionic.css that needs to be fully overridden this way to work.

Screenshot BEFORE changes:

Screenshot AFTER IN-BROWSER (notice I have added the "color" and "background-color" attributes to classes ".bar.bar-stable .title" in the "Styles" tab, and the different colours (orange and red) are shown in the title section of the webpage, whilst further down in the "Styles" tab where I have added a "color" of purple to class ".bar .title" appears insufficient to override the inherited font colour, and it indicates this is the situation with a strike-through)

FAQ definitely sounds like the right approach. Please keep me informed!

[diegonetto]

@ltfschoen Glad you were able to get your style overrides working!! This is often the case when using frameworks with large amounts of custom styles (Twitter Bootstrap, Zurb Foundation, TopCoat, etc).

Does it suffice to say, then, that the original problem reported in this issue has been resolved?

If so, please close this issue, otherwise let me know how I can be of further assistance. Thanks :)

[ltfschoen]

Yes, absolutely. This fixes #99.