談Python: Lambda, Map , Filter 及 Reduce

從大二開始研究怎麼當一名駭客之後,開始接觸Python, 出社會後也常常用Python 開發我個人的工具包,可說是這幾年來個人 Python 的功力大漲!

最近在邊寫邊查資料的過程當中,認識到Python的 Lambda,Map和Reduce

於是,就讓我寫一篇文章記錄這一切吧 ^^

Lambda

此 Lambda 不是 AWS的Lambda ,我也不知道為什麼這裡要取和AWS的Lambda一樣的名稱哈哈,總之他是一種Python裡面的表示式,可以更加簡便、更加Function programming 的呈現程式碼,不多贅述,我最喜歡 Show me the code了!

// 通常我們定義Function是長這個樣子(順便我也想練習強型別,python也支援喔)
def demoX(x:int) -> int:
    return x + 10;
    
print(demoX(20)) //output-> 30

其實蠻落落長的,所以Python說,要有Lambda , 就有Lambda

demoX = lambda x: x+10

print(demoX(20))

好了,我附上參考網址結束這一切:https://openhome.cc/Gossip/Python/LambdaExpression.html

Map和Reduce

Map , FilterReduce 我想要放在一起說,如果常寫Function Programming的對這兩個單字一定不陌生,Laravel的Collection也有這些方法。沒錯,他們的用法其實和他們的單字意思很像呢!

// map(function_to_apply, list_of_inputs)
a = list(map(lambda a: a+2,[1,2,3]))
print(a) # [3,4,5]

map 其實就會迭代列表中的每一個項目,最後回傳出來的是一個map的物件,記得之後要用list才能把它印出來喔

a = list(filter(lambda a: a>2,[1,2,3,4,5,6]))
print(a) # [3, 4, 5, 6]

filter 其實和map很像,只是它是過濾項目,一樣他是個filter的物件,一樣需要list,所以你的function裡面請回傳出boolean,這我就不多說明啦~

from functools import reduce

a = reduce(lambda a,b: a+b,[1,2,3])
print(a) # 6

至於 reduce需要先 import 喔,只要有一個有兩個參數的function , 他就會迭代這清單的項目做出最後的結果

參考網址: https://book.pythontips.com/en/latest/map_filter.html

小君曰:Python也能Function Programming !

aws step function 筆記

最近工作用到一些工具,使用到AWS step function , 因此在這裡也筆記一下…

也在公司後端組例會分享了一下(以下就是我分享的PPT ):

其實我覺得我用的情境很簡單,只是用Map 的方式啟動lambda . 這個 lambda 就是我用來處理下載與上傳到s3指定位置… 說真的應用的情境真的很不多… 還有更多著墨的空間。

另外,自己同時也針對此寫了兩個版本,用SAM 和 用 CDK 的版本…

一、CDK 的版本

import * as cdk from '@aws-cdk/core';
import * as lambda from "@aws-cdk/aws-lambda"
import * as stepfunctions from "@aws-cdk/aws-stepfunctions"
import * as tasks from "@aws-cdk/aws-stepfunctions-tasks"
import * as logs from "@aws-cdk/aws-logs"
import * as s3 from "@aws-cdk/aws-s3"
import * as ec2 from "@aws-cdk/aws-ec2"
import * as dotenv from 'dotenv';

export class CdkLambdaStack extends cdk.Stack {
  constructor(scope: cdk.Construct, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    // 將裡面比較敏感的資訊用env 包起來, 注意後面的path 要正確
    dotenv.config({path:__dirname+'/../.env'})
    
    // 我要上傳音檔的S3 目標 arn:aws:s3:::test 為虛構(我忘了把這個也包env了哈哈)
    const bucket = s3.Bucket.fromBucketArn(this,"test","arn:aws:s3:::test")

    // 負責前面呼叫step function 的 lambda
    const downloadAudioLambda = new lambda.Function(this, "downloadAudioLambda", {
      runtime: lambda.Runtime.NODEJS_12_X,
      timeout: cdk.Duration.seconds(25),
      handler: "index.handler",
      code: lambda.Code.fromAsset("lambda/downloadAudioLambda")
    });

    bucket.grantPut(downloadAudioLambda)

    const downloadAudioJob = new tasks.LambdaInvoke(this,'Calllambda',{
      lambdaFunction: downloadAudioLambda,
      outputPath: "$.Payload"
    })

    const map = new stepfunctions.Map(this, 'ExampleMapState');
    map.iterator(downloadAudioJob);

    const logGroup = new logs.LogGroup(this, 'StepFunctionLogs')

    const stateMachine = new stepfunctions.StateMachine(this, 'StateMachine', {
        definition: map,
        logs: {
          destination: logGroup,
          level: stepfunctions.LogLevel.ERROR
        }
    });

    const testVpc = ec2.Vpc.fromLookup(this,"vpc-dev",{
      vpcId: process.env.VPCID
    });

    const processorLambda = new lambda.Function(this, "processorLambda", {
      runtime: lambda.Runtime.NODEJS_12_X,
      handler: "index.handler",
      timeout: cdk.Duration.seconds(25),
      code: lambda.Code.fromAsset("lambda/processor"),
      vpc: testVpc,
      environment: {
        ENDPOINT: process.env.ENDPOINT ?? 'localhost',
        DATABASE: process.env.DATABASE ?? 'db',
        DBUSERNAME: process.env.DBUSERNAME ?? 'root',
        PASSWORD: process.env.PASSWORD ?? 'password',
        NODE_ENV: process.env.NODE_ENV ?? 'test',
        statemachine_arn: stateMachine.stateMachineArn
      }
    });

    stateMachine.grantStartExecution(transferLambda)
  }
}

