如何创建Ionic2自定义构建过程?

时间:2016-12-09 16:53:49

标签: javascript angular ionic-framework ionic2

作为一个学校项目,我正在制作一个多平台应用程序。我决定使用JavaScript。我认为使用Ionic2的MVVM模式会很棒,其中VM是Ionic的Angular2部分,我会有两个视图。一个用于移动设备(Ionic的html / css部分)和Electron用于桌面设备。我有一个问题。在一个基本的离子项目中,View和Angular部分是紧密耦合的,我的意思是它们在同一个目录中,不能轻易地改变HTML。

我认为会很棒(虽然欢迎其他解决方案)是有一个"离子"文件夹和桌面"文件夹,两个结构相同的文件名。 使用Ionic构建移动应用程序时,我希望将src文件夹中的所有文件复制到dist /文件夹和html,将src / ionic中的css文件复制到他们的位置,就像在普通离子项目中一样(唯一的区别是,它将在dist /文件夹下不是src /,所以我必须使www / index.html也包括这些而不是它通常在的src /)。 在为桌面构建时,我只是以相同的方式复制所有内容,但是从src / desktop而不是src / ionic。

这样我可以将我的业务逻辑放在" plain" Angular2可以重复使用,为桌面和移动创建应用程序。

所以我的问题是我可以以某种方式修改Ionic构建过程,允许我这样做吗?我可以创建自己的gulp或grunt文件吗?还是webpack?怎么做?

1 个答案:

答案 0 :(得分:0)

最后我编写了自己的gulp文件,将文件复制到src / .tmp /,并且在复制任务准备好之后,我调用离子用来服务的原始脚本,构建项目。我可以用这种方法解决所有问题。

on serve task gulp监视src /文件中src / .tmp除外的更改,并将更改的文件复制到src / .tmp文件夹。每次发生变化时都会被离子观察并重建。

我很幸运,因为离子是建立在角度之上的,因此离子使用的构建器工具集与普通角度项目100%兼容。