以前、 gulp＋node＋expressでlivereload使いたい って記事を書いたのですが、その BrowserSync 版です。 gulp + node + express で BrowserSync 使おう。 サーバサイドを node + express で実装しつつ、クライアントも同じプロジェクトで扱うようなプロジェクト向けのライブリローディング設定方法です。 意外と日本語で説明してくれる記事が少なかったのと、検索の結果↑の記事見てくれてる方が多かったので。 当時は、BrowserSync からどうやって express につないだらいいんだか、無理なんだかと思ってたのですが、BrowserSync に Proxy の設定をしてあげれば可能です。 方法 まず、express 側の再起動が必要になるようなリソースは、nodemon の機能を利用して監視します。 そして、Brow
動機 ソースコード修正したら、サーバ再起動→ブラウザリロードとかいろいろ捗らないので、ソース修正があったら自動でサーバ再起動〜ブラウザリロードまでしたい。 さらに、gruntじゃなくてgulp使いたい。 ちなみに、expressとか使わずにクライアントサイドのみの開発の場合はBrowsersynとか使ったほうがさらに便利です。 BrowserSyncでうきうきレスポンシブ対応アプリ開発 2015/08/19 BrowserSyncを利用した版の記事書きました。 gulp + node + express で BrowserSync 使おう 方法 nodemon + livereload を使用して実現してみました。 もしかしたらもっとスマートなやり方があるかもです。 2015/03/04 サーバ側のリロードの同期がとれない場合があったので、少し修正しました。 gulpfile.js作成 v
gulpfileをES6に置き換える必要があり、何気にgulpの情報追っていると、 そろそろv4.0がリリースされそうなのでざっくりと眺めてみた。 gulpfileをES6で書くまず、本来の目的だったこの件、v3.9ですでに対応されていた。 以下の条件であれば利用可能のようだった。 gulp v3.9以上 gulpfile.jsをgulpfile.babel.jsとする babel-core をインストールすること 内部的にはbabelで変換しているようだ。 続いて、v4.0のCAHNGELOGも眺めてみた。 gulp4.0をインストール cliの変更点--tasks-json と --verify オプションが追加されてる。 –task-json はタスクをjson形式で出力する。 –verify はpluginsがpackage.jsonを参照しているかチェックする。 APIの変更点大
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? gulpとわたし gulpの前はGruntを使っていた。gulp歴1年ほどで過去に30プロジェクトくらいのscaffold用のgulpファイルを書いたり、Brunchからgulpへ移行したり。gulp-iconvなど幾つかのgulpプラグインをメンテしてる。 gulp本とは Bleeding Edge Press から出版されている Developing a gulp Edge を献本して頂いた。Bleeding Edge Press は複数人のチームでコラボレートして旬な技術のEBookを発行している出版社。O'Reilly Medi
色々一気にやりすぎてちょっとパンク気味ですが、以下のリポジトリにおいて最近興味があったものを色々試してみました。 iOSやAPIサーバの仕事ばかりやっている間に大きく遅れてしまったWebのフロントエンド技術にキャッチアップしたいというのが狙いです。 satococoa/react-firebase-chat · GitHub 今できているものは単純なチャットアプリみたいなものです。ページングとかは手を抜いています。 試してみたこと一覧 React Firebase Web Starter Kit Bourbon Reactは最近流行りのJSのライブラリですね。最近仕事でVue.jsを導入してみてとても良い感触を得ているのですが、それと比べてどうなんだろう？という比較もしたいと思い。 FirebaseはいわゆるMBaaSの一つで、だいたいParseと同等の機能があるようですね。Firebas
【追記150805】さらに憔悴しないための有用な記事『アカベコマイリ | gulp なしの Web フロントエンド開発』が掲載されましたので、こちらもお勧めします。 こんにちは、@armorik83です。皆さん、Grunt / gulp使ってますか。おなじみなので、ここでは説明はしません。 この記事の要点 なぜGrunt / gulpは憔悴に至るのか、経緯と問題点 npm run-scriptの仕組みについて package.jsonにscriptを羅列することに対する是非 シンプルなgulpfileについての提言 経緯 さて、先日このような記事が界隈で広まっていました。 Grunt/Gulpで憔悴したおっさんの話 この記事については同意できるところと、そうでもないところと、両方有りました。ただ、Grunt / gulpを使っていて色々歯がゆさを感じている方は昨今増えているだろうと感じます
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
React.js + Webpack + ContainerJS でTODOリストを作ってみたので、手順をまとめます。 以前書いた、Knockout + ContainerJS でテスタブルにToDoリストを作るチュートリアル - うなの日記の改訂版。 最近流行ってるライブラリのお試しも兼ねて、いろいろ組み合わせて使ってみようという試みです。 ソース全体はこちらで公開しているので、あわせて参照ください。 ポイント モジュールローダーを require.js → Webpack に ソースはクラス単位で分割管理して、Webpackで1ファイルにまとめてリリースします。 WebpackだとAMDもCommonJSも両方扱えるので、npmのライブラリが使いやすくなるのは大きいかな。 あと、Loaderも便利ですね。 Viewモジュールを Knockout.js → React.js に 流行って
プラグイン開発に関する詳細な情報はgulpの公式ドキュメントを参照のこと。また、開発したプラグインを公開する場合はgulp公式によるプラグイン開発ガイドラインは必読（MUST readと書かれている）。README規約も見ておくとよい。 （2014/2/9追記：プラグイン開発ガイドラインの日本語訳を公開） なお、gulpプラグインはnode.jsパッケージの一種なので、公開する際の手順やpackage.jsonの記述方法などはnode.jsのドキュメントを参照のこと。 gulpプラグインの実態（i.e. pipeに渡すもの）はnode.jsのStream.Transformのサブクラス Stream.Transformとは、ストリームからの入力を受け取り、加工し、ストリームに出力するもの Stream.Transformのサブクラスを直接作って実装しても良いが、gulpプラグインではStr
要約 rimrafかdelを使用しましょう。 はじめに gulp.jsにおいて、かつてはファイル削除のためのプラグインとしてgulp-rimrafやgulp-cleanが存在しましたが、どちらもdeprecateされました。gulp.srcを用いない、ファイル削除以外の余分な処理を行わない手段を用いれば、これらのプラグインを使用する必要はありません。 単一のファイル／ディレクトリを削除する rimrafを使用します。従来より、gulp-rimrafの作者が推奨している方法です。 var rimraf = require('rimraf'); gulp.task('clean', function (cb) { rimraf('./dir', cb); }); gulp.task('build', ['clean'], function() { // Something });
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
