gulp实现静态资源压缩，打包，上传总结

清疚 2022-05-21 13:43 348阅读 0赞

本文只是对gulp构建工具的一些常用功能的总结。   
1.实现文件（css，js，image）压缩   
2.实现文件合并   
3.版本控制   
4.上传七牛cdn   
引用插件如下：

var gulp = require('gulp'),
        eslint = require('gulp-eslint'),
        minify = require('gulp-minify-css'),//css压缩
        concat = require('gulp-concat'),//文件合并
        uglify = require('gulp-uglify'),//js压缩
        rename = require('gulp-rename'),//文件重命名
        imagemin = require('gulp-imagemin'),//压缩图片
        clean = require('gulp-clean'),//清空文件夹
        rev = require('gulp-rev'),//更改版本号
        revCollector = require('gulp-rev-collector');//gulp-rev插件，用于html模板更改引用路径
        -----------------------------------------
        更新-------------------------------------
        upload = require('gulp-qndn').upload,//七牛上传
        cdn = require('gulp-cdn-replace'),//替换CDN链接

--------------------

> **1.文件压缩**

**gulp文件压缩使用插件如下：**

css文件压缩：**`gulp-minify-css`**

js文件压缩：**`gulp-uglify`**

image文件压缩：**`gulp-imagemin`**

**配置如下：**

//压缩css
    gulp.task('minifyCss', function(){ 
        return gulp.src('public/css/*.css')
            .pipe(rename({suffix: '.min'}))
            .pipe(minify())
            .pipe(concat('main.css'))
            .pipe(gulp.dest('dist/css'));
    });
    
    //压缩js
    gulp.task('minifyJs', function(){ 
        return gulp.src('public/js/*.js')
            .pipe(uglify())
            .pipe(gulp.dest('dist/js'));
    });
    
    //压缩图片
    gulp.task('minifyImg', function(){ 
        return gulp.src('public/img/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/image'));
    });

**gulp.src()**里面是需要压缩文件的目标地址   
**gulp.dest()**里面是压缩文件存放地址   
**rename**可以更改压缩文件的名字，根据需要进行设置

--------------------

> **2.文件合并**

gulp-concat实现文件合并，以合并css文件为例

gulp.task('minifyCss', function(){ 
        return gulp.src('public/css/*.css')
            .pipe(minify())
    
            .pipe(concat('main.css'))
    
            .pipe(gulp.dest('dist/css'));
    });

**concat()**里面是合并后文件名

> **3.版本**

gulp.task('minifyCss', function(){
        return gulp.src('public/css/*.css')
            // .pipe(rename({suffix: '.min'}))
            .pipe(minify())
            .pipe(concat('main.css'))
            .pipe(rev())
            .pipe(gulp.dest('dist/app/css'))
            .pipe(rev.manifest())
            .pipe(gulp.dest('dist/css'));
    });

**rev.manifest()**会生成一个manifest.json文件

.pipe(rev())会自动在原先文件名上添加随机序

--------------------

> **4.自动上传cdn（七牛）**

首先，你要有七牛账号，因为需要七牛的accesskey等信息

var qnOptions = {
        accessKey: '**',
        secretKey: '**',
        bucket: '存放资源的容器名',
        domin:'你的cdn链接',
        delete: false（每次上传，如果你要删除同名文件就改为true）
    }

accessKey和secretKey都能在账号中找到

以上传压缩合并后js文件为例

gulp.task('minifyJs', function(){
        return gulp.src('public/js/*.js')
            .pipe(uglify())
            .pipe(concat('main.js'))
            .pipe(upload({qn: qnOptions}))
            .pipe(gulp.dest('dest/js'));
    });