Ionic environment configuration, ionic Environment

Ionic environment configuration, ionic Environment
Ionic environment configuration Summary

This article focuses on the installation and creation of ionic, the establishment of the gulp automation environment and server, and the packaging and Simulation of Android.

Install ionic

Install node. js, open the command line, and install cordova and ionic

$ npm install -g cordova ionic

Create a project

Create a project and enter

$ ionic start myApp tabs

Create a page with bottom labels

You can also enter

$ ionic start myApp blank

Create a blank page

You can also enter

$ ionic start myApp sidemenu

Create a page with sidebar

Install gulp

The project uses gulp for automated project construction and enters

npm install -g gulpnpm installgulp

In this way, we have installed gulp and some modules.

• Gulp-concat: Merge files
• Gulp-rename: rename a file
• Gulp-sass: sass supported
• Gulp-minify-css: compressing css

To configure a web server, enter

npm install gulp-connect

Modify the gulpfile. js File

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']);

Modify the index.html File

   Todo    Projects 

Enter http: // localhost: 8080/www/in the browser to see the effect.