技术控

    今日:41| 主题:49369
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] Gulp折腾之路(III)

[复制链接]
泪痕づ 发表于 2016-10-1 14:33:23
92 1

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
对于前端而言, Gulp 实在是一个很酷且不可多得的存在;先前就有在Gulp探究折腾之路(I),以及Gulp折腾之路(II)对使用心得略作记载;如今,基本都用 Vue Webpack 双剑合璧来解决所遇到的问题, Gulp 也就很少折腾了。以下关于对她的些许记录,也是蛮久之前的事儿了;想来之后也不会过多去涉猎她了,就将这些心得贴于此处,日后若有机缘,复作更新(毕竟:学以致用)。
   
Gulp折腾之路(III)-1 (function,watch,记录,项目)

   Gulp-sftp 的喜忧路

   一路从 XftpwinScpSublime text3 的sftp插件等迁移至 gulp-sftp ,一路都充满欢喜:毕竟在前端项目模块化、工程化之后,即便 Sublime text3 的sftp插件都不能很好实现需求(需当手动将打包后的东西,借助 Xftp 等工具上传,当然也可以扩展 Sublime text3 的sftp插件的功能)。有了 gulp-sftp ,就能利用 watch 来监测指定文件变化,自动上传指定内容;So Nice(喜)。
  [code]gulp.task('upload',function(){
returngulp.src( jadeWorkDir +'**')
.pipe(sftp({
host: jadeConfig.sftp.host,
user: jadeConfig.sftp.user,
port: jadeConfig.sftp.port,
key: jadeConfig.sftp.key,
pass: jadeConfig.sftp.pass,
remotePath: jadeConfig.sftp.remotePath + jadeConfig.objectDirName
}));
});
[/code]   但是用它也存在一个问题:比如开启一个新的项目,初始化上传改文件夹时候(运行: gulp upload ),总会报如下错误:
  [code][15:22:46] Starting 'upload'...
[15:22:46] Authenticating with password.
events.js:141
throw er; // Unhandled 'error' event
^
Error: No such file
at SFTP._parse (E:\web\cdn\ns\node_modules\ssh2\lib\SFTP\SFTPv3.js:1090:23)
at ChannelStream. (E:\web\cdn\ns\node_modules\ssh2\lib\SFTP\SFTPv3.js:72:10)
at emitOne (events.js:77:13)
at ChannelStream.emit (events.js:169:7)
at readableAddChunk (_stream_readable.js:146:16)
at ChannelStream.Readable.push (_stream_readable.js:110:10)
at Parser. (E:\web\cdn\ns\node_modules\ssh2\lib\Channel.js:102:25)
at emitOne (events.js:77:13)
at Parser.emit (events.js:169:7)
at Parser.parsePacket (E:\web\cdn\ns\node_modules\ssh2\lib\Parser.js:607:12)
[/code]   查究了一番,原来是 gulp-sftp 不存在的远程文件夹不容创建(忧)。
   Folders which do not exist remotely can´t be created. 参见 gtg092x/gulp-sftp ;
   ([email protected])有得一些空闲,又重新回看这个问题;有想过,设定 remotePath 为外层文件夹,显然这不是一个好的解决办法;也尝试一个新的插件譬如 gulp-ftp ,竟然不能很好地工作。阴差阳错的对 remotePath 配置的路径做了改变,这问题就消失了;更改 “/xxx/yyy/zzz/targetFolder/”“/xxx/yyy/zzz/targetFolder” ,即okay了。
   gulp-autoprefixer :Prefix CSS

  [code]gulp.task('autoprefixer', function () {
return gulp.src( ['src/css/*.css','!src/css/*.min.css'] )
.pipe(autoprefixer({
browsers: ['last 2 versions', 'safari 8', 'ie 9', 'ie 10', '> 5%', 'Firefox > 10'],
cascade: false
}))
.pipe(gulp.dest( basePath + 'css/' ));
});
[/code]  使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀。【特别是开发移动端页面时,就能充分体现它的优势。例如兼容性不太好的flex布局。】但是,使用这东西,需要注意的点是,她不能很好的工作,对于已然压缩过的CSS文件。
   活久见是蛮有意思的,如此就可以更多体验那些存在;这两个插件也是在用了 webpack 之后,接触别的古董型项目才了解到的;这 gulp-useref 她可以把html里零碎的这些引入合并成一个文件,当然 它只负责合并,不负责压缩 !所以合并出来的文件我们要自行压缩,压缩以后调用 gulp-rev 负责在文件名后追加hash(如果项目使用CDN容易造成缓存的话)。最后调用 gulp-rev-replace 抑或 gulp-rev-collector 负责把最终的文件名替换回HTML中去;看起来是不是有些意思呢?对此官方给出的如下:
   gulp-useref:Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
   gulp-rev: Static asset revisioning by appending content hash to filenames unicorn.css → unicorn-d41d8cd98f.css
  gulp-useref识别的就是build开头的注释,build后面首先跟的是类型扩展名,然后后面的路径就是build区块中的所有文件进行合并后的文件路径,这个相对路径是相对于这个HTML的路径。一个简单的示例如下:
  [code]













