Riot+Gulp+Browserifyで時計サンプルを動かす - Qiita
RiotはReactライクなマイクロMVPライブラリです。タスクランナーを噛ませたいのでこちらのサンプルを動くようにしたり、いろいろいじってみた。 デモ 時計を表示するclockタグを表示します。インスタンスごとに長針・短針・秒針の表示を変えています。マウスホバーでポーズします。 via http://www.triplet.fi/blog/adding_compiled_riot_tags_to_your_gulp_browserify_build/ Riotタグを書く Riotの特徴はなんといってもHTML+CSS+JavaScriptの混ぜ書き。一見HTMLに見えますが、JavaScriptとしてトランスパイルされます。 <clock> <svg> <line></line> <circle></circle> ... </svg> <style scoped> :scope { .
Rails で watchify と browserify を使い分けられる gem を作った - Qiita
弊社は今週はハックウィークといって通常業務止めて周辺ツール作ったりいつもはできないことをやる週として割り振られている。(その割には昨日Contributionの計算の変更とかリリースしてた気がするが) それで仕事で使ってた browserify_rails が遅すぎて辛かったので、趣味でいつも使ってた watchify をRailsにインテグレーションするgemを作ってみた。 はじめて作ったgemなんで手加減して https://github.com/increments/brwy_rails 。 brwy は browserify_watchify_rails が長すぎて略したけど意味わからん気がする。 watchify とは browserifyと違ってコンパイル後もコンパイラプロセスが中間状態を保持したまま常駐して、依存のファイル監視して差分ビルドを行ってくれる。仕組み知ってたら速く
フロントエンドJavaScriptでもrequireを使ってモジュールを分割する - Qiita
最近、今まで色々と書いてきてた WebフロントエンドUIの 各モジュールファイルをあらかた書き換えた。別に機能を増やしたりしたわけでないんだけど、最近の JS のモジュール化の動きで今までの方針でもモダン（って良い方があってるかどうかは知らんけど）な方針も使えるように変更したので、その経緯とか結果とかを残しておこうと思った次第です。 今までの書き方は基本的にプロジェクト毎にユニークなグローバルのオブジェクトを作ってそこに各UIのオブジェクトをプロパティとして生やしていくという多分それなりにスタンダードだった方針を取ってた。 // moduleA.js var app = app || {}; (function(w, $, app){ var moduleA = function(){ // モジュールを記述 }; app.moduleA = moduleA; // プロジェクトグローバル
Rollupがちょうどいい感じ - Qiita
昨年の途中からちらほら耳にするものの、まだ「なにそれ美味しいの?」なRollupですが、馴染むと手放せなくなる感じ。どんなものか、使い方から、プラグインのつくりかたまで、概観してみたいと思います。 Rollupって何? 複数ファイルに書かれたJavaScriptを、モジュールなどを読み込みつつ、ひとつのバンドルにしてくれるツール。WebPackとかBrowserifyみたいなやつです。依存モジュールの解決や、AltJSのプリコンパイルしたり、など。大きな特徴として、次の点がよく挙げられます。 生成ファイルが小さい ES6(ES2015)ネイティブ ドキュメント類はまだ最低限という感じですが、WebPackかBrowserifyにさわったことがあれば、そんなに迷うことはないかも。ただ、トップページに行っても正直よくわからないので、今のところWikiが一番の情報源です。公式の情報で見るべきとこ
webpack入門 - Qiita
React初学者のためのガイドで著者のPete Hunt氏がオススメしていたwebpack入門を和訳しました。 意訳が含まれるため、誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://github.com/petehunt/webpack-howto Webpack入門 このガイドの目的 これはwebpackで物事を成し遂げるためのクックブックです。インスタグラムで実際に使用されているものをほぼ網羅した実践的な内容となっています。 私からのアドバイス：まずはこれをwebpackの参考資料として手元に置いて始めてみましょう。公式ドキュメントは理解を深めるために後で参照することにしましょう。 前提条件 browserify、RequireJSまたは類似したものを知っていること 下記のいずれかに価値を見出していること バンドルの分割 非同期ローディング 画像やCSSの
Browserifyの運用 〜 bundleを分ける - Qiita
Browserify使いはじめてしばらくたって、自分なりのコツがつかめてきた気がするのでまとめてみます。 まず今回のコンテキストとしては画面遷移をそれなりに含み、同じモジュールを各画面で使う前提。 SPAだとちょっと考え方が変わるかもしれません。 【対策以前】全部をbundleすると太る Browserify覚えてしばらくは、ページ毎の実行部分も含めてbundle.jsにひとまとめしてたけど、各ページ共通部分があるにもかかわらず別ファイルになってしまい、ブラウザキャッシュも生かせず、ファイルサイズも肥大化して微妙だなぁと感じていました。ビルドも毎回でgulpタスクも重くなりがちでした。 共通部分も別々のファイル ブラウザキャッシュ活かせない ファイルサイズ肥大化 ビルド重め ファイル配置例 . ├── node_modules │ ├── knockout │ └── unders
app/assets/javascripts以下のJSを全てcommonjsのrequireに書き換える - Qiita
仕事でgulpを使って僕がよくいじる一部のjsを高速でビルドできるようにしてみたのだが、JSをいじらない人の手元でなにかと差分がおかしくなったり、ビルドするタイミングを伝えないことで問題起きたり、その為に呼ばれて治すのがとにかくめんどくさかったため、思い切ってすべてのビルド工程をbrowserify_railsとbrowserify-incrementalと(そのtransform)に押し込んで、gulpを排除してみた。 そんで、browserify_rails は導入しただけだと嬉しさがあまりないので、スクリプトを書いて一気にcommonjsに置き換えることにした。 browserify_rails に関してはhokacchaさんの記事が便利。 モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ 脇道にそれるが、僕は最初、これをbrowserifyを模した
はじめてのVue.js - 単一ファイルコンポーネントを作れる環境構築編 (npm + gulp + browserify + babel + vueify)
はじめてのVue.js - 単一ファイルコンポーネントを作れる環境構築編 (npm + gulp + browserify + babel + vueify) browserifyVue.jsvueifybabel この記事では、Rails や PHP といったサーバーサイドのプログラミングをメインでやっている人向けに Vue.js を用いた簡単な TODO 管理アプリを作るまでを、2回に分けて解説します。 なお、著者の作業環境の都合上、Mac OSX を対象として記事を執筆しています。 1回目では、Vue.js を用いたアプリのモダンな開発環境構築について説明いたします。 Vue.js とは？ Vue.js は「リアクティブなデータバインディング」と「コンポーネントシステム」に主眼を置いたフロントエンド向けの JavaScript ライブラリです。 最も簡単な vue.js の始め方 (
既存 JS ファイルを Browserify 用に書き直す - Qiita
以前書いた記事で Browserify の使い方とか Browserify でやりたい事が分かったと思う。 では実際に Browserify を使って今までに書いたコードを Browserify 用に書き直してみる。 といっても大したことはない。1つのオブジェクトなり関数にまとめるだけで良い。 例として、よくあるスムーススクロールのスクリプトを挙げる。 $(function(){ $(".anchorlink").on('click', function(e){ e.preventDefault(); var href = $(this).attr("href"); var speed = 500; var easing = 'swing'; var target = $(href == "#" || href == "" ? 'html' : href); var animatePara
browserify (browser-pack) はどんなコードを出力するのか？ - Qiita
はじめに browserifyは、CommonJSスタイルで書かれたJavaScript (Node.js)のコードをクライアントで実行可能な形式に変換するライブラリです。ここではbrowserifyがビルドの際に用いているbrowser-packが、与えられたコードをどんなコードを出力するのかを見ていきます。browser-packのバージョンは6.0.1。 入力 Readmeにある以下のjsonを試してみる。この形式はちょうどmodule-depsの出力結果と同じもので、browserifyも内部でmodule-depsを利用している。内容は 各モジュールを一意に指すID コードの本体 各モジュールが依存する（内部でrequire()を使って呼び出している）モジュールのパスとID そのモジュールがエントリポイントかどうか の4種類。 [ { "id": "a1b5af78", "sou
例えばBrowserifyをなんて発音するのかわからない時にとるべき行動 - Qiita
JSをやっていると日々いろんなフレームワークやらツールに出会いますが、 それを人に口で話すときに読み方をなんて読むのかわからなくて変な汗をかく時がたまにあります。 最近、読み方がわからなかった言葉がこれです。 Browserify 私はリアルで人とBrowserifyについて話すことがないので、 口にだすことがありませんでした。 しかし、最近チーム内でBrowserifyを導入することになったので、 Browserifyを口にださなくてはいけなくなりました。 他のメンバーはBrowserifyを知らないのでなんて読むかも当然知りません。 こうゆう状況は、自分が間違えた読み方をしてしまうとみんな間違えて覚えてしまう可能性があります。 うかつに変な読み方をした時の罪は重いのではないかと思います。 そこで私がとった行動を書いておきます。 既存の英単語から名前がとられているか調べて見る。 wiki
Riot.jsで通貨コンバータを作る - Qiita
Riot.jsを使った、シンプルな通貨コンバータです。Browserifyでプリコンパイルするサンプルとして作ってみました。Yahoo!からAPIで現在の通貨レートを取得して表示するだけ。インクリメンタルサーチができます。(よく考えたら、「コンバータ」ですらないですね) ※この記事は、こちらの日本語版的な内容になります。 試す GitHub Pagesに置いておきました。Riot.js Currency Calculatorにアクセスしてみてください。 クローンとビルド 手元で試すには、次の手順でどうぞ。 このリポジトリをクローン $ npm install $ npm start Gulp と Browserify この例では、いくつかのgulpタスクが定義されています。 clean: 生成されたファイルを削除する browserify: .js, .tagファイルをコンパイル css:
browserifyでgulp-plumberが効かない時の対処方法 - Qiita
gulpでwatch中に、何かしらエラーが発生した場合、通常watchもろともgulpが終了してしまい、もう一度watchをしなくてはならなくなってしまいます。 これが何度もあると非常にストレスが溜まって体に良くない。 ここで便利なのが、gulp-plumber。こいつを用いることによってエラーをした後もwatchが止まらないで済みます。gulp-notifyというやつを入れると通知が出てさらに便利になります。 しかし、browserifyでjsをがっちゃんこさせるときに、jsがおかしいとplumberでもエラーを制御することが出来ませんでした。 gulp-starterで解決 gulp-starter 上記ファイル内の、 gulp/util/handleErrors.js var notify = require("gulp-notify"); module.exports = func
TypeScript & CoffeeScript & Browserify & mocha & Reactによるフロントエンド開発環境 - Qiita
TypeScript & CoffeeScript & Browserify & mocha & Reactによるフロントエンド開発環境CoffeeScriptTypeScriptbrowserifygulpReact このプロジェクトは以前のプロジェクトにmochaとReactの対応、自動ビルド時間短縮を施した置き換え版です。 GitHubへのリンク 概要 このプロジェクトは、AltJS(TypeScript & CoffeeScript) & Browserify & mocha & React構成の雛形プロジェクトです、以下の機能を持っています。 TypeScript、Browserifyの差分ビルド gulp.watch、Watchifyの変更監視による自動ビルド TypeScript、CoffeeScriptのソースファイルを混在出来る ファイルごとに型が欲しいか、短く書きたいか
フロントエンドエンジニアのための「俺の最近のRailsのJS開発環境」を考察する - Qiita
「俺の最近のRailsのJS開発環境」 for フロントエンドエンジニア TL;DR 「片手間のJS」ならhogehoge-railsで大丈夫（e.g. browserify-rails, sass-rails, etc.） 「本気でJS書く」ならsprocketsから切り離す（e.g. SPA, etc.） 迷えるフロントエンドエンジニアに愛の手を ※ 個人の見解です はじめに 本記事の内容は個人の見解であり、所属する組織の公式見解ではありません． 本職は学生，片手間にRailsエンジニア，そのさらに片手間に過激派フロントエンドエンジニアやってる人間の戯言です． 『俺の最近のRailsのJS開発環境を教えてやる』を受けて，フロントエンドエンジニアの視点から見たRailsのJS環境を考察してみた記事になります． 元記事をdisっているわけではなく，むしろリスペクトしたうえで視点を変えてみた
もうgulpで憔悴しない - 低依存gulpfileのレシピ - Qiita
【追記150805】さらに憔悴しないための有用な記事『アカベコマイリ | gulp なしの Web フロントエンド開発』が掲載されましたので、こちらもお勧めします。 こんにちは、@armorik83です。皆さん、Grunt / gulp使ってますか。おなじみなので、ここでは説明はしません。 この記事の要点 なぜGrunt / gulpは憔悴に至るのか、経緯と問題点 npm run-scriptの仕組みについて package.jsonにscriptを羅列することに対する是非 シンプルなgulpfileについての提言 経緯 さて、先日このような記事が界隈で広まっていました。 Grunt/Gulpで憔悴したおっさんの話 この記事については同意できるところと、そうでもないところと、両方有りました。ただ、Grunt / gulpを使っていて色々歯がゆさを感じている方は昨今増えているだろうと感じます
モダンJavaScriptアプリケーション開発 in Salesforce - Qiita
はじめに HTML5でのアプリケーション開発は、エンタープライズ向けアプリケーションでも当たり前のようになってきました。これはSalesforceにおけるアプリケーション開発でも同じです。 Salesforceでのアプリケーション開発はVisualforce/Apexで行うというのが数年ほど続いてきたので、HTML5つまりJavaScriptを主体とするアプリケーション開発にはなれていないベンダーも多数あるかと思います。自分は創業当時からJavaScriptでのSPA(Single Page Application)をメインプロダクトに据えた会社を運営しており、Salesforceのパートナーとしても長いことやっていますので、このあたりのノウハウは比較的多い方です。そのためこのエントリはそれなりに説得力を持ってお届けできるとは思います。 真っ先に行うべきこと もしあなたがSalesforc
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Railsで利用するフロントエンドのライブラリをnpmからインストールする - Qiita
browserify + npmでReactを使う場合はNODE_ENVを設定するとよい - Qiita
Gulp(React.js+Browserify)でyak shaving - Qiita
