gulp

Node.jsでSocket.IOなアプリをHerokuにデプロイ
Socket.IOサーバーとしてHerokuを使ってみよう。 実験中 https://shielded-caverns-4913.herokuapp.com/ Heroku練習 以前作ったユーザーが生きていたので改めてチュートリアルを実践。 Getting Started with Node.js on Heroku gulpでexpressなサーバを作る 普通にnpmなプロジェクトを作る。 > mkdir bvh_sio > cd bvh_sio > npm init > mkdir src > mkidr src/server > mkdir src/client > cd src > tsd init > tsd query node -rosa install > tsd query express -rosa install > tsd query serve-static -rosa install > tsd query socket.io -rosa install Herokuにデプロイする場合はでdevDependenciesじゃなくてdependenciesに書くらしいのでそのようにした。 package.json { "name": "bvh_sio", "version": "1.

Socket.IOな実験環境
Socket.IOを実験する環境のメモ。 Expressは、serve-staticで静的なファイルのhostingが目的兼後で拡張できるように coffee-scriptは無しでES6要素をなるべく入れる Socket.IOを手早く展開するのが目的なのでtypescriptは抜きにしようと思ったが、無い方がつらいので矢張り入れる https://github.com/ousttrue/sio_sample Project生成 > mkdir sio_sample > cd sio_sample sio_sample> npm init -y sio_sample> npm install gulp gulp-load-plugins gulp-nodemon browser-sync -D sio_sample> npm install express socket.io body-parser method-override connect-logger errorhandler serve-static --save vscodeでes6を使えるように jsconifg.json { "compilerOptions": { "target": "ES6" } } 後で拡張できるように以下のようなディレクトリ構成にする。 build <- srcから(加工して)コピーされる src <- 加工前のファイル置き場 + server + app.js + client + index.html + index.js src/server/app.js "use strict"; const http = require('http'); const express = require('express'); const port = process.

Three.jsのBuild
骨入りモデルとかやってみようかと思ったのだけど、その前にThree.jsのソースを見やすい状態で作業したい。 結合前のThree.jsを自前ビルドしながら運用する方法を調べてみる。 build.py, or how to generate a compressed three.js file と本家に書いてある。python使うんか。gulpでやりてぇな。 全部concatしてuglifyしたらいいんじゃないか。 やってみよう。 とりあえずbowerで導入したthree.js関連を削除。 threejs.srcフォルダを作ってthree.jsソースのsrcディレクトリの中身を展開した。 gulp.task('bowerjs', function () { var files = [ './bower_components/jquery/dist/jquery.js', './bower_components/highlightjs/highlight.pack.js', './bower_components/stats.js/build/stats.min.js', './lib/**/*.js', // <-- 中にthree.jsのsrcをコピーした ]; gulp.src(files) .pipe($.plumber({ errorHandler: $.notify.onError('<%= error.message %>') })) .pipe($.debug({ title: 'bowerjs files:' })) .pipe($.sourcemaps.init()) //.pipe($.uglify()) .pipe($.concat('all.min.js')) .pipe($.sourcemaps.write('./', { sourceMappingURL: function (file) { return file.relative + '.map'; } })) .pipe(gulp.dest('build/js')) .pipe(browser.reload({ stream: true })) ; }); これで作ったall.min.jsではエラーが出てだめですね。 単にsrcをconcatするだけではだめだ。本家のドキュメントを読み始める。 /three.js/utils/build/ でビルドできるよって書いてあります。python関係ないみたいだ。

gulpで静的サイト生成その2
gulpで静的サイト生成その2 引き続き、サイト生成作業を続行中。見た目は置いておいて(bootstrap入れたけど)機能を優先して作ろう。 「次へ」と「前へ」のリンクを作れば内部リンクは揃う。 gulpは自由度が高いのでなんとでもなるな。 強まったmakeのようで非常にポテンシャルを感じる。 中期的なも目標としてはローカルもしくはLAN内のnode.jsがホストとなるGUIをさくっと作れるようになるというものがあるのだが、 関連項目が多すぎてひたすら拡がっていくのが危険だ。 特に、インターネットで調べながらだと収束せずにひたすら拡散する傾向がある。 anglar, backboneは避けようと思ったのだがmithrilは気になっているし、electronも気になっている。 あと、typescriptもはやめに使いこなしたい。 だいぶgulpがわかってきた 「前へ」と「次へ」は全部のファイルをリストに投入してソートして隣通しのパスを得る必要がある。 一度リストに投入してから前へと次へを処理した後で、再度リストの中身を一個ずつ後ろに渡せばいいじゃない。 ということでやってみたらあっさりできた。 野良プラグインの作り方が分かるとgulp面白いな。 make-toc.js var through = require('through2'); var gutil = require('gulp-util'); var path = require('path'); module.exports = function (outputFileName, options) { options = options || {}; var dest = options.dest; var filelist = []; function transform(file, encoding, callback) { // ファイルを集める filelist.push(file); // callback()は必ず実行 callback(); } function flush(callback) { if (filelist.length > 0) { // sortすることで日付順に並ぶ filelist.

gulpで静的サイト生成
gulpで静的サイト生成 1年ほど放置していたけれどまた戻ってきた。 html生成システムをOctpress, Tinkererと渡り歩いてきたが今度はgulp上に システムを構築中。 しばらく、node.js周りの作業記録とかを書いてみようと思う。 当初、node.js上の静的サイト生成システムを物色してて HubPress, Harp, Metalsmithが候補にあがって、 Metalsmithかなぁという感じだったのだけれど From Jekyll to Gulp.js を発見して「これだ。」と思いgulpの修行を兼ねてごにょごにょやっているところです。 OctpressやTinkererはなんだかんだでブラックボックス感を払拭できなかったのだけれど 今回のこのシステムは流石にわかりやすい。 gulpストリームのtransformを手作りする中でnode.jsのストリームAPIの理解が 進んだのもありがたい。 ひとまず白いサイトができたのでbootstrapを入れて今風の見てくれにしたいなぁ。 あと、vscodeはnode.jsで遊ぶにはすごくいい。 markdownエディタとしても。