上篇文章講了ionic1的環(huán)境配置败去、創(chuàng)建項(xiàng)目和打包app,由于安卓上還是不識(shí)別ES6語法,這里講基于ionic1的ES6編譯和gulp自動(dòng)化構(gòu)建工具.槐沼。
1.ionic start app blank
2.ionic info 看看項(xiàng)目目前環(huán)境,看到gulp local為空
3.必須要需要全局安裝 npm install -g gulp(如果已經(jīng)有全局安裝可以不需要,跳過這一步)
4.Gulp local必須每個(gè)項(xiàng)目安裝
npm install gulp --save-dev，安裝本地gulp
5.ionic setup sass? ? ? (如果運(yùn)行ionic setup sass 報(bào)Error running npm install,運(yùn)行第6步,如沒有則跳過)
6. npm install? (如果運(yùn)行ionic setup sass 報(bào)Error running npm install)
cnpm install --save-dev gulp-babel babel-preset-es2015 gulp-plumber
cnpm install babel-core? (直接運(yùn)行g(shù)ulp babel會(huì)報(bào)錯(cuò),安裝這個(gè))
7.babel插件安裝
cnpm install --save-dev gulp-babel babel-preset-es2015 gulp-plumber
8.babel-core安裝
cnpm install babel-core
9.放置es6文件
這是我的習(xí)慣:項(xiàng)目下建立src,這是待編譯的文件夾,再新建文件夾src/es6,放置es6(這個(gè)對(duì)應(yīng)了第10步中g(shù)ulpfile.js中的paths)
10.修改gulpfile.js
沒有用sass,用的less,所以取消sass了,修改gulp默認(rèn)執(zhí)行babel編譯,不執(zhí)行sass編譯
11.運(yùn)行g(shù)ulp babel ,es6編譯成es5（或者運(yùn)行ionic serve 保存時(shí)會(huì)自動(dòng)編譯成ES5）
完成ok
遇到的問題:這樣配置下來,添加平臺(tái)的時(shí)候報(bào)錯(cuò),以前嘗試的方法是重新新建項(xiàng)目,不配置babel,可以正常添加平臺(tái)和打包app
解決辦法:另外建一個(gè)專門的空白項(xiàng)目用來打包app的,每次打包的時(shí)候把www文件夾copy過去,打包app
參考文章:需翻墻
