初试gulp输出生产文件

最新推荐文章于 2022-09-17 01:00:00 发布

chumo6161

最新推荐文章于 2022-09-17 01:00:00 发布

阅读量298

点赞数

文章标签：前端 ViewUI

原文链接：https://my.oschina.net/yespsy/blog/825090

版权

#什么是gulp 一个前端自动化工具，百度一下有很多介绍

很久以前就知道这些前端工具，如grunt,gulp,bower等，因为自己做的项目都是内部项目没有太多这方面的要求，所以也就没有用上。最近的一个项目里，因为引用的JS文件有点多，为了减小文件体积，减少IO请求数，就用上了gulp。

#JS压缩 JS压缩前后体积相差很多，大概会缩小到原来的20~40%，如果文件里有大量注释，那压缩率就更可观。全用大名端端的uglify可以压缩JS文件，在gulp下可以使用插件gulp-uglify

var miniJS  = require('gulp-uglify'); 
gulp.task('mini-js', function() {
    return gulp.src('src/js/**')
        .pipe(miniJS())
        .pipe(gulp.dest('dist/js/'))
})

#合并文件把压缩后JS再合并成一个all in one文件，大大减小IO请求数。在我的项目里，原来大概有30+个JS文件的此用，压缩前有5M，压缩后1M，再合并到一个文件中，在传输过程中再开启gzip，仅仅传输了320k左右，收益很可观。压缩后截图

上图为模拟3G的情况下传输 #文件插值因为开发时需要使用的是未缩的js文件，方便查BUG及看源码，而另一方面，上线后需要使用的是压缩及合并后的代码。当然，手工一个个替换也可以，但作为一名工程师，一定会有更好的解决方法。使用插件gulp-inject* 在我的home.html有代码如下

<!DOCTYPE html>
<html>
<head>
    <!-- 3rdPartJs:js -->
    <!-- endinject -->
</head>
<body ng-app="home" ng-hint>
<div ui-view></div>
</body>
</html>

使用gulp运行任务

gulp.task('injectDevelopJS', function() {
  return gulp.src('./src/home.html')
    .pipe(
        inject(
            gulp.src('./src/js/*.js'),{relative: true,name:'3rdPartJs'}
        )
    )
    .pipe(gulp.dest('./src/'));
});

会把目录*./src/js*下的所有js文件插入到3rdPartJs这个争位标签之间，效果如下

<!DOCTYPE html>
<html>
<head>
    <!-- 3rdPartJs:js -->
    <script src="src/js/aaa.js"></script>
    <script src="src/js/bbb.js"></script>
    <script src="src/js/ccc.js"></script>
    ...
    <!-- endinject -->
</head>
<body ng-app="home" ng-hint>
<div ui-view></div>
</body>
</html>

#编写插件代码处理特定需求因为我的项目里没有使用bower管理js文件，主要原因是国内下载太慢了。所以的JS文件都是放在src/js目录下的。在这里，我的需求是，输出生产版本时，有.min.js的使用.min.js，没有.min.js的，用自己压缩，最后把所有文件合并到一个.min.js文件

var gulp = require('gulp');
var concat = require('gulp-concat');
var through = require('through2');
var UglifyJS = require('uglify-js');
//拼接所有第三方JS到all3rdPartJsLib.js。有.min.js的就使用，没有就自动压缩
gulp.task('release3rdPartJs',function(){
  var ret = getJsLibPaths(jsLibs); // 注1
  // ret eg: ['aa.js','bb.min.js','cc.js']
  return gulp.src(ret)
        .pipe(function(){
            return through.obj(
                function(file,enc,cb){
                    if(file.path.endsWith(".min.js")){
                        // 对.min.js的文件不处理
                        this.push(file);
                        return cb();
                    }else{
                        // 对.js的文件压缩
                        var result = UglifyJS.minify(file.contents.toString(),{fromString: true}).code.toString();
                        file.contents = new Buffer(result);
                        this.push(file);
                        cb();
                    }
                });
            }())
        .pipe(concat('all3rdPartJsLib.min.js')) // 合并到一个.min.js
        .pipe(gulp.dest(distPath+'js/'));
});

注1：因为JS文件是有顺序的，所以项目维护了一份数组，['aaa','bbb','ccc']。当目录下有aaa.min.js有直接使用，没有就先把aaa.js压缩。

#资源

Gulp中文网内容少了点，但作为入门，看中文是最快的
前端构建工具gulpjs的使用介绍及技巧
npmjs.com 基本所有的插件都有详细的说明文档，花个十来二十分钟没有不会用的
Gulp：插件编写入门
咸鱼老弟的gulpUsage 新手可以下载这个项目快速体验

转载于:https://my.oschina.net/yespsy/blog/825090

chumo6161

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初试gulp输出生产文件

#什么是gulp一个前端自动化工具，百度一下有很多介绍很久以前就知道这些前端工具，如grunt,gulp,bower等，因为自己做的项目都是内部项目没有太多这方面的要求，所以也就没有用上。最近的一个项目里，因为引用的JS文件有点多，为了减小文件体积，减少IO请求数，就用上了gulp。#J...
复制链接

扫一扫