padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

├─app
│  │  index.html
│  │
│  └─user
│          index.html
│          login.html
│          register.html
│
├─css
│      reset.css
│      sprite.css
│      style.scss
│
├─images
│      logo.png
│      user_bg.jpg
│
└─js
    │  index.js
    │  login.js
    │  reg.js
    │
    └─lib
            touch.js
            utils.js

var path=require('path');
var webpack=require('webpack');
var fs=require('fs');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
var srcDir = path.resolve(process.cwd(), 'src');
//获取入口文件
function getEntry() {
    var jsPath = path.resolve(srcDir, 'js');
    var dirs = fs.readdirSync(jsPath);
    var matchs = [], files = {};
    var chunks=[];
    dirs.forEach(function (item) {
        matchs = item.match(/(.+)\.js$/);
        if (matchs) {
          chunks.push(matchs[1]);
            files[matchs[1]] = path.resolve(srcDir, 'js', item);
        }
    });
    return {
      files:files,
      chunks:chunks
    };
}
module.exports={
  devtool: 'eval-source-map',//配置生成Source Maps,方便出错时调试
  entry:getEntry().files,
  output:{
    path:path.join(__dirname,'dist/js/'),
    filename:'[name].js',
    chunkFilename: "[chunkhash].js",
    publicPath:'/js/'//设置devServer时需要
  },
  //生成静态服务器
  devServer: {
    contentBase: __dirname+'/dist',//本地服务器所加载的页面所在的目录
    colors: true,//终端中输出结果为彩色
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:3000
  },
  module:{
    loaders:[
      {
        test:/\.scss$/,
        loader:'css!sass'
      },
      {
        test:/\.css$/,
       loader: 'css'
      },
      {
        test: /\.(png|jpg|gif)$/,
        loader: 'url',
        query:{
          limit:8192,//小于80k的图片自动转成base64
          name:'../images/'+'[name].[ext]'
        }
       }
    ]
  },
  resolve:{
    alias:{
      //定义别名，方便引用
      zepto:__dirname+'/node_modules/webpack-zepto/index.js',//不使用webpack-zepto会报错
      touch:srcDir+'/js/lib/touch.js',
      utils:srcDir+'/js/lib/utils.js',
      scss:srcDir+'/css/style.scss',
      reset:srcDir+'/css/reset.css'
    }
  },
  plugins:[
    //公用模块，自动加载为全局变量
    new webpack.ProvidePlugin({
      $:'zepto',
      Zepto:'zepto'
    }),
    //将入口文件里的公用js提取出来并合并成common.js
    new CommonsChunkPlugin('common.js',getEntry().chunks)
     new uglifyJsPlugin({
       compress:{
          warnings:false
       }
     })
  ]
};

var gulp = require('gulp'),
    sass=require('gulp-sass'),
    gutil = require('gulp-util'),
    fileinclude = require('gulp-file-include'),
    webpack = require('webpack'),
    webpackConfig = require('./webpack.config.js'),
    spritesmith = require('gulp.spritesmith'),
    clean=require('gulp-clean'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload,
    minifyCss = require('gulp-minify-css'),
    buffer = require('vinyl-buffer'),
    merge = require('merge2'),
    concat = require('gulp-concat');
//实现自动刷新
gulp.task('browser-sync',function() {
    browserSync.init({
      //这里自动生成http://loaclhost:3000的静态服务器
        server: {
            baseDir: "./dist"
        }
    });
    gulp.watch('src/css/*',['sass']);//监听css改动，无需刷新就可以看到改动效果
    gulp.watch('src/app/**/*.html',['fileinclude'])
    .on('change', reload);//监听html文件改动，自动刷新
});
//拷贝图片
gulp.task('copy:images', function (done) {
    gulp.src(['src/images/**/*']).pipe(gulp.dest('dist/images')).on('end', done);
});
//用于在html文件中直接include文件
gulp.task('fileinclude', function (done) {
    gulp.src(['src/app/**/*.html'])
        .pipe(fileinclude({
          prefix: '@@',
          basepath: '@file'
        }))
        .pipe(gulp.dest('./dist'))
        .on('end', done);
});
gulp.task('sass', ['sprite'],function() {
   return  gulp.src(['src/css/*.scss', 'src/css/*.css'])
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(concat('style.min.css'))
    .pipe(minifyCss({
      keepSpecialComments: 0
    }))
    .pipe(gulp.dest('./dist/css/'))
    .pipe(browserSync.stream());//此处重要
});
//自动生成精灵图并生成公共样式
gulp.task('sprite', function () {
  var spriteData = gulp.src('src/images/icons/*.png').pipe(spritesmith({
    imgName: 'sprite.png',
    cssName: 'sprite.css',
    cssFormat: 'css'
  }));
  //生成的精灵图及样式分别存放在不同的目录下
  var imgStream=spriteData.img
  .pipe(buffer())
  .pipe(gulp.dest('./dist/images/'));
  var cssStream=spriteData.css
  .pipe(gulp.dest('./src/css'));
  return merge(imgStream, cssStream);
});
gulp.task('watch', function (done) {
    gulp.watch('src/js/**/*.js',['build-js'])
        .on("change", reload)
        .on('end', done);
    gulp.watch('src/images/**/*',['copy:images'])
        .on("change", reload)
        .on('end', done);
    gulp.watch('src/images/icons/*',['sass'])
        .on("change", reload)
        .on('end', done);
});
var myDevConfig = Object.create(webpackConfig);
var devCompiler = webpack(myDevConfig);
//引用webpack对js进行操作
gulp.task("build-js", ['fileinclude'], function(callback) {
    devCompiler.run(function(err, stats) {
        if(err) throw new gutil.PluginError("webpack:build-js", err);
        gutil.log("[webpack:build-js]", stats.toString({
            colors: true,
            progress:true
        }));
        callback();
    });
});
//清除目录
gulp.task('clean',function(done){
  gulp.src('dist')
  .pipe(clean())
  .on('end',done);
});
//发布
gulp.task('dev', [ 'build-js','browser-sync','copy:images','sass','watch']);

  "name": "nsyc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress --colors",
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
  },
  "keywords": [],
  "author": "vanboo",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.17.6",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "gulp": "^3.8.10",
    "gulp-clean": "^0.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-file-include": "0.13.7",
    "gulp-sass": "latest",
    "gulp-util": "~2.2.9",
    "gulp-watch": "4.1.0",
    "gulp.spritesmith": "^6.2.1",
    "merge2": "^1.0.2",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "vinyl-buffer": "^1.0.0",
    "webpack": "^1.13.3",
    "webpack-dev-server": "^1.16.2",
    "webpack-zepto": "0.0.1"
  }
}

