如何让 Ionic 知道项目结构的变化？

Question

我已更改内部“www”文件夹结构，即将“scss”文件夹移动到“assets”文件夹，创建“app”文件夹等。现在，当我尝试运行时：

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

它在“www”而不是“www/assets”中创建一个“css”文件夹。

如何更新 Ionic 的结构变化？我设法更新了“.bowerrc”，因此它知道将包放在哪里，但只有 Bower 知道新的项目结构。

Answer 1

您可以为您的 css 文件使用任何您想要的文件夹。
您必须更改的一件事是 gulpfile.js 中的 gulp 任务：

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);
});

如您所见，它会转换目标文件夹 ./www/css/ 中的 scss 文件 ionic.app.scss

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

这是您必须使用新路径更改的代码。

不要忘记用新路径更改您的 index.html：

您不必更改 ionic.project 文件，因为它已经包含 www 文件夹（和子文件夹）中的所有文件，不包括 www/lib（和子文件夹）；见ref:

实时重载

默认情况下，LiveReload 将监视您的 www/ 目录中的更改， 不包括 www/lib/。

更新：

也许有人有兴趣更改根文件夹www。我们可以这样做，但我们必须指示 ionic 使用不同的名称。

ionic.project 有一个附加属性：documentRoot:

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

Serving an alternate document root 提供有关该主题的更多信息。