精华 前端生产环境的简单部署
发布于 1年前 作者 zxj963577494 5292 次浏览 来自 分享

1. 效果对比

1.1 开发环境

开发环境.png

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

1.2 部署环境(生产环境)

部署环境.png

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 以上的 2015-06-24_110122.png

5. 结语

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

15 回复

占个位置先,顶起,先试一下

原来你是看了这个才搞的啊!@zhangyz

这样app加载的时候,会不会就会快点?

好文章,赞分享,同顶!

@sj512567645 我是前端新人,按步骤试了一下,会报错,还没找到原因

LZ 请教一下 我使用了部分 代码 Js 合并后 是报错的,请指教 屏幕快照 2015-09-10 上午10.21.43.png 屏幕快照 2015-09-10 上午10.22.24.png 屏幕快照 2015-09-10 上午10.22.48.png

回到顶部