Gulp: Creating multiple bundles with Browserify
Published on March 25, 2015 Stefan on Mastodon Reading time: 8 minutes More on Gulp, Browserify, Tools With the ever-changing eco system of Node.js tools, a short version disclaimer. This article has been created using Gulp v3.8 Browserify Glob 5.0 Event Stream 3.3 Vinyl Source Stream 1.1 If something does not work when you’re using the same tutorial, please check if there’s been a major update ca
Gulp+Browserifyでsrc/**/*.jsをdist/**/*.jsにする | 高橋文樹.com | プログラミング
この投稿は 9年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 どうでもいい話ですが、けっこうはまったので。 最近のWebフロントエンド開発ではタスクランナー系の話題がわりと多く、僕もgruntからgulpに乗り換えて数ヶ月という感じなのですが、Browserifyを触っておいた方がいいのかなと思い、直近の趣味プロジェクトで採用してみました。 Browserifyってなに？ そもそもなのですが、Browserifyというのはnodeのrequire('hogehoe')っていう依存関係解決機能をブラウザにも持ち込もうという試みですね。 たとえばjQueryなんかでいうと、こんな感じになります。 $ = require('jquery'); $(document).ready(function(){ // 何かする }); requireを実
Browserifyの運用 〜 bundleを分ける - Qiita
Browserify使いはじめてしばらくたって、自分なりのコツがつかめてきた気がするのでまとめてみます。 まず今回のコンテキストとしては画面遷移をそれなりに含み、同じモジュールを各画面で使う前提。 SPAだとちょっと考え方が変わるかもしれません。 【対策以前】全部をbundleすると太る Browserify覚えてしばらくは、ページ毎の実行部分も含めてbundle.jsにひとまとめしてたけど、各ページ共通部分があるにもかかわらず別ファイルになってしまい、ブラウザキャッシュも生かせず、ファイルサイズも肥大化して微妙だなぁと感じていました。ビルドも毎回でgulpタスクも重くなりがちでした。 共通部分も別々のファイル ブラウザキャッシュ活かせない ファイルサイズ肥大化 ビルド重め ファイル配置例 . ├── node_modules │ ├── knockout │ └── unders
browserifyでjQuery(CDN)とjQueryプラグインを使う
jQueryをCDNから取得し、jQuery pluginが活躍している場合のbrowserify導入の備忘録 CDNのjQueryをrequireするCDNを使うことで、browserifyでbundleするファイルサイズは小さくなり、ファイル生成までの時間も短くなるという恩恵がある。 まず、CDNのjQueryを利用するのにbrowserify-shimを使う。 globalのjQueryを「jquery」というモジュール名でrequireできるようにする。 requireでincludeするjqueryはglobal(window)空間に存在しているので、 実際にはrequireなどせずとも使えるといえば使える。 require をするには以下の理由があるらしい。 require(‘jquery’)に統一することでwindow.jQueryというグローバルな名前空間へのアクセスを避け
uu59のメモ | browserifyとwebpack
webpack for browserify users browserify for webpack users browserify フロントエンド界にCommonJSスタイルを持ち込める 一部Node.jsのモジュールも使える。pathとかurlといった便利な小物から、zlibとかcryptoなどの本格派も移植されてる substackプロダクト。よってUNIX哲学へのこだわりが強く、必要なさそうな機能は本体で持ってない。 本体は単機能だけどwatchifyやdebowerifyやbundle-factorなどと連携して多くのことができる 当然ながらgrunt/gulpに組み込むことも出来る webpack フロントエンド界にCommonJSやAMDスタイルを持ち込める JS以外にもCSSとか色々扱える オプションやモジュールが色々あって気になったことは大抵できると思う grunt,
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
browserifyを試してみる - Qiita
既にアドベントカレンダーの投稿予定の日は過ぎ去っていますが、、書きました。 最近までbrowserifyに関して、substackが作った何か、ぐらいのことしか知りませんでした。 今回、クライアントサイドでJavaScriptのモジュール管理が可能にできるツールだと人から教わり、実際に試してみました。 (nodeのコアライブラリが利用できる点などは特に触れません。) browserifyとは何か browserifyとは、クライアントサイドのJavaScriptでモジュールシステムを実現するnpmです。 公式サイトには、 require('modules') in the browser とあります。 具体的には、 という形でモジュールの読み込みが出来るようになります。 (モジュールシステムを提供する点ではRequire.jsと似ているようで、実際はだいぶ違うように思います。) 単純にこれ
browserify をはじめてみる
Browserify を触ってみたメモ。 Browserify とは CommonJS のモジュールの仕組み、つまり Node.js の require をブラウザ上でも使えるようにするもの、ということでいいみたい。Readme を読む限りは、npm にあるモジュールをブラウザ上にもっていくために作られ始めたような印象をうけるが、ちまたのエントリーをみていると AMD に代わりに CommonJS でフロントエンドの依存関係の管理をする (RequireJS ではなく、Node.js 感覚で require 関数をフロントエンドで使う) ためのツールとしても使っていいようだ。 やりたいこと 複数の js ファイルの依存関係を記述したい 最終的に、依存関係を考慮した順番で、ひとつの js ファイルに結合したい 作りたいのは第三者のサイトに埋め込んでもらうスクリプト (サードパーティスクリプト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