總之,上面我就是用CDK先創建我的lambda , 然後把那個要放到state machine 的建立”task”, 給予我另外一個lambda 有 startExecution 的權限…. 簡單完成!

二、SAM 的版本

總之,有些原因,我另外又學習怎麼用SAM製作 state machine XDD

AWSTemplateFormatVersion: "2010-09-09"
Transform: AWS::Serverless-2016-10-31
Description:
  download audio file from huaxi to trigger audio transcoder
Resources:
  ProcessAudioFileStateMachine:
    Type: AWS::Serverless::StateMachine # More info about State Machine Resource: https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/sam-resource-statemachine.html
    Properties:
      DefinitionUri: statemachine/audioFile_processer.json
      DefinitionSubstitutions:
        DownloadAudioFunctionArn: !GetAtt DownloadAudioFunction.Arn
      Policies: # Find out more about SAM policy templates: https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/serverless-policy-templates.html
        - LambdaInvokePolicy:
            FunctionName: !Ref DownloadAudioFunction

  DownloadAudioFunction:
    Type: AWS::Serverless::Function # More info about Function Resource: https://docs.aws.amazon.com/serverless-application-model/latest/developerguide/sam-resource-function.html
    Properties:
      FunctionName: downloadaudio
      CodeUri: functions/downloadaudio/
      Handler: index.handler
      Runtime: nodejs12.x
      Timeout: 20
      Policies:
        - S3ReadPolicy:
            BucketName: 'test'
        - S3WritePolicy:
            BucketName: 'test'

  ProcessorFunction:
    Type: AWS::Serverless::Function
    Properties:
      FunctionName: processor
      Timeout: 20
      CodeUri: functions/processor/
      Handler: index.handler
      Runtime: nodejs12.x
      Environment:
        Variables:
          ENDPOINT: db_url
          DATABASE: dbname
          DBUSERNAME: dbusername
          PASSWORD:dbpassword
          NODE_ENV: test
          statemachine_arn: !Ref ProcessAudioFileStateMachine
      Policies:
        - StepFunctionsExecutionPolicy:
            StateMachineName: !GetAtt ProcessAudioFileStateMachine.Name

其實說真的CDK 和 SAM 沒有多大差別,只是CDK你可以用比較程式化的去做那個state machine language (就是sam 裡面要包的那個json 啦!),像我,實在懶得去構想那個json 怎麼寫(啊我就不是JSON工程師啊~),所以先用CDK 產生state machine , 然後上AWS控制台上面把那一串json 抓下來,放到我的sam 這裏… 整理一下,CDK detroy 一下,sam 的template.yaml 調整一下,一個下午搞定啦!(不過我好像忘了在sam 裡面宣吿log 去接state machine 啦 XDDD 之後再研究吧!)

小君曰:還有很多成長的空間

將鐵人賽的文章搬到部落格

好久沒有寫文章了,清清一下灰塵~

不過眼尖的會發現,目前我的部落格裡面也包含了前兩次我參加it鐵人賽的文章。因為後來我起了一個python爬蟲爬我自己鐵人賽的文章,然後發出request給自己的部落格新增文章。不過在之前要啟用一下自己的部落格可以開放網路發request用,所以要安裝一個package:Application Passwords plugin

詳情的話可以參考這篇文章:https://www.yannyann.com/2018/09/wp-rest-api-create-new-post-and-upload-image/

