ionic1 + gulp +babel ES6项目

上篇文章讲了ionic1的环境配置、创建项目和打包app,由于安卓上还是不识别ES6语法,这里讲基于ionic1的ES6编译和gulp自动化构建工具.。

1.ionic start app blank

2.ionic info 看看项目目前环境,看到gulp local为空

3.必须要需要全局安装 npm install -g gulp(如果已经有全局安装可以不需要,跳过这一步)

4.Gulp local必须每个项目安装

npm install gulp --save-dev，安装本地gulp

5.ionic setup sass      (如果运行ionic setup sass 报Error running npm install,运行第6步,如没有则跳过)

6. npm install  (如果运行ionic setup sass 报Error running npm install)

cnpm install --save-dev gulp-babel babel-preset-es2015 gulp-plumber

cnpm install babel-core  (直接运行gulp babel会报错,安装这个)

7.babel插件安装

cnpm install --save-dev gulp-babel babel-preset-es2015 gulp-plumber

8.babel-core安装

cnpm install babel-core

9.放置es6文件

这是我的习惯:项目下建立src,这是待编译的文件夹,再新建文件夹src/es6,放置es6(这个对应了第10步中gulpfile.js中的paths)

10.修改gulpfile.js

没有用sass,用的less,所以取消sass了,修改gulp默认执行babel编译,不执行sass编译

11.运行gulp babel ,es6编译成es5（或者运行ionic serve 保存时会自动编译成ES5）

完成ok

---

遇到的问题:这样配置下来,添加平台的时候报错,以前尝试的方法是重新新建项目,不配置babel,可以正常添加平台和打包app

解决办法:另外建一个专门的空白项目用来打包app的,每次打包的时候把www文件夹copy过去,打包app

参考文章:需翻墙

https://labs.encoded.io/2015/06/22/use-es6-with-ionic/  

http://blog.mapado.com/use-babel-with-ionic-framework/