gulp-cdn-service
usage
var cnd = require (' gulp-cdn-service' );
var gulp = require (' gulp' );
var path = require (' path' );
gulp .task (' demo' ,function (){
return gulp .src (' images/**/*.*' )
.pipe (cnd ({
name: ' qiniu' ,
config: {
ACCESS_KEY: " xxxxx" ,
SECRET_KEY: " xxxxx" ,
bucket: " koala-program-upload"
},
debug: true , //default: true
processPath: process .cwd (), //default: process.cwd()
removePrefix: ' images'
}))
})
gulp .task (' default' ,[' demo' ]);
gulp-cdn-service 结合 gulp-custom-css-urls 使用例子
var gulp = require (' gulp' );
var customCssUrls = require (' gulp-custom-css-urls' );
var cdnService = require (' gulp-cdn-service' );
var clean = require (' gulp-clean' );
var path = require (' path' );
//提取替换css中的图片
gulp .task (' customCSSUrl' ,function (){
return gulp .src (' assets/**/*.css' )
.pipe (customCssUrls ({
//静态文件相对于站点根目录的路径
staticfile_relative_website_rootpath: ' assets/' ,
//是否输出CSS中匹配的图片
outputImage: true ,
//输出的图片路径,默认是“./.gulp_dist_output_images”
outputImage_path: ' ./.gulp_dist_output_images' ,
//对图片路径进行处理
modify : function (imageRelativePath , cssFilePath , imageRelativeWebsiteRootPath , imgInfo ) {
// 让CSS中图片的地址转化为相对于站点的地址,比如:/images/demo/custom_1782_530.3503865059.png
return path .join (imageRelativeWebsiteRootPath, path .basename (imageRelativePath));
},
//为图片地址添加前缀,通常为CDN根目录地址
prepend: ' http://oaytcec7g.bkt.clouddn.com' ,
}))
.pipe (gulp .dest (' dist/' ));//替换图片地址后CSS的输出路径
});
//将task customCSSUrl 导出的图片上传至CDN
gulp .task (' uploadToCdn' , [' customCSSUrl' ], function () {
return gulp .src (' ./.gulp_dist_output_images/**/*' )
.pipe (cdnService ({
//CDN名字
name: ' qiniu' ,
//CDN的配置信息
config: {
ACCESS_KEY: " *****" ,//七牛ACCESS_KEY
SECRET_KEY: " *****" ,//七牛SECRET_KEY
bucket: " koala-program-upload" //七牛的bucket名字
},
//是否开启图片上传至CDN的log
debug: true , //default: true
//需要去掉的图片地址前缀
removePrefix: ' ./.gulp_dist_output_images'
}))
});
//清除task customCSSUrl 导出的图片
gulp .task (' clean' , [' uploadToCdn' ], function () {
return gulp .src (' ./.gulp_dist_output_images' )
.pipe (clean ())
});
//构建任务
gulp .task (' default' ,[' customCSSUrl' , ' uploadToCdn' , ' clean' ]);