项目说明
这个gulp插件用来实现乐活动前端页面资源文件的路径修改和上传。就是把所有用的资源文件(js, css, image等)上传到又拍云上。 并把这个文件在项目中的引用改为又拍云的绝对路径。
安装
npm install gulp-cloud-nine --save-dev
把一下代码加入你前端项目的gulpfile.js里。
var gulpCloudNine = require('gulp-cloud-nine');
gulp.task('online', function () {
var gulpCN = gulpCloudNine({
upaiyun: {
bucket: '****',
username: '****',
password: '****'
},
optimizeImages: true, // 是否压缩图片 默认为true,用来因对图片压缩会出错的情况
distDir: 'dist', // 你项目的发布目录
branch: 'online' // 替换cdn路径后会推送的分支名
});
gulpCN.run();
});
其中distDir是你项目自己的发布目录。 这个插件只是用来改路径,并没有打包压缩等功能。 所以项目里你自己完成压缩工作并放到你自己的dist目录。
运行
根据上面安装说明的代码,我们在gulp里注册了一个online任务,运行online任务就可以生成cdn化的文件,并推送到远程online分支。如果你修改branch参数为test,则会推送到test分支。
上面的代码运行后,会在项目的远程仓库里生成online分支,比如我项目的git地址是git@git.in.codoon.com:fxd/gulp-cloud-nine.git
.
gulp cloudNine:push
运行后就可以把这个项目通过npm包的形式安装到其他项目里。比如我们通常把fxd-lei-page下的项目都这样做,然后安装到cloud-nine项目里。对应上面写到我的git地址,在cloud-nine项目的根目录运行下面的命令就可以把它安装进去。
npm install git+ssh://git@git.in.codoon.com:fxd/gulp-cloud-nine.git#online --save
这样就把我项目的online分支安装到了cloud-nine里
切记在package.json里安装自己项目的前端模块时,不要手动添加,而是使用npm install去添加。修改tag号才是手动去修改(目前)。
已知Bug
资源文件的路径问题
gulp cloudNine:update 时会处理项目里的资源文件路径。如果项目的里资源文件定位模式比较特殊。比如不是相对于引用文件定位或者项目根目录定位,就会出错。
比如已知能处理正确的方式是。假设我的目录结构如下,test就是我们的根目录。
test/
image/test.jpg
index.html
在index.html里引用test.jpg可以相对于根目录的路径/image/test.jpg
或者相对于index.html的路径image/test.jpg。
强烈建议使用相对于项目根目录的引用方式。其他引用方式,如果不对应目录本身的结构,使用cloudNine后会出错(因为静态分析会找不到文件路径)。
文件名和内容名重复问题
如果你的文件名有,比如index.html。然后在其他文件里出现了index的字符串,这个字符串可能被替换为index.html。我们会尽快修复这个问题。
问题反馈
直接联系mp