2015/05/27

Gulp 處理資料夾內的scss 並 concat 成資料夾名稱

事情是這樣的
我想要把每個view的scss都單獨一個檔案
然後相關的放在同個資料夾,檢單來說就是跟著Controller走
然後輸出時利用gulp編譯後自動合併成資料夾名稱引用
這樣比較不容易動到其他的scss

目錄結構:
\resource\assets\sass
|    \memo
|    |    list.scss
|    |    show.scss
|    \article
|    |     list.scss
|    |     show.scss

\public\css

目標是執行完gulp之後
public\css會出現 memo.css, article.css
是由底下的 *.scss 編譯後合併
試了很多種方法最後終於成功了

======================================

由於gulp-concat的檔名需要根據資料夾
網路的範例都是寫死檔名
如果需要用變數處理,需要重新傳回 stream 給 gulp 處理
檔名的部分是使用 gulp-tap 抓取
gulp.task('sassIn', function () {
 var srcPath = 'resources/assets/sass';
 var outputPath = 'public/css';

 return gulp.src(srcPath + '/**/')
  .pipe(tap(function(file, t) {
         if ( file.isDirectory() && file.relative.length) {                
                var name = file.relative + '.css';

                console.log("processing folder:", file.path);
                console.log("\toutput filename is:", name);

                return gulp.src( path.join(file.path , '/*.scss') )
                   .pipe(tap(function(file, t) {
                    console.log("\tprocessing file:", file.path);
                   }))
                   .pipe(sass().on('error', sass.logError))
                   .pipe(gulpif(util.env.production, minifier()))
                      .pipe(concat(name))
                      .pipe(gulp.dest(outputPath));
            }
     }));  
});

如果處理的檔案是目錄的話,
而且該目錄是位於srcPath下(直接指srcPath 的 file.path會沒東西)
就重新傳回一個gulp並且處理

=====================================

搭配laravel elixir使用
elixir(function(mix) {
  mix.task('sassIn');
});

BTW如果要使用elixir的module
需要多加路徑去指(這個我也卡很久)
var requireBase = './node_modules/laravel-elixir/node_modules/';
var util        = require(requireBase + 'gulp-util');
var gulpif      = require(requireBase + 'gulp-if');
var minifyCss   = require(requireBase + 'gulp-minify-css');
var sass        = require(requireBase + 'gulp-sass');
var concat      = require(requireBase + 'gulp-concat');
var minifier    = require(requireBase + 'gulp-minify-css');

 

======================================

留一下紀念我寫的無用code XDD
function sassIn(mix, src, output, options){
 var srcPath = 'resources/assets/sass';
 var compilePath = 'resources/assets/sass/compiled';
 var outputPath = 'public/css';
 if( src ){ srcPath = path.join(srcPath, src); } 
 if( output ){ outputPath = path.join(outputPath, output) };

 //get src dir's sub dirs
 var dirs = readDirFiles(srcPath, null, true);
 for(i in dirs){
  var dir = dirs[i];
  if( dir == 'compiled') continue;
  var currentCompiledDir = path.join(compilePath, dir);
  var currentDir = path.join(srcPath, dir);
  var outputFile = path.join(outputPath, dir) + '.css';

  //check file exists
  try{ console.log('unlinkSync', outputFile); console.log(fs.unlinkSync(outputFile)); console.log('unlinkSync done');} catch(err){ /*just igone it*/ }
  sleep(1000);

  //loop subdir files to sass
  var files = readDirFiles(currentDir, function(file){
   filepath = path.join(dir, file);
   mix.sass(filepath, currentCompiledDir);
  });

  sleep(1000);

  //merge under subdir
  console.log('stylesIn');
  mix.stylesIn(currentCompiledDir, outputFile);
  console.log('stylesIn end');
 }
}

function readDirFiles(srcPath, cb, onlyDir){
 var dirFiles = [];
 var files = fs.readdirSync(srcPath);
 for(var i in files){
  var file = files[i];
  var filepath = path.join(srcPath, file);

  var isDir = fs.statSync(filepath).isDirectory();
  if( (onlyDir && !isDir) || (!onlyDir && isDir) ){
   continue; 
  }

  dirFiles.push(file);
  if(cb) cb(file);
 }
 return dirFiles;
}
function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

2015/05/07

[筆記] lumen不用指到public

lumen如果直接丟到htdoc裡面跑
即使指到 public 內 還是會出現



試了很多方法都不動,看來還是只能用virtual host
但就是不想用vhost !!

做法
** lumen 是專案名稱
1. 將 lumen/public 兩個檔案 copy 到 lumen/ 下
2. 修改index.php
$app = require __DIR__.'/../bootstrap/app.php';
改成
$app = require __DIR__.'/bootstrap/app.php';

$app->run();
改成
$app->run($app['request']);

