上篇文章讲了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
参考文章:需翻墙