<section class="modal-layer">
        <div class="address">
          ...
        </div>
</section>

.modal-layer{
    display: none;
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.77);
    z-index: 99;
  }
  .address{
      	position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
  }

.ios-bugfix{
        position: absolute;
        height: 100vh;
    }

{ index: {,
    '/path/to/test/fixtures/a.scss': {
        imports: ['b.scss'],
        importedBy: [],
    },
    '/path/to/test/fixtures/b.scss': {
        imports: ['_c.scss'],
        importedBy: ['a.scss'],
    },
    '/path/to/test/fixtures/_c.scss': {
        imports: [],
        importedBy: ['b/scss'],
    },
}}

import {Injectable} from '@angular/core';
import {Http,Response} from '@angular/http';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class dataService{
	data:Object[];//声明变量类型
	constructor(private http: Http) {}
	getData(sendData:Object){
		if (this.data) {
		   return Promise.resolve(this.data);
		 }
		return new Promise(resolve=>{
			this.http
			.post('requestUrl',sendData)
			.map((r:Response)=>r.json()) 
			.subscribe(data => {
		        this.data = JSON.parse(data.result);//此处对获取到的数据类型的处理特别重要，必须为Object
		        resolve(this.data);
	      });
		})
	}
}

import { Component,OnInit  } from '@angular/core';
import {dataService} from '../../service/service';
@Component({
  selector: 'page-home',
  providers:[dataService],//在providers添加引入的service
  templateUrl: 'home.html'
})
export class HomePage implements OnInit {
	data:Object[];
  constructor(
  public navCtrl: NavController,
  private dataService:dataService
  ){
  }
  ngOnInit():void{
  	var sendData={
  		
  	};
  	this.dataService.getData(sendData)
    .then(data=>{
      this.data=data;
    })
  	}
}

getData(sendData:Object,method:string):Observable<any>{
		return this.http
		.post('requestUrl',sendData)
		.map((r:Response)=>r.json().result);
	});
	}

this.dataService.getData(sendData)
  	.subscribe(
  		homeData=>this.data=Json.parse(homeData),
  		err=>{
  			console.log(err);
  		});
  	}

import { Injectable } from '@angular/core';

@Injectable()
export class myService {
}

 ngOnInit(): void {
    this.method();
  }

getHeroes(): Promise<Hero[]> {
  return Promise.resolve(HEROES);
}

getHeroes(): void {
  this.heroService.getHeroes().then(heroes => this.heroes = heroes);
}

var fd = new FormData();
     window.resolveLocalFileSystemURL(attachment.img, function(fileEntry) {
         fileEntry.file(function(file) {
             var reader = new FileReader();
                 reader.onloadend = function(e) {
                      var imgBlob = new Blob([ this.result ], { type: "image/jpeg" } );
                      fd.append('attachment', imgBlob);
                      fd.append('uuid', attachment.uuid);
                      fd.append('userRoleId', 12345);
                      console.log(fd);
                      //post form call here
                 };
                 reader.readAsArrayBuffer(file);

         }, function(e){$scope.errorHandler(e)});
    }, function(e){$scope.errorHandler(e)});

var win = function (r) {
    console.log("Code = " + r.responseCode);
    console.log("Response = " + r.response);
    console.log("Sent = " + r.bytesSent);
}

var fail = function (error) {
    alert("An error has occurred: Code = " + error.code);
    console.log("upload error source " + error.source);
    console.log("upload error target " + error.target);
}

var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURL.substr(fileURL.lastIndexOf('/') + 1);
options.mimeType = "text/plain";

var params = {};
params.value1 = "test";
params.value2 = "param";

options.params = params;

var ft = new FileTransfer();
ft.upload(fileURL, encodeURI("http://some.server.com/upload.php"), win, fail, options);

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

brew install bash-completion

cd ~
nano .bash_profile

source ~/.git-completion.bash
if [ -f $(brew --prefix)/etc/bash_completion ]; then
  . $(brew --prefix)/etc/bash_completion
fi