然後我的相關程式碼放到我的office 那裡了:https://github.com/r567tw/office/tree/master/ItHomeToTechBlog

小君曰:完成今年一大目標,打勾✔️

 

 

Pytest 簡單教學

最近在整理自己的履歷和side projects……,順便也買了一些線上課程學習,其中有一門課是教你演算法,舉Leetcode 裡面的題目為例,如果再工程師界久了都知道,Leetcode 是一個刷題網站,而我身為想要變強的工程師當然不可以忽略這個網站啊…… 因此在bitbucket 開了一個專案,放置一些藉由上課所學習的解題檔案(線上課程用的是JAVA),但我想要轉成Python ,藉此提升自己的python實力~~

如果有興趣可以來看看,但因為目前上課進度緩慢,其實也才幾題而已XD https://bitbucket.org/r567tw/leetcode/src/master/

不過在本機跑的時候也想要自己就先在本機測試一下不要用leetcode 在那邊幫我測試…但之前都是用類似以下的語法

test = Solution(); #先new 一個Solution 的class
print(Solution.method(...)) #然後呼叫方法一個一個用肉眼檢查

這種方法超級土法煉鋼的… 完全就不是工程師的style ~~

而我是一個php工程師,之前花了一點時間了解phpunit , 然後也有在一些專案寫一些UnitTest… 心想…. 難道python 沒有嗎?

叮咚! 原來就是Pytest 啊! 我現在leetcode 刷題要在本機測試都會使用這個來玩玩看的!接下來我要介紹怎麼使用Pytest,以及我如何將這個導入到我這個leetcode 的練習專案。

安裝Pytest

首先你要使用pytest 之前就一定要確認pytest 有沒有在你的電腦當中(廢話!),所以你可以參考這個文件來幫助你安裝pytest ,其實也就這麼簡單

$ pip install pytest

然後其實很簡單,就是使用pytest 這個指令或者pip freeze 確認pytest 在不在就好了啊

使用Pytest

其實和phpunit 很像,其實也是用所謂“assert”的方式確認答案是否正確,以底下程式碼為例說明:

from solutions.atoi import Solution


def test_myAtoi():
    test = Solution()
    assert(test.myAtoi("42") == 42)
    assert(test.myAtoi("   -42") == -42)
    assert(test.myAtoi("4193 with words") == 4193)

其實Pytest 的部分就是去偵測你的個函數名稱是否前綴有個`test` ,如果有的話就會跑底下的內容,於是一個完美個TDD流程完成!

接下來就是跑個指令、然後看看結果就好了,以我目前很緩慢只有解Atoi\Palindrome\Pow 的狀況就像底下的情況一樣

alindrome

$ pytest
============================================= test session starts =============================================
platform darwin -- Python 3.6.4, pytest-3.3.1, py-1.5.2, pluggy-0.6.0
rootdir: /Users/fang/playground/leetcode, inifile:
collected 3 items                                                                                             

tests/test_atoi.py .                                                                                    [ 33%]
tests/test_palindrome.py .                                                                              [ 66%]
tests/test_pow.py .                                                                                     [100%]
========================================== 3 passed in 0.05 seconds ===========================================

你寫幾個測試檔案,裡面就會有幾個items ,如果你最後沒看到什麼failed 的話就表示你都很順利喔~

剩下的我就利用一些modulte 引入的概念,將資料夾很清楚分出tests 和 solutions ,之後我就在solutions 裡面放入leetcode 這題的解法,而tests 裡面放的就是要被驗證的結果,沒過pytest 就會告訴我沒過了

小君曰:之後要參加鐵人賽了,就決定暫時不繼續努力週更了XD

 

Laravel 與 Line Bot 的踩雷微經驗

前陣子看到鐵人賽有一個系列:用 laravel 尻出自己形狀的 line bot,還要撐三十天!  ,便想說,來玩一下line bot + laravel 好了

卡關到破關

參考網路上很多資料,但必須說…. 有些真的很舊,於是卡關了好一陣子…. (注:上面鐵人賽系列是用line bot 作 爬蟲及推送訊息,並沒有webhook 的部分…也就是有人發問而機器人回答的那種並不是那個系列要達成的效果。)後來發現,看到 line 發給我們webhook 的request , WTF 原來這麼簡單…..

{"events":[{"type":"message","replyToken":"...","source":{"userId":"...","type":"user"},"timestamp":1564820945283,"message":{"type":"text","id":"...","text":"..."}}],"destination":"..."}

