1. 效果对比

1.1 开发环境

css+js+lib文件大小为好多M :)

1.2 部署环境(生产环境)

css+js+lib文件大小约为800K

文件大小:好多M–>800K(多少自己试下),文件数目:N多–>4个

2. gulp实现

打开项目下的gulpfile.js文件

var gulp = require('gulp');

// 引入gulp组件(插件)
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var watch = require('gulp-watch');
var jshint = require('gulp-jshint');
var minifyCss = require('gulp-minify-css');
var notify = require('gulp-notify');
var concat = require('gulp-concat');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var gulpif = require('gulp-if');
var clean = require('gulp-clean'); //index.html css、js合并压缩
gulp.task('index', function () {
var assets = useref.assets();
return gulp.src('app/index.html')
.pipe(assets)
.pipe(gulpif('*.js', uglify()))
.pipe(gulpif('*.css', minifyCss()))
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('www'));
}); // 语法检查
gulp.task('jshint', function () {
return gulp.src('app/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); // 复制文件
gulp.task('copy', function () {
gulp.src('app/fonts/*')
// 目标地址
.pipe(gulp.dest('www/fonts/'))
gulp.src('app/templates/**')
// 目标地址
.pipe(gulp.dest('www/templates/'))
gulp.src('app/img/*')
// 目标地址
.pipe(gulp.dest('www/img/')) }); // 清空图片、样式、js
gulp.task('clean', function () {
return gulp.src(['www/css/*', 'www/js/*', 'www/img/*', 'www/lib/*', 'www/templates/*'], {read: false})
.pipe(clean({force: true}));
}); // 注册缺省任务
gulp.task('default', ['jshint', 'clean', 'index', 'copy']);

3. 实现部分

打开app目录中的index页面:

CSS部分

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">

添加上注释,如下:

<!-- build:css css/app.min.css -->
link href="css/bootstrap.min.css" rel="stylesheet">
<link href="lib/ionic/css/ionic.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- endbuild -->

直接通过注释来合并文件,注释解释: build:合并类型 合并后文件存放路径

JS部分

JS部分最好是放在body结尾标签之前,先让页面渲染出来,再加载JS,这样不会让JS阻塞html的渲染

<!-- build:js js/app.min.js -->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/router.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/services.js"></script>
<script type="text/javascript" src="js/filter.js"></script>
<script type="text/javascript" src="js/directives.js"></script>
<script type="text/javascript" src="js/pluginServices.js"></script>
<script type="text/javascript" src="js/commonServices.js"></script>
<!-- endbuild -->

这样这么多的JS也合并成为了一个app.min.js

4. 最后一步

执行gulp default命令,如果你是 WebStorm 9 以上的

5. 结语

基本就是这样,有了gulp前端构建变得非常简单,还不快去学学

ionic框架前端生产环境的简单部署的更多相关文章

  1. 在生产环境使用Docker部署应用

    导读 Docker现在越来越流行,但是真正在生产环境部署Docker还是个比较新的概念,还没有一个标准的流程.作者是ROR的程序员,作者结合平时的部署经验,联系Docker的特点,向大家分享了其在生产 ...

  2. 配置Django框架为生产环境的注意事项(DEBUG=False)

    问题描述: Django1.10版本中框架中settings.py配置文件 配置文件settings.py配置了下面两项: DEBUG= False ALLOWED_HOSTS = ['*'] #这样 ...

  3. legend3---Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解(Vagrant + Homestead)

    legend3---Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解(Vagrant + Homestead) 一.总结 一句话总结: 1.安装的话就是下载好git,va ...

  4. .NET持续集成与自动化部署之路第三篇——测试环境到生产环境的一键部署策略(Windows)

    Jenkins测试环境到生产环境的一键部署策略(Windows) 一.前言     前面我们已经初步实现了开发集成环境.测试环境的持续集成(自动化构建.自动化测试.自动化部署).但生产环境自动化部署迟 ...

  5. 生产环境中CentOS7部署NET Core应用程序

    NET Core应用程序部署至生产环境中(CentOS7) 阅读目录 环境说明 准备你的ASP.NET Core应用程序 安装CentOS7 安装.NET Core SDK for CentOS7. ...

  6. redis的生产环境中的部署?

    使用的是redis cluster 10台机器,5台机器部署了redis主实例,另外5台机器部署了redis 的从实例,每个主实例挂了一个从实例,5个节点对外提供读写服务,每个节点的读写高峰qps可能 ...

  7. Windows 7/8/10 系统下Laravel框架的开发环境安装及部署详解(Vagrant + Homestead)

    注意! laravel/homestead box项目地址已经不再是原来的 https://atlas.hashicorp.com/laravel/boxes/homestead 而已经变更成 htt ...

  8. Django在生产环境中的部署

    基本思路 1.方案:Nginx+uwsgi 这样大体的流程是:nginx作为服务器最前端,负责接收client的所有请求,统一管理.静态请求由Nginx自己处理.非静态请求通过uwsgi传递给Djan ...

  9. 前端代码tomcat下简单部署

    软件 filezilla [ftp]  +  visionapp Remote Desktop[远程桌面] (前提:前后端代码分离,如前端angular实现) ftp上传到机器{软件 filezill ...

随机推荐

  1. 阿里云linux的nginx下面配置多站点

    假设有服务器ip为 114.214.85.35 域名1为  www.jieshendada.cn 域名2为 www.jieshenxiaoxiao.cn 1.首先打开nginx域名配置文件存放目录:/ ...

  2. 关于ASP.Net 4.0的ClientID

    我们知道因为在原来的ASP.NET应用程序中使用服务端控件在生成ClientID的时,是很难控制的,特别是在嵌套的控件的时候,比如在多个嵌套Repeater中要控制某一个控件生成的html的ID属性, ...

  3. Nginx 反向代理配置实例(转)

    user www www; worker_processes ; error_log logs/error.log notice; pid logs/nginx.pid; worker_rlimit_ ...

  4. 经典shell面试题整理

    一.取出/etc/passwd文件中shell出现的次数 问题:下面是一个/etc/passwd文件的部分内容.题目要求取出shell并统计次数,shell是指后面的/bin/bash,/sbin/n ...

  5. 请写一个C函数,判断处理器是大端存储还是小端存储,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1

    [解答] int checkCPU() { { union w { int a; char b; }c; c.a=1; return (c.b==1); } } [剖析] 嵌入式系统开发者应该对Lit ...

  6. [欢度国庆]为什么我们今天还要学习和使用C++?(转载)

    在各种新的开发语言层出不穷的今天,在Java和C#大行其道今天,我们为什么还要学习和使用C++?现在学习C++将来有用吗?学习C++要花费那么多时间和精力,这一切都值得吗?现在学习C++有钱途吗? 这 ...

  7. CentOS 7 之Shell学习笔记

    脚本是个永恒的话题,以前Dos下面也有Shell编程这一说的,比如说BAT文件有人写的好的话,也是瞬间速度变高大上.Linux下面这个应该更占比重了.我看到园子里有位园友做了一个Linux Shell ...

  8. Mac下安装MySQL-python

    前提系统中已安装python.mysql数据库: 第一步(终端输入): $ export PATH=$PATH:/usr/local/mysql/bin 第二步(终端输入): $ sudo pip i ...

  9. [Python 3.x 官方文档翻译]The Python Tutorial Python教程

    Python is an easy to learn, powerful programming language. It has efficient high-level data structur ...

  10. 文本框Edit

    支持换行就要把 Multiline 设置为TRUE Edit窗口是用来接收用户输入最常用的一个控件.创建一个输入窗口可以使用成员函数: BOOL CEdit::Create( LPCTSTR lpsz ...