ldlsegovia/..ionic-gulp-pow.md

## ..ionic-gulp-pow.md

      
    Raw
  

              ..ionic-gulp-pow.md
            
          
    Herramientas necesarias y configuración general


Instalar el sdk de android
Agregar al path platform-tools y tools del sdk:
$ export PATH=${PATH}:/Applications/adt/sdk/platform-tools:/Applications/adt/sdk/tools
Agregar la variable de entrono
$ export ANDROID_HOME=Applications/adt/sdk/tools
Agregar los pasos 2 y 3 al archivo .zshenv que está en mi home. Esto para cargar las variables de entorno al inicio.

TODO: configurar pow para trabajar con la api
Estructura del proyecto


$ ionic start my_project Esto crea una instalación nueva de Ionic.
Borro el directorio /www
Creo el directorio /src con la siguiente estructura de directorios:

/src

/css


/fonts


/img


/js


/controllers


controller1.js


controller2.js


...


/directives


directive1.js


directive2.js


...


/... (todos los directorios que se necesiten)


app.js


/templates


template1.html


template2.html


...


index.html


Agrego al root del proyecto el archivo package.json
Agrego al root del proyecto el archivo .bowerrc. y bower.json
Agrego el archivo /environments/development.json.example. Debemos agregar este archivo al repositorio y crear uno /environments/development.json (ignorado en .gitignore). Este archivo se utiliza para crear constantes que se utilizaran en la aplicación. Puedo tener tantos archivos como ambientes tenga.
Agrego el archivo .nodenv-vars.example. Debemos agregar este archivo al repositorio y crear uno .nodenv-var (ignorado en .gitignore).
Si usamos sass en nuestro proyecto, en /scss/ionic.app.scss debemos reemplazar las líneas: $ionicons-font-path: "../bower_components/ionic/release/fonts" !default; para que podamos apuntar al nuevo path de las fonts de Ionic en su nueva ubicación (bower_components) e @import "src/bower_components/ionic/scss/ionic"; que hace lo propio para los estilos de Ionic.
Creo (o modifico existente) el archivo gulpfile.js en el root con el archivo adjunto.
Modifico el index.html como muestro en el adjunto.
Si estoy copiando el index del proyecto generado por Ionic, se debe tener en cuenta que se debe modificar las paths para que apunten al directorio de /bower_components
Otra cosa importante aquí es que se debe encerrar entre  lo que necesitamos sea agrupado en el archivo minificado que se generará al momento de hacer el build para ver la app en el teléfono. Por ej: en las líneas que comenté dice que todo lo que esté dentro ese tag, se minificará y se pondrá dentro de /www/js/libs.js
Copio el .gitignore.

Instalación de dependencias.


$ npm install -g ionic cordova gulp los instalo de manera global SIN USAR SUDO
$ npm install -d Esto instala todo lo que tengo en el package.json en el directorio /node_modules
$ bower install instalo todo lo de bower.json en /src/bower_components
$ gulp build --env my_enviroment_name (puede ser cualquiera dentro de /environments Por ej: development)

Correr la app en el browser.


$ gulp Esto deja corriendo la app en http://localhost:9000

Correr la app en el teléfono


Enchufo el teléfono con USB:
$ adb devices debería aparecer el código de mi teléfono que me asegura que lo estoy tomando correctamnte.
$ cordova build android (no haría falta, el run hace build antes)
$ cordova run android se abre la app en el teléfono y en mi máquina puedo ver lo que ocurre en mi teléfono entrando a chrome y entrando a chrome devices

Testing


$ npm install webdriver-manager (una vez)
$ webdriver-manager update --standalone (una vez)
Agrego "protractor": "^1.1.1" al package.json
Agrego el archivo protractor.conf.js al root del proyecto
Agrego el directorio /test y /test/specs. Dentro de specs pongo mi test con la forma: xxx_spec.js
$ webdriver-manager start
$ gulp server
$ protractor protractor.conf.js para correr los test


## .bowerrc
{
  "directory": "src/bower_components",
  "json": "bower.json"
}

## .gitignore
node_modules/
.nodenv-vars

src/css
src/bower_components
src/js/config.js
www/