以上…代表隱私資訊,反正就是line 傳過來的一串英文數字串出來的號碼就是了,於是我發現這樣的寫法就可以了…

$events = $request['events'];
foreach ($events as $event) {
   $resp = $this->bot->replyText($event['replyToken'],'Hello World');
}

我遺失的歲月啊(昏~ 接下來安裝一下linecorp/line-bot-sdk 就可以像鐵人賽裡面的推送文章、訊息囉… 我自己是還在研究中… 而我在此次開發了兩個專案…

專案一:聖經查詢機器人

其實這是一開始碰line bot 的初衷,最近開發到一陣子我想可以試著談一下了(但我自己也還要好好想一想要怎麼樣可以有自然語言的感覺…串深度學習等技術…),因為 line 要求使用到https ,所以目前暫時使用Heroku 作為host,等到覺得真正的開發成熟後,我想到時在移到AWS 吧?!

目前就是簡單兩個功能:一個是每日的推送經文(使用台灣聖經網的服務),另一個則是查詢聖經的服務(串接信望愛網站JSON API),而另外我遇到全形半形的問題… 但偶然發現php 有一個function 很好用,那就是mb_convert_kana,詳細用法可以參考這裡,另外為了程式碼的品質與結構,使用到Service , Transformer 等模式,希望隨著這個專案的日漸茁壯,這些模式可以更好的幫助開發!

目前在測試階段,如果想要加入一起開發歡迎發PR 喔或找我更多討論將來如何發展!

https://github.com/r567tw/bible-bot

專案二:不知道該怎麼命名的聊天機器人

因為查詢聖經機器人開發到一個階段,然後無聊興起想說是否可以來玩玩更多不同的功能,可能也是有點像是我從樂在信仰中之外又開發這個Tech Blog 吧?總之不想給人太多傳教的感覺,所以又拉出了一個子專案,而這個字專案結構與原本的聖經機器人有87%相似,目前只有提供幫我查詢Yahoo 的今日星座運勢,未來應該會想開發查一周運勢或者今天天氣會不會下雨該不該帶傘之類的,不過這是有點極高玩味性質存在的作品啦,可能也是想說如果要推聖經機器人新功能之前也可以先透過此專案試行看看… 所以像之前專案用比較嚴謹的heroku cli 作deploy ,這個則直接連github branch 直接自動部署了,反正壞掉我個人也不會介意XD

也歡迎大家對於程式碼有什麼建議也可以告訴我喔!

https://github.com/r567tw/bot

小君曰:line bot 真的好好玩~

將自己的履歷升級-接Travis 和EmailJS、Particles

最近自己無聊開了很多坑….開了line bot 的坑,寫了關於Bible 的line bot 也寫了關於玩味性質的line bot ,學習Angular Ng-rx (這個好難啊!)。。。 最近做比較多的是修復我履歷頁的TravisCI 花了超多時間一直無法把gulp deploy 和 travis 做整合,後來索性就不用gulp deploy 指令了,直接將資料夾push 到github page 當中啦!

如果想要知道之前怎麼寫的可以看看我這篇文章:利用Gulp 製作自己的履歷

後來才發現原來我不是原創… NPM 的市場已經有一個Gulp-Resume 套件… 哈哈,我幹嘛那麼辛苦刻這麼久呢….不過也藉這個機會把整個履歷大改寫,調整了很大幅度的功能,也在過程中學習不少,以下也筆記一下讓大家可以參考看看

串接 Travis CI

這次我的履歷Project 原本是用指令gulp deploy ,而加入travis.yml 也只是幫我呼叫這個指令而已…. 而在前面文章也有談到我將remote git 作出調整,直接以username/password 做為登入….. 然而這一切在我開啟github 2-factor 機制及改密碼後就各種失敗…有一段時間我的Travis 貼紙都是紅色的failed 呢…. 試了上千百萬次,仍舊失敗,無法解決問題就只好解決問問題的人(大誤!),所以最後改成github page… 意外發現的好簡單啊XD 然後現在的travis 貼紙都是可愛的綠色呢!

先簡介一下什麼是Travis CI 好了,他就是一個可以讓你自動化部屬的工具,有點像是gitlab CI , 或 Jenkins,你可以預先定義一大堆的指令在.travis.yml 這個檔案當中,然後travis CI 就會幫你自動化這些指令喔….之所以要使用Travis 是因為我覺得他似乎對Github 還蠻友善的,而且我發現他超厲害的,可以部署github page 以外也可以玩FTP ,只要你 script 寫對就好囉!接下來就讓我講講怎麼用travis 部署到github page branch吧!

首先Travis 官方其實就提供你關於github page 的範例,其實你就可以好好的研究好好的拿去玩了…

簡單來說你先設定給travis 用的github token , 這部分你可以用去github 的後台 ->Setting -> Developer settings -> Personal access tokens ,然後你記得要給他關於gist 和 repo 的權限,得到token之後就貼在.travis.yml 裡面…(你問我明碼這很不安全?放心,Travis 可以讓你加密喔)

首先將travis 安裝在你的電腦當中,總之安裝travis 的流程我懶得講,自己去Google 吧,我把寶藏都放在那裡了XD 安裝完之後你只要確認以下指令有沒有正確回傳數字就好~

$ travis --version
$ 1.8.10 #什麼數字不重要,只要是數字就好:)

你可以使用這個指令加密你的token,記得你目前是在你放.travis.yml 的目錄下喔

$ travis encrypt GITHUB_TOKEN="你剛剛在後台設定的github token" --add
# 其實你的GITHUB_TOKEN 可以替換成任何的名字 舉例來說Joanne之類的,Joanne是誰?這不好說啦......

然後你就在你的.travis.yml 看到多了一行,我不知道你的secrue 後面會接啥,總之就是我們無法直接一眼看穿的內容…..

env:
  global:
    secure: (.....)

加密之後然後呢?其實你就可以在你的script 直接用你剛剛定義的名字,以剛剛的案例來說你就可以使用GITHUB_TOKEN,是不是很神奇海螺呢?Magic !

好啦,一切萬事俱備只欠東風,到底怎麼樣可以push 到github page 呢?範例給他抄下去就對了!

deploy:
  skip_cleanup: true
  email: r567tw@gmail.com
  name: r567tw
  provider: pages
  github_token: "$GITHUB_TOKEN"
  local_dir: "public"
  on:
    branch: master

說明文件底下有個 Further configuration ,那就是你可以客製化的東西,以我用這個履歷專案來串travis 的例子說明,當我執行script 裡面的gulp 之後,會有一個public 資料夾,那其實就是我們要放在github page 的資料夾,github page 只讀靜態檔案嘛! 你丟給他php , rb , jade 他都吃不下去的!!!

所以local_dir 設定為public , github_token 帶上我們剛剛加密的github token ,記得要加$字號喔,然後你可以設定email 和name …我是設定我自己的啦,當然你也可以設定別人的陷害別人(誤?

整個.travis.yml 就長下面這樣!

language: node.js
node.js: -"7" -"8"
install:
- npm install
- npm install --global gulp-cli
- npm install -g bower
- bower install
script:
- gulp
deploy:
  skip_cleanup: true
  email: r567tw@gmail.com
  name: r567tw
  provider: pages
  github_token: "$GITHUB_TOKEN"
  local_dir: "public"
  on:
    branch: master
env:
  global:
    secure: (......)

前面就是設定我們本機之前會設定的那些東西麻,因為travis 一開始deploy一定是一個超級空白的機器,所以你要餵給他一些可以讓我們專案運行的工具與軟體…..然後gulp完之後會有個public 資料夾,deploy 就push 這個資料夾到github page 就打完收工!

調整layout 與內容、Refactor

沒想到紀錄Travis 這麼麻煩….. 讓這個文章落落長了… 所以後面不多說,就是各種調整resume.json 的架構,然後調整layout ,原本index.jade 長達一百多行的code 被硬生生拆分到content 資料夾底下,把那個點往下的按鈕做成Mixin ,好讓這份code 可以重複使用…是不知道自己會不會改天黑白來又把content 底下的jade 全部合併哈哈XD,另外更加上聯絡的表單(等等我會說明這個連絡表單怎麼做的,他是真的可以寄信給我的喔!!)以及原本白白的背景改成使用炫炮功能極高的particles.js ,真的很炫炮!如何使用particles.js 可以參考他的文件,或者你也可以翻翻我的履歷專案打開source/js/all.js,然後一開始particles.js 會製作成一個canvas,但我希望particles.js 當作我的背景啊,所以我就參考了這個stackoverflow 的方式修改我的css…,打完收工!

聯絡我們的表單

這部分原本我是想使用IFTTT的服務,但我發現到他只能給3個Value 而且Value 還不能有客制的Name ,所以後來找到有人寫的文章討論如何只用前端寄信,便選擇了EmailJs 這個服務串接。雖然免費方案只允許使用一個月兩百封,但我想也夠用了啦! 我最好會有兩百個人會來找我啦XD

首先先是設定一下emailJS 引入CDN 後加入自己的 user_id 初始化它,你可以再EmailJS 的後台-> installation 找到這段類似的code

<script type="text/javascript" src="https://cdn.emailjs.com/sdk/2.3.2/email.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
      emailjs.init("{USER_ID}");
   });
