[B! browserify][gulp] inc-2734のブックマーク

Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境

Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 browserify とはそんなに詳しくないのですが、browserify はざっくりと言えば js で requireを使えるようにするためのツールです。今までであれば複数の js ファイルが必要な場合、例えば、a.js と、a.js がないと動かないb.js を読み込む場合だと、HTML ファイルに下記のような記述が必要でした。 // index.html <script src=".js/a.js"></script> <script src=".js/b.js"></script> browserify を使

inc-2734 2015/05/13

かいた

リンク

Gulp+Browserifyでsrc/**/*.jsをdist/**/*.jsにする | 高橋文樹.com | プログラミング

この投稿は 9年半前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。どうでもいい話ですが、けっこうはまったので。最近のWebフロントエンド開発ではタスクランナー系の話題がわりと多く、僕もgruntからgulpに乗り換えて数ヶ月という感じなのですが、Browserifyを触っておいた方がいいのかなと思い、直近の趣味プロジェクトで採用してみました。 Browserifyってなに？そもそもなのですが、Browserifyというのはnodeのrequire('hogehoe')っていう依存関係解決機能をブラウザにも持ち込もうという試みですね。たとえばjQueryなんかでいうと、こんな感じになります。 $ = require('jquery'); $(document).ready(function(){ // 何かする }); requireを

inc-2734 2015/05/08

リンク

Browserify を使ってみる - アカベコマイリ

Web ブラウザ向けの JavaScript でも node.js や node-webkit みたいに require で依存モジュールを読み込めるという Browserify を試してみる。 2014/12/23: 追記この記事で書いた gulpfile.js には問題があるので続く Browserify を使ってみる 2 - Source Map で修正この記事のサンプルと同じものが対象なので GitHub リポジトリへのリンクはタグで分けている Browserify と require HTML から参照する JavaScript 間に依存がある場合、通常は HTML 側の script タグの記述順で調整する。例えば jQuery を利用するスクリプトがあるならそれより先に jQuery を読み込む必要がある。そのため依存が増えるたびに HTML 側を修正する必要があり面倒。

inc-2734 2015/04/28

リンク

watchify を試す - アカベコマイリ

Browserify による JavaScript コンパイルは便利だがファイルが増えてくると処理時間の長さがネックになる。3 秒を超えたあたりから gulp.watch で監視するにはきつくなる感じ。スクリプト間の依存を解決しつつ *fy 系の処理もこなすのだから仕方ないともいえる。とはいえ、ひとつファイルを変更しただけで構成ファイル全体がコンパイルされるのは防ぎたい。そのためには差分コンパイルが必要だ。というわけで watchify を試してみる。 2015/5/20 補足本記事と関連する記事として「gulp-watchify を試す」を書いた。こちらは gulp プラグインで Browserify/watchify を処理している。 watchify は Browserify をファイル監視つきで実行するためのモジュールである。コマンドラインツール、Node モジュールとして利

inc-2734 2015/04/28

リンク

gulp と browserify と vinyl の話 - <body>

browserify の API が変わったので、この記事のコードのままでは動きません！ gulp で browserify しようとしたんだけど、色々ハマったので、ひとまずまとめておきたい。登場人物 gulp ちゃんフロントエンドのビルドエンジン。 grunt を馬鹿にしてる。 browserify ちゃん CommonJS スタイルの require をフロントエンドでも使えるようにする npm モジュール。調子に乗ってるけど webpack がきになる。 vinyl ちゃん npm 全般で使うオブジェクトの名前。モナドを感じる。俺がさっき知った。 gulp の仕組みそもそも gulp って、確かに grunt より短く書けるけど、具体的になにしてるのかよくわかんねーよ！って思ったので、まず、この短いコードから考えていきたい。 var gulp = require(