我写了份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
问题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));
})
问题1:当 在 src 文件夹内新建文件夹等操作,无法同步到 dev 文件夹,样式、图片、都可以,就是在在 src 文件夹内新建文件夹,无法同步到dev 文件夹。
——实测:新建的空文件夹是无法同步的,只有新建的文件才会触发watch事件,是可以创建目录的。
问题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积分~
来为老师/同学的回答评分吧
0 星