</script>

最後就是開始寄信啦,找你EmailJS 後台-> Email Template 然後修改成你要的內容,使用’Copy Code’ 這個部分,你會看到類似底下的code

var template_params = {
   "name": "aaa_value",
   "sender": "bbb_value",
   "subject": "ccc_value",
   "body": "ddd_value"
}

var service_id = "default_service";
var template_id = "{template_id}";
emailjs.send(service_id, template_id, template_params);

之後將這段js code 和預備好的連絡表單整合起來就好啦,你可以使用than 接下emailJs 回傳回來的response 藉此提醒使用者寄送成功或寄送失敗 (因為emailjs.send 其實是一個promise )如下

  var template_params = {
      "name": document.ContactForm.name.value,
      "sender": document.ContactForm.sender.value,
      "subject": document.ContactForm.subject.value,
      "body": document.ContactForm.body.value
  }
  
  var service_id = "default_service";
  var template_id = "{template_id}";

  emailjs.send(service_id, template_id, template_params)
    .then(
        function(response) {
            alert('寄送成功喔!請靜候回覆');
            document.ContactForm.reset();
        },
        function(error) {
            console.log("FAILED", error);
            alert('寄送失敗,如有問題請直接以信箱聯絡我');
        }
  );

總結

第一次寫這麼長的文章…好累….很久沒寫技術文章了….未來計畫要寫關於Magento 系列及python web 系列的文章,最近說也寫關於line bot 的project ,改天或許我也可以談談串接他的這個部分,希望自己寫越來越多side project XDD

