gulp と browserify と vinyl の話 - <body>
browserify の API が変わったので、この記事のコードのままでは動きません！ gulp で browserify しようとしたんだけど、 色々ハマったので、 ひとまずまとめておきたい。 登場人物 gulp ちゃん フロントエンドのビルドエンジン。 grunt を馬鹿にしてる。 browserify ちゃん CommonJS スタイルの require をフロントエンドでも使えるようにする npm モジュール。 調子に乗ってるけど webpack がきになる。 vinyl ちゃん npm 全般で使うオブジェクトの名前。モナドを感じる。 俺がさっき知った。 gulp の仕組み そもそも gulp って、確かに grunt より短く書けるけど、 具体的になにしてるのかよくわかんねーよ！ って思ったので、 まず、この短いコードから考えていきたい。 var gulp = require(
gulpとBrowserifyでJSをビルドしてみた - Qiita
はじめに gulpとBrowserifyを組み合わせてフロントエンドJSをビルドする機会があったので、一通りやってみたことをまとめてみた。 gulpについて Node.jsのstreamを活用したビルドシステム、ということらしい。 Streamのおかげでビルドフローをとても直感的に記述できると感じた。 他のWebフロントエンドのビルドシステムは使ったことがないので比較はできないけど…。 Browserifyについて node.jsと同じように (npm、requireなどを使って) モジュール化されたフロントエンドJSが書けるツール。便利。 JSのモジュール化というと、最近はwebpackというのもあるらしい。 基本 gulp = require 'gulp' source = require 'vinyl-source-stream' browserify = require 'brow
Browserify: それはrequire()を使うための魔法の杖 - Qiita
JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。 ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です) require!: Bowerも使えます 対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけで
browserify + debowerify + vueifyを使ったvue.js component開発 - Qiita
この記事はVue.js Advent Calendar 2014 16日目の記事です。 みなさんはvueifyというツールをご存知でしょうか？ vueifyはvue.jsのコンポーネントをHTML/CSS/JSをコンポーネント単位で一つのファイルに記述して、モジュール管理できるbrowserifyを利用したビルドタスクです。 まだ日本ではあまり記事がなく普及していないかもしれませんが、試しに使ってみたら非常に生産性を高める可能性を秘めていることがわかりましたのでご紹介させていただきます。 今回の記事ではbrowserify + debowerify + vueifyも使ってVueコンポーネントの簡単なサンプルを作ります。 ツール まずはそれぞれのツールの紹介です。 http://browserify.org/ browserifyは既にご存知の方が多いと思います。 元々はnodejsのモジ
BrowserifyからWebpackへの移行時の注意点 - Qiita
思い立ったが吉日ということで、プロジェクトのモジュール管理をRequire.jsからBrowserifyへと移行し、その直後にWebpackに移行しました。もうちょっと考えてツールを選ぼうと思います。 さて、Require.jsからBrowserifyへ変えた理由は、シンタックスをCommonJS的に書けるようになって、全体がシンプルになるから、という理由でしたが、BrowserifyからWebpackへの移行は、もうちょっと切ない理由での移行になりました。 Webpackとは ドキュメントも若干わかりづらいですが充実しており、基本的にここだけで必要な情報はほとんど得られます。 なのでこちらをどうぞ・・・じゃさすがにあれなので、ドキュメントに書いてある、作られた動機などを若干紹介します。 今はモジュールシステムがいろいろある CommonJS AMD <script> タグ ES6 Mod
#JSオジサン でハイブリッド時代のCIツールの発表してきた - from scratch
いやー、めっちゃ楽しかったわ、JSオジサン。 もう色々と感想ブログは出てるけど、僕も一言で感想を言うと以下の様な感じです。 #JSオジサン 楽しかった。ギャルにも会えたし、typescriptオジサンにも会えた。ECMA-262 Edition 5.1を読む本も貰えたし、じゃんけんに勝ってエコバックも貰えた。50-60位の中規模なカンファレンスだとやっぱり話が濃くなるから良かった。— Yosuke FURUKAWA (@yosuke_furukawa) March 27, 2014 実際名前は知ってても顔を見たことない人もちゃんと話したことない人も多くて、そういう人たちと知り合えたのがやっぱり大きかった。 僕が発表した内容 ここ最近、substack wayでモジュールを書くことを実践してます。 本当は上のリンクにあるsubstack wayの話をすごくしたかったんですが、5分で伝えきれる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
