我写了份gulpfile.js,遇到一些问题想请老师帮忙看看

我写了份gulpfile.js,遇到一些问题想请老师帮忙看看

代码地址:https://github.com/msi1979/gulpfile_web2/blob/master/gulpfile.js

问题1:当 在 src 文件夹内新建文件夹等操作,无法同步到 dev 文件夹,样式、图片、都可以,就是在在 src 文件夹内新建文件夹,无法同步到dev 文件夹。

问题2:当 src --> skin-->images--> 里的图片新增了,会同步到dev 文件夹,但删除了就不会同步,我新增了一张图,也同步所有图片,并不会只同步新加的或者修改了的。

问题3:用gulp 如果实现跨域,课程有说吗,如果有,在哪节里。如果没有,可否给指导下给下这方面的案例,在百度搜了,没弄成。

问题4:用gulp 如果实现版本控制。同样在百度搜了,也没弄成。

问题5: 用gulp 如果实现 css精灵图 如果将px转换成rem,那这个要如何实现。

学艺不精,请老师多帮帮,有个请求能否把这些gulp进阶的知识点,也录成视频。这样在工作中非常实用。

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
Brian 2020-08-17 23:14:35

问题4有几个库需要自己看一下:

https://www.npmjs.com/package/gulp-load-plugins

https://www.npmjs.com/package/gulp-rev

https://www.npmjs.com/package/gulp-rev-collector

https://www.npmjs.com/package/gulp-rev-format

https://www.npmjs.com/package/gulp-rev-replace

var $ = require('gulp-load-plugins')();


// 生成版本号清单    

gulp.task('revJson', function () {    

return gulp.src(['build/**/*.*'])    

.pipe($.rev())    

.pipe($.revFormat({    

prefix: '.',    

suffix: '.cache',    

lastExt: false    

}))    

.pipe($.rev.manifest())    

.pipe(gulp.dest("build/tmp"));    

});    

gulp.task('addVersion',['revJson'], function() {    

var manifest = gulp.src(["build/tmp/rev-manifest.json"]);    

function modifyUnreved(filename) {    

return filename;    

}    

function modifyReved(filename) {    

if (filename.indexOf('.cache') > -1) {    

const _version = filename.match(/\.[\w]*\.cache/)[0].replace(/(\.|cache)*/g, "");    

const _filename = filename.replace(/\.[\w]*\.cache/, "");    

filename = _filename + "?v=" + _version;    

return filename;    

}    

return filename;    

}    

return gulp.src(['*.html'])    

.pipe($.replace(/(\.[a-z]+)\?(v=)?[^\'\"\&]*/g, "$1"))    

.pipe($.revReplace({    

manifest: manifest,    

modifyUnreved: modifyUnreved,    

modifyReved: modifyReved    

}))    

.pipe(gulp.dest(config.html.dest));    

})    



Brian 2020-08-16 14:27:48

问题1:当 在 src 文件夹内新建文件夹等操作,无法同步到 dev 文件夹,样式、图片、都可以,就是在在 src 文件夹内新建文件夹,无法同步到dev 文件夹。

——实测:新建的空文件夹是无法同步的,只有新建的文件才会触发watch事件,是可以创建目录的。

http://img1.sycdn.imooc.com//climg/5f38d1d909db3bca22401994.jpg

问题2:当 src --> skin-->images--> 里的图片新增了,会同步到dev 文件夹,但删除了就不会同步,我新增了一张图,也同步所有图片,并不会只同步新加的或者修改了的。

——参考:https://stackoverflow.com/questions/35733090/gulp-watch-delete-files

问题3:用gulp 如果实现跨域,课程有说吗,如果有,在哪节里。如果没有,可否给指导下给下这方面的案例,在百度搜了,没弄成。

——跨域问题除了前端需要配置,更多的是后台部分,接口服务部分,gulp只是工程化工具,不提供httpserver的功能,你使用的browser-sync可以设置proxy: https://www.browsersync.io/docs/options#option-proxy

问题4:用gulp 如果实现版本控制。同样在百度搜了,也没弄成。

——你是想控制gulp的版本,还是让gulp来提交git代码?我不建议使用gulp,直接创建一个shell脚本,或者通过git命令即可,gulp的工作还是让它更单纯一点好。

问题5: 用gulp 如果实现 css精灵图 如果将px转换成rem,那这个要如何实现。

https://www.npmjs.com/package/gulp.spritesmith

https://www.npmjs.com/package/gulp-pxtorem



  • 提问者 爱吃鱼的羊 #1
    问题4 是 .css 、.js 后面带上md5,就是后面有一串数字,网上查了,没看明白怎么用。
    2020-08-17 09:58:47
  • 提问者 爱吃鱼的羊 #2
    问题1,明白,空文件是不被同步,只有文件夹里有文件才会被同步过去,没发现这一问题,现在明白了,谢谢 Brian老师
    2020-08-17 10:02:19
  • 提问者 爱吃鱼的羊 #3
    问题3是在调用接口数据会提示跨域,每次都是叫后台开发处理,我想知道,用gulp 可否实现跨域处理,我看了网上的相关文章,就是没整明白,还是晕地。 公司的同事弄的还好,有的数据接口是合作方给的,如果可以弄,省得去麻烦他人。
    2020-08-17 10:14:02
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师