2018.5.15 gulp练习
今天在吴川的帮助下,搭建好了环境,但是由于gulp很不熟悉,我根本无法理解为什么gulp dev来执行项目,再加上什么入口文件什么的我也不明白,所以要先全面练习gulp, (artTemplate和sass也要练习练习语法),今天就做这个吧。然后 昨天的jQuery聊天室可以接着做,后面补充模板,以及CSS改为SCSS就行了,这作为初级练习,这周要完成。、
- 在接着做聊天室时,遇到一个好玩的插件 ->,SWFupload可以用于文件(图片,文件)上传,利用embeded标签,在html中嵌入swf文件并用flashvar(flashvars是一个属性,它用于向flash中传递参数,形式是query string)传值。
代码如下:
<embed
width="15"
height="16"
flashvars="swfid=2556975203&maxSumSize=50&maxFileSize=50&maxFileNum=1&multiSelect=0&uploadAPI=http%3A%2F%2Fupload.api.weibo.com%2F2%2Fmss%2Fupload.json%3Fsource%3D209678993%26tuid%3D1887188824&initFun=STK.webim.ui.chatWindow.msgToolBar.upload.initFun&sucFun=STK.webim.ui.chatWindow.msgToolBar.upload.sucFun&errFun=STK.webim.ui.chatWindow.msgToolBar.upload.errFun&beginFun=STK.webim.ui.chatWindow.msgToolBar.upload.beginFun&showTipFun=STK.webim.ui.chatWindow.msgToolBar.upload.showTipFun&hiddenTipFun=STK.webim.ui.chatWindow.msgToolBar.upload.hiddenTipFun&areaInfo=0-16|12-16&fExt=*.jpg;*.gif;*.jpeg;*.png|*&fExtDec=选择图片|选择文件" data="upload.swf"
wmode="transparent"
bgcolor=""
allowscriptaccess="always"
allowfullscreen="true" scale="noScale"
menu="false"
type="application/x-shockwave-flash"
src="http://service.weibo.com/staticjs/tools/upload.swf?v=36c9997f1313d1c4" id="swf_3140">
其中data属性规定所用资源的url.
- 插入图片路径由于与html文件不是在同一层,需要返回上上一层目录,../表示上一层目录,../../表示上上一层目录。
5.23. 完成jQuery聊天室,理解gulp的使用方法(gulp dev是因为有个“dev”任务,其中又依赖所有的gulp任务),在此记录期间遇到的bug和相关点:
- 在使用匿名函数(function(){})(jQuery)时,提示错误:jQuery is not defined. 这是因为在script引用时没有将jquery先引入,而是写在了chat.js引用后面,变换顺序即可。
- 根据标准目录gulp dev时,提示compass can't find any sass files to compile. 这是因为在gulp任务scss中scss文件的路径错了,后面的watch监听任务同理。
- ./是当前目录, ../是父级目录, /是根目录。
遗留问题,如何使用gulp-rev和gulp-rev-collector修改html文件中静态资源(css,js,img)的路径?