前言

    简单说一下Ionic是一款让你可以通过HTML+CSS+Javascript做出原生应用的前端框架。内部集成了Sass以及AngularJS，可以说这个框架的目的就是让App的开发像Web一样纯粹。

    项目地址：

    正文

    这里我用的环境是Linux Deepin 2013，Ionic本身可以将项目打包为Android或者IOS安装程序，不过我这里比较懒还没有配置，所以开发过程中使用Web开发是一样的～只要你把窗口变小一些就好了。

    首先确保你安装了Nodejs以及Npm,具体安装方法自行Google或者查看我的博客都可以～

    然后开始Ionic的安装：

（1）

$ npm install -g cordova ionic

    这一步一般没有什么问题，如果有只能说明你npm没安装好，如果出错仔细看看是不是Linux系统下权限问题造成的，用sudo提权。

（2）

 $ ionic start myApp tabs $ ionic start myApp blank $ ionic start myApp tabs $ ionic start myApp sidemenu

    上面4个命令是并行的，执行一个就可以。Inoic提供了几个不同的模板为项目初始化用，你可以根据需求选择，它会在当前命令目录下创建myApp文件，并将对应代码Download到文件夹中。

（3）

    如果安装官网的介绍下一步就可以运行了，你可以在IOS或者Android模拟器上看到效果，不过一个需要Xcode，另一个要配置Android开发环境，如果你为了省事，可以忽略这两种方式，通过gulp配置一个web项目，效果是一样的，只不过运行在浏览器中，不过我们开发的就是web项目不是吗～

    简单说一下gulp.js，对它的定义应该是比Grunt更轻量级的自动化项目构建工具，如果了解Grunt的亲就知道它的配置真是不简单，我是感觉略显庞大了，学习有一定成本。但是Grunt又太强大了，现在Github上大多数JS项目都用Grunt去自动完成 javascript/coffee/sass/less 等文件的的测试、检查、合并、压缩、格式化、部署文件生成，并监听文件在改动后重复指定的这些步骤。

    Grunt将这些功能都分解成任务，也是得益于这种基于任务的设计模式，这些步骤可以很好的分类执行。

    先说一下安装，gulp也是基于Nodejs的，所以确保npm已安装，具体的配合Inoic的使用下面会讲到：

npm install -g gulp

    进入到myApp文件夹，可以到看到package.json配置文件：

{  "name": "ionic-project",  "version": "1.0.0",  "description": "An Ionic project",  "dependencies": {    "gulp": "^3.5.6",    "gulp-sass": "^0.7.1",      // sass支持      "gulp-concat": "^2.2.0",    // 合并文件    "gulp-minify-css": "^0.3.0", // 压缩css    "gulp-rename": "^1.2.0"    // 文件重命名  }}

    通过npm安装依赖，gulp的一些plugins就搞定了，我在上面加了注释表明插件的作用。

    如果配置的web服务器需要自动刷新，可以在上面加上“gulp-connect"插件，或者直接执行命令安装：npm install gulp-connect.

    (4)

    现在我们看到myApp项目中，有一个gulpfile.js文件，这是gulp的配置文件，我们现在只要对它进行一下配置就可以运行项目了，代码如下，已经加入注释：

// 引入gulpvar gulp = require('gulp');// 引入gulp-pluginsvar 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');// 定义sass文件路径var paths = {  sass: ['./scss/**/*.scss']};/*  创建sass任务，它会监听./scss/ionic.app.scss里面的文件变化，然后编译为css到./www/css/目录.  然后进行css压缩，将压缩后的文件重命名为min.css结尾，然后还是放到./www/css/目录下。  */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);});//watch任务，监听文件变化gulp.task('watch', function() {  gulp.watch(paths.sass, ['sass']);  gulp.watch(['./www/*.html'], ['html']);});// connect任务，监听项目变化后自动刷新项目gulp.task('connect', function() {  connect.server({    root: 'www',    livereload: true  });}); gulp.task('html', function () {  gulp.src('./www/*.html')    .pipe(connect.reload());});// default默认任务，从此开始执行gulp.task('default', ['connect','sass','watch']);

        gulp.js的官方地址是：

    （5）

    最后在myApp文件中执行gulp即可：

[gulp] Using gulpfile ~/Code/myApp/gulpfile.js[gulp] Starting 'connect'...[gulp] Server started http://localhost:8080[gulp] LiveReload started on port 35729[gulp] Finished 'connect' after 16 ms[gulp] Starting 'sass'...[gulp] Starting 'watch'...[gulp] Finished 'watch' after 7.26 ms[gulp] Finished 'sass' after 360 ms[gulp] Starting 'default'...[gulp] Finished 'default' after 5.54 μs