3.存檔,收工




[來源] https://laracasts.com/lessons/introducing-lumen
@

2015/05/03

台灣銀行的匯率JSON

2018/01/05
停止服務

2017/05/16
要用這個服務我很歡迎,但是太頻繁要求已經是變相的攻擊了
  • 要拿到所有的匯率可以直接要currency.json就好,裡面有全部的資料。
  • 資料更新時間是9~17每整點更新,每分鐘要都是相同的
211.23.4.187 這個IP每分鐘持續來要資料,造成伺服器負荷,已BAN



花了點時間把原本的程式全部改寫
前端列表的部分也加上更改外幣金額 與 台幣換算的功能 (實際換算還是要以銀行為主)
http://rate.asper.tw/

Source Code: https://github.com/Aspertw/bot-rates
PS. 這是以GAE環境寫的


( 其實如果要找匯率我覺得 比率網 比較好用 ((自己打臉 )
=====================

最近要去日本玩,有一直在觀察日本匯率
加上有在玩Slack Bot,想結合BOT跟匯率
無奈匯率很少有OPEN DATA,
用了YAHOO的YQL查詢結果跟台灣銀行的差距不小。

所以,自己的匯率API自己刻!!
然後,丟給Google App Engine當線上服務XDD

網址: http://asper-bot-rates.appspot.com/currency.json
直接開也有訊息怎麼連

範例: http://asper-bot-rates.appspot.com/currency.json?JPy
就是後面加 ?幣值
大小寫都沒關係

結果是這樣
{
   "updateTime":1430409617,
   "rates":{
      "buyCash":"0.24940",
      "buySpot":"0.25560",
      "sellCash":"0.26000",
      "sellSpot":"0.25960"
   }
}

updateTime: 台灣銀行的最後更新時間,unix timestamp
rates: 四種匯率價, buy:買入, sell:賣出, Cash:現金, Spot:即期

由於GAE免費有限制額度,
這資料每24小時更新

原始碼只有34行,就不丟GitHub了

$site = "http://rate.bot.com.tw";
$csvIndex = array(
 'currency'=>0, 'buyCash'=>2, 'buySpot'=>3, 'sellCash'=>12, 'sellSpot'=>13
);

//get csv link
$page = "/Pages/Static/UIP003.zh-TW.htm";
$html = file_get_contents($site.$page); 

$aPos = strpos($html, '<a id="DownloadCsv"');
$hrefPos = strpos($html, 'href="', $aPos);
$endPos = strpos($html, '">', $hrefPos);
$link = substr($html, $hrefPos+6, $endPos-$hrefPos-6);
$link = htmlspecialchars_decode($link);
$updateTime = strtotime(substr($link, strpos($link, '&date=')+6 )); 

//open taiwan bank rate csv
$fp = fopen($site.$link, "r");
$row = 0;
$currencyRates = array();
while( ($data = fgetcsv($fp, 1000, ',')) !== FALSE ){
 $row++;  if($row == 1){ continue; } //skip title row
 foreach($csvIndex as $name=>$index){
  $$name = trim($data[$index]);
 }
 $currencyRates[ $currency ] = compact('buyCash', 'buySpot', 'sellCash', 'sellSpot');
}
fclose($fp);

//save to json cache
$data = array(
 'createTime' => time(),
 'updateTime' => $updateTime,
 'rates' => $currencyRates
);

2015/05/02

在Google App Engine(GAE) 使用 firebase REST API

本想用firebase當作GAE的DB的
但是讀取速度有點慘...
好在資料量不大,所以改用gae的memcache
寫都寫了做個紀錄

溫馨提示:
由於GAE不能用curl,所以要用GAE自己的URL Fetch
需要使用file_get_contents with stream_context


function firebase($url, $data=null, $method='GET'){
 $method = strtoupper($method);
 $context = [
  'http' => [
   'method' => $method
  ]
 ];

 if($method != 'GET' && $method != 'DELETE' && !is_null($data)){
  $content = json_encode($data);
  $header = "Content-Type: application/json\r\n".
      "Content-Length: ".strlen($content)."\r\n";
  $context['http']['header'] = $header;
  $context['http']['content'] = $content;
 }

 $context = stream_context_create($context);
 $result = file_get_contents($url, false, $context);
 return $result;
}

Sample:
$url = "https://example.firebaseio.com/somedata.json";

//取得資料
$res = firebase($url);  //$res 是json text

//送出資料
$data = array('a'=>123, 'b'=>456);
$res = firebase($url, $data, 'PUT');

PATCH跟POST沒試過,但是應該也可以動啦XDD


firebase REST API: https://www.firebase.com/docs/rest/guide/saving-data.html
Google App Engine Url Fetch: https://cloud.google.com/appengine/docs/php/urlfetch/