tohshige / test

test private
0 stars 0 forks source link

gulp : task runner | CSVからページを作成 #7

Open tohshige opened 6 years ago

tohshige commented 6 years ago

nodejs insall for windows https://nodejs.org/ja/

nodejs インストールしたあとで(場合によってはPC再起動 WindowsKey+R cmd npm -v でVersionがでればOK

タスクランナーGulp(クライアント)をインストール

npm install --global gulp-cli gulp -v でVersionがでればOK

 #GitCloneしてきたフォルダへ移動(とりあえずテストフォルダへ
cd used1
 #packege.json から必要なモジュールがインストールされる
npm install

監視用タスクを起動、Ctrl+Cキーで起動解除

gulp w gulpfile.js に必要なタスクを記述、監視先、保存先を変更できる。

あとは/pugorg/ フォルダに有るPugファイルを編集 保存するたびにHtmlが書き出される

tohshige commented 6 years ago

文字コードなぜか sp.htmlがUTF-8、 pc.htmlがEUCJP

Gold仕様のEucjpに統一するとか?

tohshige commented 6 years ago

EUC-JPに統一。楽天Golc上UTF8はJSで動かしたりUIや検索文字が化けたり謎の現象がおこる しょうがないので楽天にあわせる、CSSもEUC-jpで保存 https://github.com/tohshige/test/search?l=CSS&q=euc-jp&type=&utf8=%E2%9C%93

tohshige commented 6 years ago

gulp html2pug https://github.com/tohshige/test/blob/master/used1/gulpfile.js#L52

gulp.task('html2pug', function(){
  return gulp.src(['./html/modal1.html', '!./html/_*.html'])
                           ↑

html/ フォルダの複数のHTMLファイルを pugorg/へ保存

*.html指定でフォルダに有るHTMLを一気にPUG化
gulp.task('html2pug', function(){
  return gulp.src(['./html/*.html', '!./html/_*.html'])
                           ↑

既存のファイルが上書きされるので フォルダなど設定変更は適宜ファイルを編集ください

tohshige commented 6 years ago

設定やらすでに他の人が作ってるのを、参考: 静的ページ&ちょっとJSなやつにつかえそうな奴

Speedy

static pages using Gulp - Pug & Sass https://github.com/yat8823jp/speedy#speedy

site.json 取り込んで反映 >>>いつか>>>設定は1つのファイルに統合

https://github.com/yat8823jp/speedy/blob/master/gulpfile.js#L153

ややこしいOGP宣言やらはHeader.pugにまとめる、とか

https://github.com/yat8823jp/speedy/blob/master/dev/pug/includes/_head.pug

tohshige commented 6 years ago

Gulp TASK検証 (+テンプレートエンジン: pug)

1済:2万行程度のRcabinetにある画像URLが保存されたcsv

3つに別れたCSVファイル結合>指定のカラムでソート>UTF8へエンコード>Json変換 PugにてJsonファイルを指定のurlでマッチング 3秒程度でtaskは完了 http://rcart.eek.jp/used1r/pcList.html

2 /ritem/download にある13MB 程度のCSV

-rw-rw-r--   1 upload2  gold     13171829 Nov 16 08:55 dl-item201711160855-1.csv
-rw-rw-r--   1 upload2  gold     13176603 Nov 16 13:26 dl-item201711161326-1.csv
-rw-rw-r--   1 upload2  gold     13175551 Nov 16 19:21 dl-item201711161921-1.csv

↑のCSVからITEMNO(商品番号)やら自動で検索して↓に埋め込むとか考え中 http://rcart.eek.jp/used1r/pcList.html

2.1 Cabinet側CSV 、ITEM側CSVすり合わせ検証

画像バス、 商品説明内のHTMLに設定されている画像URLをマッチさせる等

2.2 dl-item<西暦日付時間>.csv

商品説明等がHTML改行ありで入ってくる20万行程度 カンマ区切り””内の改行だけを正規表現で一発置換で削除 1,600行程度になる=Item数

tohshige commented 6 years ago

BrowserSync時はUTF-8、納品 gulp nouhin (あとで設定) は環境先に合わせたCodeで https://www.nxworld.net/services-resource/gulp-shift-jis-replace-and-convert-encoding.html

tohshige commented 6 years ago

gulp w

BrowserSync 動作例 https://www.dropbox.com/s/tmcj6nqmgl9weco/HowtoBrowserSync.mp4?dl=0

実行時に表示される↓アドレスへアクセス localhost を2窓で開いてレスポンシブ確認 External: スマホ用(IPは自分のpc ボタンを押す等、開いてる画面すべての動きが同期され。確認が楽

   Local: http://localhost:3000
External: http://192.168.1.17:3000 (こっちはpcにより変わる
tohshige commented 6 years ago

Gulp TASK検証 (+テンプレートエンジン: pug)

済1:2万行程度のRcabinetにある画像URLが保存されたcsv

3つに別れたCSVファイル結合>指定のカラムでソート>UTF8へエンコード>Json変換 PugにてJsonファイルを指定のurlでマッチング 3秒程度でtaskは完了 http://rcart.eek.jp/used1r/pcList.html

済2: /ritem/download にある13MB 程度のCSV

-rw-rw-r--   1 upload2  gold     13171829 Nov 16 08:55 dl-item201711160855-1.csv
-rw-rw-r--   1 upload2  gold     13176603 Nov 16 13:26 dl-item201711161326-1.csv
-rw-rw-r--   1 upload2  gold     13175551 Nov 16 19:21 dl-item201711161921-1.csv

↑のCSVからITEMNO(商品番号)やら自動で検索して↓に埋め込むとか考え中 http://rcart.eek.jp/used1r/pcList.html

2-1: Cabinet側CSV 、ITEM側CSVすり合わせ検証

画像バス、 商品説明内のHTMLに設定されている画像URLをマッチさせる等

済2-2: dl-item<西暦日付時間>.csv

商品説明等がHTML改行ありで入ってくる20万行程度 カンマ区切り””内の改行だけを正規表現で一発置換で削除 1,600行程度になる=Item数

済2-3: CSVの1商品(One Item)あたり60列のなかから

必要な列だけを任意で抜き出してHTML化、 商品URL、値段、画像PATH、抜き出し。 http://192.168.11.29:3000/pcList.html

tohshige commented 6 years ago

csv 1576 lines . auto generate html http://rcart.eek.jp/used1r/pcList.html

tohshige commented 6 years ago

予定:色別のパターンも拾う image

謎のRAC番号がカートボタンに使用されている
(2014年に廃止されたと書いてある謎
tohshige commented 6 years ago

検証: 不足してるデータは自動でブラウザを起動せずWEB経由で拾ってくるテスト

制限:1秒に1回程度。別途JSON形式のデータに保存しておく

WEBページのhtmlをcheerioというモジュールで
jQueryライクな操作ができるオブジェクトに変換してくれる
スクレイピングモジュール「cheerio-httpcli」
https://qiita.com/ktty1220/items/e9e42247ede476d04ce2
tohshige commented 6 years ago

gulpfile.js

gulp.task('bsutf8', function() {
 browserSync({
  server: {
   baseDir: "./",    // set target folder
   directory: true // true
  },
  open :true,
  // open :false,
  notify:true,
  xip  :false
 });
});

https://github.com/tohshige/test/blob/master/used1r/gulpfile.js#L307