然後其實我這個專案因為放在github ,因此我也歡迎大家來修改或者拿我的resume.json 改成自己的內容發佈自己的履歷喔!(但要記得知會一下作者我啊!)

小君曰:使用炫炮的particles.js 讓我的履歷看起來好潮喔XDD

利用Gulp 製作自己的履歷

之前六角學院出了一堂課程:使用 gulp 進行網頁前端自動化,相當推薦!

說真的,在畢業前我就大概知道gulp 的大名,自己的印象就是類似前端的工具……但始終沒有特別著墨這一塊,直到我最近關注六角學院出了這門課,恰巧手上又有一些閒錢,就發憤買了這門課,藉此做為好好學習gulp的機會和理由。

Gulp 是甚麼?

Gulp 在我目前的使用與理解上就是一個可以將前端工作流程(前端工程)給與”自動化”的一項工具,藉由”gulpfile.js” 定義出各式各樣的”工作任務”,加上gulp 的一些配合外掛與套件,可以進行壓縮js 和css 、scss 或搬移檔案的動作。詳情可以請問 wiki 大神甚麼是gulp

話不多說,先做一個簡單的範例吧,這是一個可以把html copy 到指定地方的工作任務

PS: 請先預備好工作環境,npm 還有souce 資料夾,(當然你也可以定義您的資料夾名稱)等,如果可以,再多裝個yarn (比npm還快的npm,但不是npm 請看介紹阿 npm 只是拿來安裝yarn 的XD ) 先npm install 或者yarn install  之後在資料夾裡新增一個新檔案:gulpfile.js

說明:

接下來使用gulp 後面接你所定義的task name 即可執行,如上範例 就是在CMD Key “gulp copyHTML” ,就可以將source 資料夾裡所有.html 檔名的檔案搬到 public資料夾下(如果沒有public 他會幫你建一個!! )。

如果你只想key gulp 就可以執行也可,只要在gulpfile.js 定義gulp.task(‘default’, [/後面接task 陣列/]); 就可以,如上所示就是 gulp.task(‘default’, [“copyHTML”]);

當然啦,gulp 如果只能拿來做搬檔案,其實用python 也可以阿! 幹嘛需要用gulp?  gulp 真正的妙處是在可以利用各式各樣的外掛套件 多樣化並豐富前端工作,像是gulp-sass 可以將sass的檔案轉成css、用gulp-concat合併css 和js ,甚至也可以利用套件壓縮css 和js 的檔案大小、gulp-jade 更能將 jade 的檔案轉譯成.html,別在這裡問我jade 是甚麼? jade 就是 html 前置的樣板語言,和scss/sass 之於css 有點像,不知道jade 是甚麼請由此進。 對了 如果你直接在google 搜尋打”jade” 會搜尋到”玉”,因為它改名為 “pug” 了阿XDDDD

