Gulp折騰之路(II)

本文轉載自查看原文 2016-07-23 14:41 2387 其他

前段時間折騰Gulp，主要是搜尋一些插件，組合之以優化前端開發流程。這段折騰歷程除了達成所願外，給予最大的收獲是：只要你想實現某功能，基本就已有對應插件供使用；所需要做的只是去發現她，外加”臨幸”她而已。

比如，伊始覺得使用SublimeText的 SFTP 上傳代碼到FTP很方便（Ctrl+S），而用gulp就會竟也有對應插件 gulp-sftp :heart_eyes::blush:，這下打開了使用 Gulp 的任督二脈;你想讓各個task按順序執行，就有 gulp-sequence 供你搞起；你想使用熊貓壓圖，果不其然就有 gulp-tinypng ;你想讓gulp命令能夠接受傳參，就有npm的 yargs 模塊在等着你去寵幸,如此等等，實在太爽，根本停不下來。此文就使用各路插件路上的些許心得做下記載，以供參考。

gulp-sequence Run a series of gulp tasks in order.

超級有用的類庫；眾所周知js是單線程的，運用此類庫可以：保證任務按順序執行，讓gulp任務，可以相互獨立，解除任務間的依賴，增強task復用；對於復雜的操作非常有用；安裝:

npm install --save-dev gulp-sequence

gulp-sftp ：上傳本地文件到FTP

個人覺得這個插件太好了。單純采用傳統模式開發，可用 xftp , WinScp 等工具上傳到FTP；當然這個好麻煩；為求更方便可以使用SublimeText插件 SFTP ， Ctrl+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”): Ard : 指定的路徑或文件名太長，或者兩者都太長。完全限定文件名必須少於 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）分離到了一個工廠。工廠可以在任意多的任務中重用。你也可以嵌套這些工廠，或者把它們連接起來，已達到更好的效果。分離出每個共享的管道，也可以讓你能夠集中地管理，當你的工作流程更改后，你只需要修改一個地方即可。

此外還有 yargs ， path ， gulp-changed 等等諸多模塊，君之所需，可謂應有盡有—只要你願意去折騰；實在沒有自己寫一個也並不是什么大難事。折騰，只為讓事物變得更簡潔。Not Fucking Excuse ,Just Do It。

[^footnote]:DRY是“Don’t Repeat Yourself”的縮寫。意思是說，在一個設計里，對於任何東西，都應該有且只有一個表示，其它的地方都應該引用這一處。這樣需要改動的時候，只需調整這一處，所有的地方就都變更過來了。

來自： http://www.jeffjade.com/2016/01/19/2016-01-19-toss-gulp/