search

tmaximini / generator-ionic-gulp

A Yeoman generator for fast hybrid app development that stays out of your way
134 stars 36 forks source link

readme

A Yeoman generator for Ionic Projects with Gulp

This is a yeoman generator for my Ionic Gulp Seed, a minimal Ionic app template. It sets up everything to get you started with Gulp and Ionic in no time. Currently using Ionic 1.3.0 and Angular 1.5.3.

Features

Installation

NPM

You should have Yeoman installed globally

npm install -g yo

To install generator-ionic-gulp from npm, run:

npm install -g generator-ionic-gulp

Finally, initiate the generator:

yo ionic-gulp

after installation, just run:

gulp

to start up the build job and file watchers.

In order to compile Sass, you need to have ruby and the sass ruby gem installed: gem install sass. Now using https://github.com/sass/node-sass instead

Workflow

This doc assumes you have gulp globally installed (npm install -g gulp). If you do not have / want gulp globally installed, you can run npm run gulp instead.

Development mode

By running just gulp, we start our development build process, consisting of:

Browserify support

If you opted for browserify support all your sources will be kept in app/src instead of app/scripts. Please check app/src/app.js to see how modules can be added to your angular module. Browserify will automatically bundle only the code you require and you can require any module you installed with npm (provided they can be used in a webbrowser)

If you opted for browserify support you have sourcemaps available in development mode. The script bundle and map file will be written in scripts/ and are .gitignored. The only other file in the scripts/ folder is the configuration.js file for your constants and other settings.

NOTE: Beware that if you bundle (and uglify) angular modules you need to use the pattern where you provide an array with named parameters. See code below for an example of the difference.

// When not bundling you can do this
.run( function( $ionicPlatform ) { ... } )

// If you bundle you need to use the following pattern:
.run( [ '$ionicPlatform', function( $ionicPlatform ) { ... } ] )

// You can keep adding parameters like so:
.run( [ '$ionicPlatform', '$q', '$http', function( $ionicPlatform, $q, $http ) { ... } ] )

See the browserify website for what you can and cannot do with browserify: http://browserify.org/

If you need to add transpiling to browserify the location to do so has been marked in the gulpfile.js

Build mode

By running just gulp --build or short gulp -b, we start gulp in build mode

Emulate

By running gulp -e <platform>, we can run our app in the simulator

Emulate a specific iOS device

By running gulp select you will see a prompt where you can choose which ios device to emulate. This works only when you have the gulp -e task running in one terminal window and run gulp select in another terminal window.

Ripple Emulator

Run gulp ripple to open your app in a browser using ripple. This is useful for emuating a bunch of different Android devices and settings, such as geolocation, battery status, globalization and more. Note that ripple is still in beta and will show weird debug messages from time to time.

Run

By running gulp -r <platform>, we can run our app on a connected device

splash screens and icons

Replace splash.png and icon.png inside /resources. Then run ionic resources. If you only want to regenerate icons or splashs, you can run gulp icon or gulp splash shorthand.

customizing themes

Just override any Ionic variables in app/styles/ionic-styles.scss.

Changelog

1.5.2

1.5.0

1.4.0

1.3.3

1.3.2

1.3.1

1.3.0

1.2.2

1.2.0

License

MIT