LoginSignup
9

More than 5 years have passed since last update.

Ionicの設定メモ [sass,coffee]

Posted at

IonicはWebbaseのアプリを作るためフレームワークです.HTML,CSS,JavasciptでiOS,Androidのアプリを作ることができます.パフォーマンス的にはネイティブコードで書いたアプリより劣るという欠点がありますが,クロスプラッフォーム性,Web Viewの流用可という点も考えると使いドコロは一応あるでしょう.このIonicはアプリに必要な部品をフレームワーク側が提供してくれていて,割りと簡単にViewを作成することができます.

以下,初期設定のメモ.Ionicの標準だとsass,coffeeが含まれていないようだったので手動で設定しました.

ionicのインストール

$ npm install -g cordova ionic

scaffold

$ ionic start myApp sidemenu
$ cd myApp 
$ npm install
$ bower install
$ gulp install
$ ionic setup sass
$ ionic platform add ios

js -> coffee変換

coffeeの導入

$ npm install --save-dev coffee-script
$ npm install --save-dev gulp-coffee
$ npm install -g js2coffee
$ mkdir coffee

gulpfile.jsを書き換える

require('coffee-script/register');
require('./gulpfile.coffee');

Compile

$ gulp coffee

watch task にcoffeeを加える

gulpfile.coffee

paths = sass: [ './scss/**/*.scss' ], coffee: ['./coffee/**/*.coffee']

gulp.task 'watch', ->
  gulp.watch paths.sass, [ 'sass' ]
  gulp.watch paths.coffee, ['coffee']
  return

gitignoreに追記

www/js/*.js
www/css/*.css
www/lib/

emulator

ripple

$ npm install -g ripple-emulator
$ ripple emulate --path www/

標準

$ ionic emulate ios

screenshot:
iOS Simulator Screen Shot Feb 5, 2015, 14.37.28.png

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9