如果很認真沒錢的同學,歡迎去自行google 搜尋 “gulp 教學”,和我一同進入 gulp 的世界,如果有點閒錢,還不用1000元,歡迎來六角學院和我一起當同學喔! 老師教得都很詳細、而且每個禮拜有問答會,可以把你碰到的問題提出來(不過或許是工程師性格使然,我都沒有問甚麼問題,自行google 比較多……)

為甚麼用Gulp 來做履歷?

a.工程師就應該要有不被104 和其他找工作網站所限制履歷的權利阿(誤?!

b.工程師就應該要有自己的工程師履歷阿,像我很喜歡和崇拜的Robby Leonardi 大神的履歷(大誤?!

好啦,因為六角學院的老師在課程上有介紹了gulp-data 的套件,我個人相當喜歡,可以說是愛上這個東西,可以先將預先寫好的json 檔串接,傳到前端的jade 去渲染出html 。 這真得是很酷! 另外,近來在許多的研討會或課程中老師或講者很多都用所謂的json 來顯示自己是誰,於是讓我就有這個用gulp 來做履歷的project 和 idea。並且我有著後端工程師的一個基本素養,未來的作品和經歷是會越來越多的,如果使用寫死的”html”呈現自己的履歷實在是”太白癡”? 重複的html code 太多,為何不用jade 的each 呢?

做法與想法:

我是個很懶的後端工程師,所以我並沒有想要像Robby 大神用畫圖阿、客製化強大的css 和js 去製作他的履歷(覺得他也很用心的花很多時間),當然也是我目前還沒達成這樣的境界?!(希望未來可以達到 😎 ) ,所以我的頁面很簡單,就是一些自己寫的一些小js 和 scss 檔(用gulp 把scss 轉為css), 然後用gulp-concat 和main-bower-files 這個可以將bower 和 gulp 對接的工具將bower 引入的”boostrap”、”jquery”、”animate.css”、”font-awesome”、”wow.js” 與我自己客製的包起來並壓縮。

最後,用gulp-data 和jade 語法相互配合把自己的履歷網頁刻出來,在這裡,我只想示範 gulp-data 的那段code 而已

接下來,就是jade 檔的事情了,想辦法將收到的data 整理出來寫在網頁上, 如果要看code 請至此

遇上gulp-ghPages 的雷

在 gulp 的課程中,講師有講到 gulp-ghPages 這個外掛,這讓我的眼睛為之一亮,因為我只要用gulp 就能簡單部屬我的履歷,就不用打一堆git 指令之類bla bla 的 讓開發與發布可以分得乾乾淨淨的,附帶一提,gh-page 就是github 可以提供給”靜態網頁”的空間。 可以做為一個簡單的預覽。

然而,我卻遇上了”fatal: could not read Username for ‘https://github.com’: ”  ,或許是因為我不止開發了這個resume 的小專案,另外我還有開發了一些東西,我使用的是 vs code,在git global的設定上,好像我沒有設定github 的設定,記得每一次我在git-push 都會出現視窗問我github 的帳號與密碼……。 呵呵 卡關了一陣子….最後Goolge 到這個解答 。雖然不是gulp-ghpage的關係,但其實狀況有點像,大概都是git 的設定上問題,看著他們的討論串,看到這一段

The detail step:
1, go to your local git project directory, open ".git/config" file and delete the "[remote "origin"]" section.
2, go to git bash and input "git remote add origin https://{username}:{password}@github.com/{username}/project.git"
3, input git push to check if it works.

意思是說,

首先第一步,將.git/config檔案裡有關於 [remote “origin”] 的區塊砍掉(windows 用戶請將資料夾選項->顯示隱藏的資料夾、檔案和磁碟機,你就會看到.git 資料夾了 )

第二步 key 上 “git remote add origin https://{username}:{password}@github.com/{username}/project.git” (username和password 是你的github 的username 和password 以及project 是你目前所做的project name )

當然啦,我也是可以去修改git 的設定,只是小弟搜尋了很久都找不太到怎麼修改(有點忘了),所以就換了這個奇怪解法。

心得與收穫

終於,歷經了快一個月(含學習時間)?! 將這個夢想中我想做的side project “工程師履歷”做出來,之後除非是要新增甚麼區塊,總之我只要修改 我設計的 json 檔 and gulp 和 gulp deploy 就可以自動化我的履歷拉(尤其對於作品和經歷、專長等大大有幫助 )! 這大大方便以後的履歷更新。 如果各位有關於此類相關更好的建議或做法歡迎再下面與我討論XD

小君曰:人生中能做出多少個 side project 呢?

 

新佈景-JimmyFDesigner

前言

從前幾年我就在自己撰寫自己的WordPress 的主題了。 之前是第一版的FangJRdesigner ,但我一直不滿意我這個第一版的設計,總覺不夠好看,後來就採用了官方主題。 但是,寫自己的佈景主題仍然是我的夢之一! 如今做成了,大家喜歡嗎?歡迎大家留言告訴我哪裡還可以改進的喔~你們的留言都會成為我下次改版的動力與改變

另外,我也為了這個新佈景主題的來到,我也將一些文章隱藏或者設私密、刪除了,希望能夠帶給大家比較好的閱讀體驗。將比較差的文章拿走,留下好的東西給大家:))

