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 导出的图片上传至CDNgulp.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']);