专栏首页静晴轩Gulp折腾之路(II)

Gulp折腾之路(II)

前段时间折腾Gulp,主要是搜寻一些插件,组合之以优化前端开发流程。这段折腾历程除了达成所愿外,给予最大的收获是:只要你想实现某功能,基本就已有对应插件供使用;所需要做的只是去发现她,外加”临幸”她而已。

比如,伊始觉得使用SublimeText的SFTP上传代码到FTP很方便(Ctrl+S),而用gulp就会竟也有对应插件gulp-sftp??,这下打开了使用Gulp的任督二脉;你想让各个task按顺序执行,就有gulp-sequence供你搞起;你想使用熊猫压图,果不其然就有gulp-tinypng;你想让gulp命令能够接受传参,就有npm的yargs模块在等着你去宠幸,如此等等,实在太爽,根本停不下来。此文就使用各路插件路上的些许心得做下记载,以供参考。

gulp-sequenceRun a series of gulp tasks in order.

超级有用的类库;众所周知js是单线程的,运用此类库可以: 保证任务按顺序执行,让gulp任务,可以相互独立,解除任务间的依赖,增强task复用;对于复杂的操作非常有用;安装:

npm install --save-dev gulp-sequence

gulp-sftp:上传本地文件到FTP

个人觉得这个插件太好了。单纯采用传统模式开发,可用xftp,WinScp等工具上传到FTP;当然这个好麻烦;为求更方便可以使用SublimeText插件SFTPCtrl+S之时就可以上传此文件到FTP;但,一旦用SASS,Gulp等工具,这事儿就得重新考量了。幸好有gulp-sftp这样的工具,可以一键上传本地文件到FTP;其gulpfile配置也很简单,并且折腾起来没遇到什么问题。

var gulp        = require('gulp'),
    sftp        = require('gulp-sftp'),
    config      = require('./config.json');
//上传到远程服务器任务
gulp.task('upload', function () {
    var workDirectory = 'xxx';
    return gulp.src( workDirectory + '/**' )
        .pipe(sftp({
            host: config.sftp.host,
            user: config.sftp.user,
            port: config.sftp.port,
            key: config.sftp.key,
            pass: config.sftp.pass,
            remotePath: config.sftp.remotePath+objectDirectoryName
        }));
});

为了安全(毕竟这个需要userName和password),将重要的配置信息保存到项目目录下的一个json 文件中,名为 config.json,该文件示例代码如下:

{
    "project" : "Gulp",     
    "localserver" : {
        "host" : "localhost",
        "port" : "8081"
    },
    "tinypngapi": "Tinypng API KEY(所申请的api key)",
    "sftp" : {
        "host" : "8.8.8.8",
        "user" : "username",
        "port" : "22",
        "key" : "~/.ssh/sdfsfdsf",
        "remotePath" :"/",
        "pass": "jeffjade"
    }
}

gulp.spritesmith生成雪碧图

gulp.spritesmith:Convert a set of images into a spritesheet and CSS variables via gulp 这个库需要额外依赖spritesmith库;

npm install --save-dev gulp.spritesmith  spritesmith

当然安装的时候极有可能出现问题(Win下);比如,安装的类库无法使用,并且也删除(指定的路径或文件名太长);额,这是一个超蛋疼的问题;也是在尝试几次后才成功(没闹明白失败和成功的原因);至于删掉那坏的类库,最后也是采用将部分剪切出去或者手动rename致使路径变短些才得以干掉它【用del rd命令都不足以删除之,我屮艸芔茻,醉了~】;

del : 指定的路径或文件名太长,或者两者都太长。完全限定文件名必须少于 260 个字符,并且目录名必须少于 248 个字符。 [Y] 是(Y) [A] 全是(A) [N] 否(N) [L] 全否(L) [S] 挂起(S) [?] 帮助 (默认值为“Y”): A rd : 指定的路径或文件名太长,或者两者都太长。完全限定文件名必须少于 260 个字符,并且目录名必须少于 248 个字符。

gulpfile配置如下即可:

var gulp        = require('gulp'),
    spritesmith = require('gulp.spritesmith');
//运用gulp一键生成[雪碧图]
gulp.task('sprite', function(){
    var workDirectory = 'xxx', outPut = 'yyy';
    return gulp.src( workDirectory+'/images/*.png' )
    .pipe( spritesmith({
        imgName:'sprite.png',
        cssName:'sprite.css'
    }) )
    .pipe( gulp.dest(outPut+'/images') );
});

gulp-tinypng使用熊猫压图

gulp-tinypng:gulp plugin to compress png images using tinypng api

var gulp        = require('gulp'),
    tinypng     = require('gulp-tinypng');
//压缩图片 - tinypng
gulp.task('tinypng', function () {
    var workDirectory = 'xxx', outPut = 'yyy';
    gulp.src( workDirectory+'/images/*.{png,jpg,jpeg}')
        .pipe(tinypng(config.tinypngapi))
        .pipe(gulp.dest( outPut+'/images' ));
});

这里折腾起来没遇到什么问题;当然这里需要配置API Key;需要去tinypng开发者https://tinypng.com/developers,获得一个合法的API Key;否则运行会出现如下错误:

gulp-tinypng - Credentials are invalid

gulp-replace:A string replace plugin for gulp

npm install --save-dev gulp-replace

