普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
【追記150805】さらに憔悴しないための有用な記事『アカベコマイリ | gulp なしの Web フロントエンド開発』が掲載されましたので、こちらもお勧めします。 こんにちは、@armorik83です。皆さん、Grunt / gulp使ってますか。おなじみなので、ここでは説明はしません。 この記事の要点 なぜGrunt / gulpは憔悴に至るのか、経緯と問題点 npm run-scriptの仕組みについて package.jsonにscriptを羅列することに対する是非 シンプルなgulpfileについての提言 経緯 さて、先日このような記事が界隈で広まっていました。 Grunt/Gulpで憔悴したおっさんの話 この記事については同意できるところと、そうでもないところと、両方有りました。ただ、Grunt / gulpを使っていて色々歯がゆさを感じている方は昨今増えているだろうと感じます
webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。 webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基本的な使い方を見ていきます。 ※もちろん Grunt/G
http://iotlt.connpass.com/event/11373/ IoTLT vol.1にて発表。 MQTTを使った電子工作の入門編的なスライドです。 JavaScriptだけで電子工作を完結します。Read less
今年もHTML5 Minutesに登壇してきました。こんにちは、先生です。 当日は「フロントエンド開発スピードをあげるための環境を作ってみた話」をしてきました。 今回はその環境を使ってみるまでの手順を書いていきたいと思います。 必要なものをインストール NodeJS Gulp WebPack Bower PhantomJS NodeJSとGulpのインストールは過去の記事「Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ」をご覧ください。 WebPackのインストール WebPackはさまざまな形式のモジュールを静的なファイルにまとめて出力してくれるツールで、拡張性が高く最近好んで使っています。 WebPack http://webpack.github.io/ インストールはnpmを使って簡単にできます。 npm install webpack -g ※ macは
http://qiita.com/advent-calendar/2014/frontrend 概論 ここ近年のモダンJSは特に理由がなければcommon.jsのrequireスタイルで記述され、webpack/browserifyでビルド/読み込むことを前提にしてよい。今やビュー層を除いてブラウザとnodeのライブラリの境界は非常に曖昧である。 識者諸君においては常にどちらの環境でも読み込めるようなライブラリを提供するように心がけることを切に願う。 今日はライブラリの名前しか出さないんで各自ググるように。 立場 サーバサイド~ゲームプログラミング出身node寄りフロントエンドエンジニア このサイトのスタッフだけど他のことに手一杯でQiitaのフロントはまだそんなにいじってない すまんな 他ってなんだろうな 言語 CoffeeScript TypeScript 最近DDDっぽい構成を目指し
詳しくは上記連載を見てもらえば分かりますが、GruntとはJavaScriptを使用してWeb開発に伴うさまざまな作業を自動化して効率良く行うためのビルドツールです。 このツールでは「タスク」と呼ばれる一連の処理を設定ファイルに記述していきます。Gruntの設定ファイル（Gruntfile.js）は、タスクに対してJSON形式でパラメーターを指定していくのですが、ここで少々問題があります。 シンプルなタスクであれば分かりやすいのですが、多くの拡張機能（プラグイン）を使用したり、タスクの制御を細かく行う必要が生じたたりした場合、Gruntfileの記述量が増えて冗長になり、タスク同士の関連やタスク実行結果も分かりにくくなってしまいます。 そんなGruntの問題点を解消することを目的として開発されたのが、今回紹介する「gulp.js」（以下、gulp）です。 gulpはGruntを継承しつつ、
JavaScriptは設計が難しい。経験上、すぐグシャグシャになってしまう。よくわからなくなる。もちろん、私のスキル不足というのはあるだろうけれども、スキルが不足してるのはしかたないので、学習は続けることは前提であるにしても、技術的に解決できるなら技術に頼りたい。そうした意味で、いわゆるAltJSの中ではTypeScriptが有望だろうと思う。 RailsとTypeScript TypeScriptを使うにしても、それ単体で使うというシーンは、Webアプリケーション開発という文脈ではあまりない。たとえば、Railsで開発しているWebアプリケーションのフロントエンドを構成する言語として使うことになるだろう。その際、まず考えるべきことは、Asset Pipelineとどう折り合いをつけるかということだろう。 Asset Pipelineは、以下の機能を担っている: 拡張子(例:applica
A toolkit to automate & enhance your workflowLeverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines. TypeScriptDevelop in any languagePNGCreate assets with any toolMarkdownWrite using any formatJavaScriptGet compiled codeWebPGet optimized imagesHTMLGet rendered content
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
