gulp实现静态资源压缩,打包,上传总结
来源:互联网 发布:开淘宝保证金怎么退 编辑:程序博客网 时间:2024/06/05 14:55
本文只是对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
配置如下:
//压缩cssgulp.task('minifyCss', function(){ return gulp.src('public/css/*.css') .pipe(rename({suffix: '.min'})) .pipe(minify()) .pipe(concat('main.css')) .pipe(gulp.dest('dist/css'));});//压缩jsgulp.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'));});
如此打包后,便能到你上传到的bucket中找到相关文件了
0 0
- gulp实现静态资源压缩,打包,上传总结
- gulp 静态资源打包 压缩 合并
- gulp系列之 静态资源打包压缩合并MD5版本控制
- 用mvn实现打包时静态资源压缩
- 转战gulp,实现前端静态资源的压缩,加MD5戳,替换引用,加CDN前缀
- gulp实现前端静态资源的压缩,加MD5戳,替换引用,加CDN前缀
- 使用gulp实现静态资源版本号替换
- gulp打包压缩
- gulp下静态资源的合并、压缩、MD5后缀
- gulp 几个用法,打包,压缩,监听文件
- npm scrpit/node实现静态资源(js/css)复制重命名(版本号)、压缩tar.gz、上传至服务器
- Gulp:静态资源(css,js)版本控制
- angular配合gulp进行代码打包和压缩
- 关于静态资源压缩技术
- YuiCompress静态资源压缩详解
- 关于静态资源压缩技术
- webpack对静态资源打包
- Gulp针对F1平台的前端资源打包说明
- linux下安装lnmp环境
- Spring整合Quartz
- php提交表单不刷新页面
- 2016 Multi-University Training Contest 1 1004 GCD
- 欲先攻其事必先利其器 (第三方资源篇)
- gulp实现静态资源压缩,打包,上传总结
- linux中~和斜杠的区别
- [从头读历史] 第311节 星球战争 BC2299 至 BC2200(公元前23世纪)
- POJ 2559 Largest Rectangle in a Histogram 单调栈
- 可拖动的进度条
- yiche科技java面试题
- 游戏策划一类的,非常好
- ODS浅析
- Codeforces-Round-#363-Launch of Collider