1

I have changed the internal "www" folder structure, i.e., moved "scss" folder to a folder "assets", created an "app" folder, etc. Now, when I am trying to run:

ionic setup sass (http://ionicframework.com/docs/cli/sass.html),

it creates a "css" folder in "www" but not "www/assets".

How can I update Ionic on structural changes? I have managed to update ".bowerrc" so it knows where to put packages, but it is only Bower that is aware of the new project structure.

"www" Structure

Arthur
  • 223
  • 2
  • 16

1 Answers1

4

You can use whatever folder you want for your css files.
One thing you have to change is the gulp task in the gulpfile.js:

gulp.task('sass', function(done) {
  gulp.src('./scss/ionic.app.scss')
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(gulp.dest('./www/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./www/css/'))
    .on('end', done);
});

As you can see it transforms the scss file ionic.app.scss in the destination folder ./www/css/ 

.pipe(gulp.dest('./www/css/'))

That's the bit of code you have to change with the new path.

Don't forget to change your index.html with the new path as well:

You don't have to change the ionic.project file as it already includes all the files in the www folder (and subfolders) excluding www/lib (and subfolders); see ref:

LiveReload

By default, LiveReload will watch for changes in your www/ directory, excluding www/lib/.

UPDATE:

Maybe someone is interested to change the root folder www. We can do that but we have to instruct ionic to use a different name.

ionic.project has got an additional property: documentRoot:

{
  "name": "myApp",
  "app_id": "",
  "documentRoot": "app",
  "gulpStartupTasks": [
    "sass",
    "watch"
  ],
  "watchPatterns": [
    "app/**/*",
    "!app/lib/**/*"
  ]
}

Serving an alternate document root give more info on the topic.

LeftyX
  • 35,328
  • 21
  • 132
  • 193
  • 1
    Thanks for the answer. I guess I have to also modify "ionic.project" file? To: `"watchPatterns": [ "www/assets/**/*", "!www/assets/lib/**/*"]`. – Arthur May 17 '15 at 21:50
  • 1
    Yes if you want the `ionic serve` task to use live reload correctly with the sass files in your project. It watches the files in this pattern array for changes and triggers a sass rebuild automatically. – Jeremy Wilken May 18 '15 at 02:54
  • @Arthur: actually, no as it already contains everything in www excluding www/lib – LeftyX May 18 '15 at 08:44
  • @JeremyWilken: you're right. Forgot to mention that. Thanks. – LeftyX May 18 '15 at 08:47
  • Is it also possible to rename the root folder of the app like `www` -> `app`? – uloco Oct 08 '15 at 11:05
  • @uloco: You can do whatever you want as long as you change references in your `index.html` and `gulpfile.js`. – LeftyX Oct 08 '15 at 11:07
  • But I added the watchPatterns and `ionic serve` still points to `www`to find the `index.html` file – uloco Oct 08 '15 at 11:42
  • Please, you can answer here: http://forum.ionicframework.com/t/rename-project-root-www-to-app/34163 – uloco Oct 08 '15 at 11:44
  • @uloco: I've extended the answer here as well. Cheers. – LeftyX Oct 08 '15 at 12:50
  • 1
    For others, keep in mind that running ```ionic update``` will still install ionic resources in the www/lib directory. So, you'll have to move them after an update. – Jbird Jan 27 '16 at 17:29