enviroments/*.json

platforms/android/assets/www/
platforms/android/CordovaLib/ant-build
platforms/android/CordovaLib/ant-gen
platforms/android/ant-build
platforms/android/ant-gen
platforms/android/CordovaLib/local.properties
platforms/android/local.properties

platforms/ios/www

madbill-android-release-key.keystore
Madbill.apk
.idea

## .nodenv-vars.example
PROXY_API_URL=http://myproject.pow/api

## bower.json
{
  "name": "my-project",
  "devDependencies": {
    "ionic": "1.0.0-beta.13"
  }
}

## development.json.example
{
  "settings": {
    "apiBaseUrl": ""
  }
}

## gulp.js
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var connect = require('gulp-connect');
var ngConstant = require('gulp-ng-constant');
var util = require('gulp-util');
var protractorQA = require('gulp-protractor-qa');
var usemin = require('gulp-usemin');
var uglify = require('gulp-uglify');


// enviroment variables
var env = util.env.env || 'development';
var envPath = 'enviroments/' + env + '.json'
var proxyApiUrl = process.env.PROXY_API_URL || 'http://myproject.pow/api';

var paths = {
  css: ['./src/css/**/*.css'],
  js: ['./src/js/**/*.js'],
  img: ['./src/img/**/*'],
  fonts: ['./src/fonts/**/*'],
  html: ['./src/index.html', './src/templates/**/*.html'],
  sass: ['./scss/**/*.scss']
};

gulp.task('usemin', ['copy'], function() {
  return gulp.src('./src/index.html')
    .pipe(usemin({
      css: [minifyCss(), 'concat'],
      js: [uglify({mangle: false}), 'concat']
    }))
    .pipe(gulp.dest('./www/'))
});