撰寫WordPress 佈景主題需要甚麼技巧呢

說真的,撰寫這個WordPress 的主題真的不難,我想我這麼弱的人都會了,你們一定也都會了! 首先,寫這樣的WordPress 佈景主題只需要有HTML 、CSS 以及PHP的技巧。 夠簡單吧?! 而且也不需要太高深的PHP能力! 因為很多WordPress 都幫你寫好在那裡的,你可以去參考WordPress-codeX,剩下的,就是要學會Google 問題和了解自己的需求~~ 同時,在寫的過程中,可以精進個人對於PHP (尤其Native PHP)的能力! 筆者我就是從這個過程當中練起來的呢! 非常鼓勵大家來寫自己的佈景主題,因為想加甚麼外掛就自己寫、想要長甚麼樣子就自己刻! 這才是Wordpress 的「終極奧義」阿!  擁有非常自由靈活的操作與內容管理!!

JimmyFDesigner?

說真的,原本我是想拿前一版FangJRDesigner 來改的說~ 不過後來引完bootstrap ,卡關了好一陣子~ 另外整個大改也讓我煞費心力~ 於是就決定廢棄原版的FangJRDesinger ,從JimmyFDesigner 出發啦!!!!! 在本次的主題當中,我特別加入最近很紅的bootstrap 框架ㄎㄎ,另外比起很久以前做的主題又多了比較多的後端功能,例如:歷史的這一天、相關文章等。為了響應公益,在404及沒有找到搜尋結果的頁面上加入失蹤人口的frame!!!  希望這些小朋友能早點被找到!!  等下我會介紹這些小功能的><

  • 歷史的這一天(只有在當天有寫過文章的時候才出現!!)
    • 全站
      在以前有歷史的文章,在導覽列旁邊會有個按鈕! 當點開就會出現歷史文章的畫面
      導覽列按鈕點開後頁面如下
      歷史的這一天頁面
    • 文章
      至於文章則會如此顯示
      歷史的這一天文章頁面
  • 相關文章
    參考Goole 來的相關文章函數,另外為了美觀下達了亂數,以標籤為特性產出文章的相關文章
    相關文章
  • 404 協尋兒童
    這真是一個很好的idea 以及響應公益的時候,鼓勵大家如果有個人網站的話一起來加入此專案!
    http://404page.missingkids.org.tw/
    404

特別值得拿來說嘴的……

另外,在這次的設計當中,我在一定程度上活用的bootstrap ,讓整個網站自適應化,在平板、手機上面,利用hidden css 的技術讓偏功能面的siderbar隱藏起來,我相信,在行動裝置上月讀這個網站,會有比較好的閱讀體驗,而不會有太多的雜訊。另外,我其實也蠻歡迎大家來列印我的文章,所以我使用了hidden-print 這個class,好讓列印之後,沒有那麼多東西,而是文章本身(這也大大提醒小弟我要好好寫文章啦~ 汗!)。 另外,小弟也偷偷使用了affix.js 這個東西,真的覺得很不錯用呢呵呵呵

總之,我是蠻滿意我這次的作品的!!!!!!! 呵呵

未來展望

1.學會SASS 來客製化管理Bootstrap

2.寫一個讓人上傳封面照片,可以換掉上面那個圖,提供客製化的選項,本人不太喜歡將這個封面圖片寫死了說…..
小弟找了很久solution 耶~  如果有大大會的話麻煩告訴小弟呀!

附上Github 連結。 歡迎大家下載或者修正

https://github.com/r567tw/JimmyFDesginer

小君曰:「終於寫完了這個佈景主題,希望可以繼續的加油囉!」