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前端構建變得很是簡單，還不快去學學