在项目中这个插件还是挺有用的,可以批量替换字符串,并且支持使用正则替换;使用示例:

var replace = require('gulp-replace');

gulp.task('templates', function(){
  gulp.src(['file.txt'])
    .pipe(replace(/foo(.{3})/g, '$1foo'))
    .pipe(gulp.dest('build/file.txt'));
});

gulp-tap:Easiest way to tap into a pipeline

看其描述“最简单打通管道的方法”,官方给出的示例如下:

gulp.src("src/**/*.{coffee,js}")
    .pipe(tap(function(file, t) {
        if (path.extname(file.path) === '.coffee') {
            return t.through(coffee, []);
        }
    }))
    .pipe(gulp.dest('build'));

这个插件很有作用,它可以用来遍历gulp.src()指定的那些文件;利用这个特性,以及npm下自带的path插件,即可获取到每个文件的文件名;在特定场景需求里,它帮了我很大忙。

var gulp = require('gulp');
var path = require('path');
var tap = require('gulp-tap');

gulp.task('examples', function() {
return gulp.src('./examples/*.html')
    .pipe(tap(function (file,t) {
        console.log(path.basename(file.path));
        // Do something with the file name
    }))
    .pipe(gulp.dest('./build'));
});

lazypipe:Use to create an immutable, lazily initialized pipeline from a series of streams.

npm install --save-dev lazypipe

如果你在多个任务中使用了相同的插件,你可能发现你很想把这些东西以DRY原则[^footnote]去处理。这个方法可以创建一些工厂来把你经常使用的stream链分离出来。这可以使用lazypipe来完成这件事;参考文章:通过 stream 工厂来共享 stream

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var coffee = require('gulp-coffee');
var jshint = require('gulp-jshint');
var stylish = require('jshint-stylish');
var lazypipe = require('lazypipe');

// 赋给 lazypipe
var jsTransform = lazypipe()
  .pipe(jshint)
  .pipe(jshint.reporter, stylish)
  .pipe(uglify);

gulp.task('bootstrap', function() {
  return gulp.src('bootstrap/js/*.js')
    .pipe(jsTransform())
    .pipe(gulp.dest('public/bootstrap'));
});

gulp.task('coffee', function() {
  return gulp.src('lib/js/*.coffee')
    .pipe(coffee())
    .pipe(jsTransform())
    .pipe(gulp.dest('public/js'));
});

你可以看到,多个任务中都在使用的 JavaScript 管道(JSHint + Uglify)分离到了一个工厂。工厂可以在任意多的任务中重用。你也可以嵌套这些工厂,或者把它们连接起来,已达到更好的效果。分离出每个共享的管道,也可以让你能够集中地管理,当你的工作流程更改后,你只需要修改一个地方即可。


此外还有 yargspathgulp-changed 等等诸多模块,君之所需,可谓应有尽有–只要你愿意去折腾;实在没有自己写一个也并不是什么大难事。折腾,只为让事物变得更简洁。Not Fucking Excuse ,Just Do It。

[^footnote]:DRY是“Don’t Repeat Yourself”的缩写。意思是说,在一个设计里,对于任何东西,都应该有且只有一个表示,其它的地方都应该引用这一处。这样需要改动的时候,只需调整这一处,所有的地方就都变更过来了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Gulp探究折腾之路(I)

    前言: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完...

    晚晴幽草轩轩主
  • Gulp折腾之路(III)

    微注: 前端更新实在是迅捷!谈及前端打包工具,Gulp 取代 Grunt荣登王者,其宝座还未热乎,16年 Webpack 便劈天盖地席卷而来。即便笔者在记叙这篇...

    晚晴幽草轩轩主
  • 浅谈android中的目录结构

    之前在android游戏开发中就遇到本地数据存储的问题:一般情形之下就将动态数据写入SD中存储,在没有SD卡的手机上就需另作处理了;再有在开发android应用...

    晚晴幽草轩轩主
  • Gulp-自动化编译sass和pug文件

    xing.org1^
  • Windows2012搭建我的世界(Minecraft)服务器超简单

    有台qq云的服务器一直在挂机没事干,使用Windows2012系统搭建我的世界服务端,傻瓜式安装简单快速,亲测试可以玩。 0.安装环境 服务器配置:2核2G1M...

    用户1188347
  • 一个工具,帮你实现酷炫的数据可视化

    看着酷炫的可视化,有人会疑惑,是否有实实在在的用处。其实在商业、生产和运营场景中有大量类似的使用,如集团展览中心——用作政府和客户参观使用;城市交通管控...

    xcbeyond
  • 《七天数据可视化之旅》第七天:可视化设计实战-数据大屏

    Destiny,某物流公司数据产品经理,目前从事数据平台搭建和可视化相关的工作。持续学习中,期望与大家多多交流数据相关的技术和实际应用,共同成长。

    木东居士
  • 拔刺 | 手机处理器真的会老化吗?

    手机本身就是一个消耗品,任何电子产品用久了,性能会下降,就会出现卡顿,死机等现象。不过手机的处理器的集成度很高,想要老化也需要十年左右的时间,所以手机出现卡顿的...

    镁客网
  • mongodb与mongodb可视化工具adminMongo结合使用

    https://www.mongodb.com/download-center#community

    wfaceboss
  • 【干货】21个数据可视化利器

    大数据文摘

扫码关注云+社区

领取腾讯云代金券