zoukankan      html  css  js  c++  java
  • ionic环境配置

    ionic环境配置摘要

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

    安装ionic

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

    $ npm install -g cordova ionic

    新建项目

    新建项目,在命令行输入

    $ ionic start myApp tabs

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

    image

    也能够输入

    $ ionic start myApp blank

    新建一个空白页面

    image

    还能够输入

    $ ionic start myApp sidemenu

    image

    新建一个带側边栏的页面

    安装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/,就能够看到效果了。

     image

  • 相关阅读:
    DataTable轉EXCEL 3/21
    中風預防知識
    unable to convert mysql date/time value to system.data.time 11/14
    win8 获得地理坐标 GIS
    页面嵌套 GIS
    win8 metro 弹出一个部分 GIS
    正则表达式基础 之 ? GIS
    windows phone pivot 开发过程中的使用心得 GIS
    线程不安全 GIS
    线程基础知识 GIS
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/7009499.html
Copyright © 2011-2022 走看看