Heads-up: There is now also a Yeoman Generator available for this seed.
- Gulp jobs for development, building, emulating and running your app
- Compiles and concatenates your Sass
- Local development server with live reload, even inside ios emulator
- Automatically inject all your JS sources into
index.html
- Auto min-safe all Angular DI through
ng-annotate
, no need to use weird bracket notation - Comes already with ng-cordova and lodash
- generate icon font from svg files
- Blazing fast
I recommend using the available Yeoman Generator.
npm install -g yo generator-ionic-gulp
yo ionic-gulp
OR you can clone the repo manually:
- Clone this project
git clone https://github.com/tmaximini/ionic-gulp-seed.git <YOUR-PROJECT-NAME>
- Change remote to your repo
git remote set-url origin https://github.com/<YOUR-USERNAME>/<YOUR-PROJECT-NAME>.git
- run
npm install
andbower install
to install dependencies
The source code lives inside the app
folder.
Source Files | Location |
---|---|
Javascript | app/scripts |
Styles (scss) | app/styles |
Templates | app/templates |
Images | app/images |
Fonts | app/fonts |
Icons | app/icons |
A lot of starter kits and tutorials encourage you to work directly inside the www
folder, but I chose app
instead, as it conforms better with most Angular.js projects. Note that www
is gitignored and will be created dynamically during our build process.
All 3rd party Javascript sources have to be manually added into .vendor.json
and will be concatenated into a single vendor.js
file.
I know there is wiredep but I prefer to explicitly control which files get injected and also wiredep ends up adding lots of <script>
tags in your index.html instead of building a single vendor.js
file.
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.
By running just gulp
, we start our development build process, consisting of:
- compiling, concatenating, auto-prefixing of all
.scss
files required byapp/styles/main.scss
- creating
vendor.js
file from external sources defined in./vendor.json
- linting all
*.js
filesapp/scripts
, see.jshintrc
for ruleset - automatically inject sources into
index.html
so we don't have to add / remove sources manually - build everything into
.tmp
folder (also gitignored) - start local development server and serve from
.tmp
- start watchers to automatically lint javascript source files, compile scss and reload browser on changes
By running just gulp --build
or short gulp -b
, we start gulp in build mode
- concat all
.js
sources into singleapp.js
file - version
main.css
andapp.js
- build everything into
www
folder - remove debugs messages such as
console.log
oralert
with passing--release
By running gulp -e <platform>
, we can run our app in the simulator
- can be either
ios
orandroid
, defaults toios
- make sure to have iOS Simulator installed in XCode, as well as
ios-sim
package globally installed (npm install -g ios-sim
) - for Android, Ripple or Genymotion seem to be the emulators of choice
- It will run the
gulp --build
before, so we have a fresh version to test - In iOS, it will livereload any code changes in iOS simulator
By running gulp select
you will se 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.
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.
By running gulp -r <platform>
, we can run our app on a connected device
- can be either
ios
orandroid
, defaults toios
- It will run the
gulp --build
before, so we have a fresh version to test
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.
There is also a blog post with more detailed information about this gulp workflow