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链接 1234567891011121314 1234567891011121314

---

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中找到相关文件了