[/code]   经过运行一段蛮复杂的gulp脚本之后,以上示例将会被打包成这样(当然这里未使用 gulp-rev 来做版本控制):
  [code]







[/code]   脚本写完了,写代码也还需注意的蛮多,比如说,这带有 的内部,所引用的资源得是本地的,如果其中链接一发在线css/js,抱歉打包工作将不能很好的进行了;再有其中如果引用js,也不能将书写js代码,只能是引用本地js文件;如果项目中有多个 html,那么每个文件中所规定合成的文件名也须当做下区分 ……;所以说这般使用,多少有些古董化玩儿法,还是 Vue + Webpack 大法好;这里的稍作介绍,也是对这过去的某种玩儿法的一种缅怀,当然了,如今你想这么玩儿,写下来也能是一点点参考。
   gulp-order : 指定次序

  The gulp plugin gulp-order allows you to reorder a stream of files using the same syntax as of gulp.src.
   众所周知在写js时候,文件引入总要有一定顺序,至少依赖了某个文件,总要在使用该文件之前引入;即便是合并压缩到一起。故而就使得再合并js之后,有可能就不能很好的工作(毕竟执行gulp stream 的顺序,并不会依照写script标签的次序),这就需要额外指定压合并顺序, gulp-order 就能很好承担这项工作,示例如下:
  [code]gulp.task('mergeJs', function(){
gulp.src('./src/*.js')
.pipe(order([
'jquery-2.1.4.min.js',
'*.js',
'bootstrap.min.js'
]))
.pipe(concat('combined.js'))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(distPath))
})
[/code]   冰心说:『眼因多流泪水而愈益清明,心因饱经忧患而愈益温厚』;这是对生活有多么丰富的经历,以及透彻领悟才能锻造出来的心怀态度啊。对于技术,其实本源也是如此;只有我们主动去见识,去尝试,去折腾,去塑新,才能雕琢出更强大的自己(/技术);也才不会在事情降临之时,显得无助与见肘。相信吧: A Problem Is A Chance For You To Your Best. 。既然谈及了些鸡汤,那就不妨再荐一发广告:有在简书,建立专题 《折腾之美》 着重搜集汇藏“折腾”之法,以令生活更简洁而丰美为定调。虽然简书已然演化为鸡汤遍野,壮语横行的一席催进地;希冀这《折腾之美》醉中流醒,仍为一抔实用田。
友荐云推荐




上一篇:Esprima port to C#
下一篇:JavaScript笔记六-Web开发
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

tdouble 发表于 2016-10-2 01:31:13
据说,回这个帖子会升官发财,我来试一下!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表