Gulp+Browserifyでsrc/**/*.jsをdist/**/*.jsにする | 高橋文樹.com | プログラミング
この投稿は 9年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 どうでもいい話ですが、けっこうはまったので。 最近のWebフロントエンド開発ではタスクランナー系の話題がわりと多く、僕もgruntからgulpに乗り換えて数ヶ月という感じなのですが、Browserifyを触っておいた方がいいのかなと思い、直近の趣味プロジェクトで採用してみました。 Browserifyってなに？ そもそもなのですが、Browserifyというのはnodeのrequire('hogehoe')っていう依存関係解決機能をブラウザにも持ち込もうという試みですね。 たとえばjQueryなんかでいうと、こんな感じになります。 $ = require('jquery'); $(document).ready(function(){ // 何かする }); requireを実
SLOBSERVER - L'actualité de Second Life
There are several aspects to consider when releasing a product or service into the market. With so much competition in all sectors, it might be hard for your product to stand out if you don't start by marketing it properly. Marketing, as well as how a user reacts to your product, is something that you should think of from the inception of your product to its launch. The Time to Market plays a sign
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section3 ～Browserifyをマスターしよう～ - Qiita
はじめに この記事は「旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門」の3つ目の記事です。 シリーズの最初から読みたい方は 旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ へどうぞ。 また、このシリーズではECMAScript5を概ね対応するブラウザを対象としています。 もっと平たくいうと、IE8以下は切り捨てます。ご了承ください。 そしてプロによるマサカリ 対策として一つ重要な注意書きをします。 この記事中で出てくる「CommonJSモジュール」という表現は全て「CommonJSのModules 1.0仕様をベースとして、Node.jsが独自に拡張したCommonJS派生のモジュール仕様及びインターフェース(require/exports
gulp と browserify と vinyl の話 - <body>
browserify の API が変わったので、この記事のコードのままでは動きません！ gulp で browserify しようとしたんだけど、 色々ハマったので、 ひとまずまとめておきたい。 登場人物 gulp ちゃん フロントエンドのビルドエンジン。 grunt を馬鹿にしてる。 browserify ちゃん CommonJS スタイルの require をフロントエンドでも使えるようにする npm モジュール。 調子に乗ってるけど webpack がきになる。 vinyl ちゃん npm 全般で使うオブジェクトの名前。モナドを感じる。 俺がさっき知った。 gulp の仕組み そもそも gulp って、確かに grunt より短く書けるけど、 具体的になにしてるのかよくわかんねーよ！ って思ったので、 まず、この短いコードから考えていきたい。 var gulp = require(
stringifyを使ってテンプレートへhtmlファイルをrequireできるようにする - Qiita
Vue.jsを触っていたときに、componentに指定するtemplateでhtmlファイルを直接requireしたいと感じた。こんなときがbrowserifyの使いどころ（？）だと思ったはなし。 ... // template: <div>Hello!</div>ではなくて // 下みたいな感じにファイル名指定でテンプレートをrequireしたい var components = { root: Vue.extend({ template: require("./main.html") }), entrance: Vue.extend({ template: require("./entrance.html") }) }; ... いろいろ調べたところ、stringifyというパッケージを使うとコンポーネントのテンプレートへ渡すために文字列化したhtmlをjsファイルにbundleする
browserify-shimを使って、CDN経由で外部JSライブラリをrequireする
Browserifyをここ最近よく使うようになってきました。ReactのJSXやES2015のコンパイルもBrowserifyで行えるのでなかなか便利です。今回こちらのブログに自作のjQueryプラグインを導入したのですが、npm経由でインストールして、Browserifyを使ってrequireして読み込むようにしました。ただjQuery本体だけはCDN経由で読み込みたいと思い、browserify-shimを使ってみることにしました。その辺の話を書きたいと思います。 BrowserifyとはBrowserifyはご存知の方も多いと思いますが、ブラウザで使用するJSファイルに対して、requireメソッドを使ったモジュールの読み込みを可能にしてくれるツールです。さらに依存関係を考慮し、複数のJSファイルを1つのファイルにまとめてくれる便利なツールです。 Browserifyインストールはn
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://4uing.net/blog/gulp-package/