前言

    简单说一下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项目不是吗～

自动完成 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的配置文件，我们现在只要对它进行一下配置就可以运行项目了，代码如下，已经加入注释：

// 引入gulp
var gulp = require('gulp');

// 引入gulp-plugins
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');

// 定义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的官方地址是：http://gulpjs.com/

    （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