ionic环境配置

ionic环境配置摘要

这篇文章主要讲讲ionic的安装和新建项目，gulp自动化环境和服务器的搭建，安卓的打包和模拟。

安装ionic

安装node.js，打开命令行，安装cordova和ionic

$ npm install -g cordova ionic

新建项目

新建项目，在命令行输入

$ ionic start myApp tabs

新建一个带底部标签的页面



也可以输入

$ ionic start myApp blank

新建一个空白页面



还可以输入

$ ionic start myApp sidemenu

新建一个带侧边栏的页面

安装gulp

项目用到gulp来做自动化项目构建，在nodejs命令行输入

npm install -g gulpnpm installgulp

这样就安装了gulp和一些模块
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-sass: 支持sass
gulp-minify-css: 压缩css

如果需要配置一个web服务器，在命令行输入

npm install gulp-connect

修改gulpfile.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 paths = {sass: ['./scss/**/*.scss']};gulp.task('sass', function(done) {gulp.src('./scss/ionic.app.scss').pipe(sass()).pipe(gulp.dest('./www/css/')).pipe(minifyCss({keepSpecialComments: 0})).pipe(rename({ extname: '.min.css' })).pipe(gulp.dest('./www/css/')).on('end', done);});gulp.task('watch', function() {gulp.watch(paths.sass, ['sass']);});gulp.task('webserver', function() {connect.server();}); gulp.task('default', ['webserver','sass','watch']);

修改index.html文件

Todo

Projects

在浏览器输入http://localhost:8080/www/，就可以看到效果了。