gulp.task('sass', function(done) {
  gulp.src('./scss/*.scss')
    .pipe(sass({
      errLogToConsole: true
    }))
    .pipe(gulp.dest('./src/css/'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./src/css/'))
    .pipe(connect.reload())
    .on('end', done);
});

gulp.task('js', function(done) {
  gulp.src(paths.js)
    .pipe(connect.reload())
    .on('end', done);
});

gulp.task('css', function(done) {
  gulp.src(paths.css)
    .pipe(connect.reload())
    .on('end', done);
});

gulp.task('html', function(done) {
  gulp.src(paths.html)
    .pipe(connect.reload())
    .on('end', done);
});

gulp.task('watch', function() {
  gulp.watch(paths.sass, ['sass']);
  gulp.watch(paths.js, ['js']);
  gulp.watch(paths.css, ['css']);
  gulp.watch(paths.html, ['html']);
});

gulp.task('config', function () {
  gulp.src(envPath)
    .pipe(ngConstant({
      name: 'project.config'
    }))
    .pipe(rename('config.js'))
    .pipe(gulp.dest('./src/js'));
});

gulp.task('server', function(){
  connect.server({
    root: ['src'],
    port: 9000,
    livereload: true,
    middleware: function(connect, o) {
      return [ (function() {
          var url = require('url');
          var proxy = require('proxy-middleware');
          var options = url.parse(proxyApiUrl);
          options.route = '/api';
          return proxy(options);
      })() ];
    }
  });
});

gulp.task('protractor-qa', function() {
    protractorQA.init({
        testSrc : [ 'test/specs/**/*_spec.js', 'test/pages/**/*_page.js'],
        viewSrc : [ 'www/index.html', 'www/templates/**/*.html' ]
    });
});

gulp.task('copy', ['sass'], function() {
  gulp.src(paths.html)
    .pipe(gulp.dest("./www/templates/"));

  gulp.src(paths.img)
    .pipe(gulp.dest("./www/img/"));

  gulp.src(paths.fonts)
    .pipe(gulp.dest("./www/fonts/"));

  //Copy Ionic libs
  gulp.src(["./src/bower_components/ionic/release/**"], {base: "./src/bower_components/ionic/release"})
    .pipe(gulp.dest("./www/bower_components/ionic/release/"));
});

gulp.task('default', ['watch', 'config', 'server', 'sass']);

gulp.task('build', ['sass', 'js', 'css', 'html', 'config', 'usemin', 'copy']);

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <!-- build:css css/style.css -->
    <link href="css/ionic.app.css" rel="stylesheet">
    <!-- endbuild -->

    <!-- build:js js/libs.js -->
    <!-- angularjs -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <!-- ionic -->
    <script src="bower_components/ionic/release/js/ionic.js"></script>
    <script src="bower_components/ionic/release/js/ionic-angular.js"></script>
    <!-- endbuild -->

    <!-- build:js js/app.js -->
    <!-- environment variables -->
    <script src="js/config.js"></script>
    <!-- app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers/controllers.js"></script>
    <script src="js/services/services.js"></script>
    <!-- endbuild -->

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
  </head>
  <body ng-app="starter" animation="slide-left-right-ios7">
    <!--
      The nav bar that will be updated as we navigate between views.
    -->
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-icon icon  ion-ios7-arrow-back">
        Back
      </ion-nav-back-button>
    </ion-nav-bar>
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
    <ion-nav-view></ion-nav-view>
  </body>
</html>

## package.json
{
  "name": "collarinteligente",
  "version": "0.0.0",
  "description": "Wags me",
  "devDependencies": {
    "cordova": "^3.5.0-0.2.4",
    "gulp": "^3.5.6",
    "gulp-sass": "^0.7.1",
    "gulp-concat": "^2.2.0",
    "gulp-minify-css": "^0.3.0",
    "gulp-rename": "^1.2.0",
    "bower": "^1.3.3",
    "gulp-util": "^2.2.14",
    "shelljs": "^0.3.0"
  }
}

## protractor.conf.js
exports.config = {
	// The address of a running selenium server.
	seleniumAddress: 'http://localhost:4444/wd/hub',

	// A base URL for your application under test. Calls to protractor.get()
	// with relative paths will be prepended with this.
	baseUrl: 'http://localhost:9000',

	// Capabilities to be passed to the webdriver instance.
	capabilities: {
		'browserName': 'chrome'
	},

	onPrepare: function() {
		browser.driver.manage().window().setSize(360, 700);
	},

	// Spec patterns are relative to the location of the spec file. They may
	// include glob patterns.
	specs: ['test/specs/*_spec.js'],

	// Options to be passed to Jasmine-node.
	jasmineNodeOpts: {
		showColors: true, // Use colors in the command line report.
	}
};
	node_modules/
	.nodenv-vars

	src/css
	src/bower_components
	src/js/config.js
	www/

	enviroments/*.json

	platforms/android/assets/www/
	platforms/android/CordovaLib/ant-build
	platforms/android/CordovaLib/ant-gen
	platforms/android/ant-build
	platforms/android/ant-gen
	platforms/android/CordovaLib/local.properties
	platforms/android/local.properties

	platforms/ios/www

	madbill-android-release-key.keystore
	Madbill.apk
	.idea
	{
	"name": "my-project",
	"devDependencies": {
	"ionic": "1.0.0-beta.13"
	}
	}
	var gulp = require('gulp');
	var concat = require('gulp-concat');
	var sass = require('gulp-sass');
	var minifyCss = require('gulp-minify-css');
	var rename = require('gulp-rename');
	var connect = require('gulp-connect');
	var ngConstant = require('gulp-ng-constant');
	var util = require('gulp-util');
	var protractorQA = require('gulp-protractor-qa');
	var usemin = require('gulp-usemin');
	var uglify = require('gulp-uglify');


	// enviroment variables
	var env = util.env.env \|\| 'development';
	var envPath = 'enviroments/' + env + '.json'
	var proxyApiUrl = process.env.PROXY_API_URL \|\| 'http://myproject.pow/api';

	var paths = {
	css: ['./src/css/*/.css'],
	js: ['./src/js/*/.js'],
	img: ['./src/img/*/'],
	fonts: ['./src/fonts/*/'],
	html: ['./src/index.html', './src/templates/*/.html'],
	sass: ['./scss/*/.scss']
	};

	gulp.task('usemin', ['copy'], function() {
	return gulp.src('./src/index.html')
	.pipe(usemin({
	css: [minifyCss(), 'concat'],
	js: [uglify({mangle: false}), 'concat']
	}))
	.pipe(gulp.dest('./www/'))
	});

	gulp.task('sass', function(done) {
	gulp.src('./scss/*.scss')
	.pipe(sass({
	errLogToConsole: true
	}))
	.pipe(gulp.dest('./src/css/'))
	.pipe(minifyCss({
	keepSpecialComments: 0
	}))
	.pipe(rename({ extname: '.min.css' }))
	.pipe(gulp.dest('./src/css/'))
	.pipe(connect.reload())
	.on('end', done);
	});

	gulp.task('js', function(done) {
	gulp.src(paths.js)
	.pipe(connect.reload())
	.on('end', done);
	});

	gulp.task('css', function(done) {
	gulp.src(paths.css)
	.pipe(connect.reload())
	.on('end', done);
	});

	gulp.task('html', function(done) {
	gulp.src(paths.html)
	.pipe(connect.reload())
	.on('end', done);
	});

	gulp.task('watch', function() {
	gulp.watch(paths.sass, ['sass']);
	gulp.watch(paths.js, ['js']);
	gulp.watch(paths.css, ['css']);
	gulp.watch(paths.html, ['html']);
	});

	gulp.task('config', function () {
	gulp.src(envPath)
	.pipe(ngConstant({
	name: 'project.config'
	}))
	.pipe(rename('config.js'))
	.pipe(gulp.dest('./src/js'));
	});

	gulp.task('server', function(){
	connect.server({
	root: ['src'],
	port: 9000,
	livereload: true,
	middleware: function(connect, o) {
	return [ (function() {
	var url = require('url');
	var proxy = require('proxy-middleware');
	var options = url.parse(proxyApiUrl);
	options.route = '/api';
	return proxy(options);
	})() ];
	}
	});
	});

	gulp.task('protractor-qa', function() {
	protractorQA.init({
	testSrc : [ 'test/specs/*/_spec.js', 'test/pages/*/_page.js'],
	viewSrc : [ 'www/index.html', 'www/templates/*/.html' ]
	});
	});

	gulp.task('copy', ['sass'], function() {
	gulp.src(paths.html)
	.pipe(gulp.dest("./www/templates/"));

	gulp.src(paths.img)
	.pipe(gulp.dest("./www/img/"));

	gulp.src(paths.fonts)
	.pipe(gulp.dest("./www/fonts/"));

	//Copy Ionic libs
	gulp.src(["./src/bower_components/ionic/release/**"], {base: "./src/bower_components/ionic/release"})
	.pipe(gulp.dest("./www/bower_components/ionic/release/"));
	});

	gulp.task('default', ['watch', 'config', 'server', 'sass']);

	gulp.task('build', ['sass', 'js', 'css', 'html', 'config', 'usemin', 'copy']);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<title></title>
	<!-- build:css css/style.css -->
	<link href="css/ionic.app.css" rel="stylesheet">
	<!-- endbuild -->

	<!-- build:js js/libs.js -->
	<!-- angularjs -->
	<script src="bower_components/angular/angular.js"></script>
	<script src="bower_components/angular-animate/angular-animate.js"></script>
	<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
	<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
	<!-- ionic -->
	<script src="bower_components/ionic/release/js/ionic.js"></script>
	<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
	<!-- endbuild -->

	<!-- build:js js/app.js -->
	<!-- environment variables -->
	<script src="js/config.js"></script>
	<!-- app's js -->
	<script src="js/app.js"></script>
	<script src="js/controllers/controllers.js"></script>
	<script src="js/services/services.js"></script>
	<!-- endbuild -->

	<!-- cordova script (this will be a 404 during development) -->
	<script src="cordova.js"></script>
	</head>
	<body ng-app="starter" animation="slide-left-right-ios7">
	<!--
	The nav bar that will be updated as we navigate between views.
	-->
	<ion-nav-bar class="bar-stable nav-title-slide-ios7">
	<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
	Back
	</ion-nav-back-button>
	</ion-nav-bar>
	<!--
	The views will be rendered in the <ion-nav-view> directive below
	Templates are in the /templates folder (but you could also
	have templates inline in this html file if you'd like).
	-->
	<ion-nav-view></ion-nav-view>
	</body>
	</html>
	{
	"name": "collarinteligente",
	"version": "0.0.0",
	"description": "Wags me",
	"devDependencies": {
	"cordova": "^3.5.0-0.2.4",
	"gulp": "^3.5.6",
	"gulp-sass": "^0.7.1",
	"gulp-concat": "^2.2.0",
	"gulp-minify-css": "^0.3.0",
	"gulp-rename": "^1.2.0",
	"bower": "^1.3.3",
	"gulp-util": "^2.2.14",
	"shelljs": "^0.3.0"
	}
	}
	exports.config = {
	// The address of a running selenium server.
	seleniumAddress: 'http://localhost:4444/wd/hub',

	// A base URL for your application under test. Calls to protractor.get()
	// with relative paths will be prepended with this.
	baseUrl: 'http://localhost:9000',

	// Capabilities to be passed to the webdriver instance.
	capabilities: {
	'browserName': 'chrome'
	},

	onPrepare: function() {
	browser.driver.manage().window().setSize(360, 700);
	},

	// Spec patterns are relative to the location of the spec file. They may
	// include glob patterns.
	specs: ['test/specs/*_spec.js'],

	// Options to be passed to Jasmine-node.
	jasmineNodeOpts: {
	showColors: true, // Use colors in the command line report.
	}
	};