ionic框架前端生产环境的简单部署

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前端构建变得非常简单，还不快去学学