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

本文只是对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
2
3
4
5
6
7
8
9
10
11
12
13
14
  
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14

---

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'));
});

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）
}
  
  
1

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'));
}); 

如此打包后，便能到你上传到的bucket中找到相关文件了