タグ

javascriptとgruntに関するmanabouのブックマーク (9)

  • 最近のビルドツールって何なの? - 檜山正幸のキマイラ飼育記 (はてなBlog)

    TypeScriptでは、コンパイルが必要です。プログラムをブラウザーとNode.jsの両方で使おうとすると、さらに加工が必要です。ミニファイだの文書も作るだのすると、ちょっとしたビルドプロセスとなるので手作業では辛くなります。 今更Makeでもないよなー、と思い、最近のビルドツールを試してみました。 内容: 流行りすたりが激しすぎる gulpを使ってみる:こんなサンプル gulpのビルドスクリプト タスクランナーってのはビルドツールとは違うのか? ビルドツールは進化したのか 参考資料: 例題のファイルとコマンドの一覧 ソースファイル 追加の話: gulp問題ひきずり:ウォッチがまたおバカ過ぎる 流行りすたりが激しすぎる 「確かGruntってツールがあったよな」と、インストールと使い方を調べていると、やたらにgulpって単語が目立つんですよね。Gruntのライバルの新興勢力らしいです。 「

    最近のビルドツールって何なの? - 檜山正幸のキマイラ飼育記 (はてなBlog)
  • webpack で始めるイマドキのフロントエンド開発 - Qiita

    webpack とは webpack は WebApp に必要なリソースの依存関係を解決し、アセット(配布物)を生成するビルドツール(要するにコンパイラ)です。JavaScript だけでなく、CoffeeScript や TypeScriptCSS 系、画像ファイルなどを扱うことができます。 WebApp のビルドツールは Grunt や Gulp が有名です。これらは基的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした(少なくとも、自分はそうでした)。 webpack を使えば、Grunt も Gulp も必要ありません!覚えるべきことはほとんどありません。(必要なら)簡単な設定ファイルを書いて webpack コマンドを実行するだけです。 以下では基的な使い方を見ていきます。 ※もちろん Grunt/G

    webpack で始めるイマドキのフロントエンド開発 - Qiita
  • 素人のための Grunt プラグイン利用のすすめ - Qiita

    はじめに Qiita 初投稿ながら Advent Calendar 書かせて頂きます。 書きたかった他の方々すみません。 この記事は、自分も含めて、 「Grunt とか gulp.js とか、名前は聞くけどそういうのよく分からないよ」 「使ってみたけど、なんか上手く行かないよ」 という人たち向けの記事です。 巷では「gulp.js 使えよ」という風潮をひしひしと感じますが、 素人には Grunt の方が取っ付き易いなあ、と思うところがあったので Grunt の記事にします。 お世話になってきた Grunt への追悼もちょっぴり込めて… Grunt を使ってみよう 既に秀逸な記事が沢山あるのでさらっと。 ここでは grunt-init を利用してひな形を作りましょう。

    素人のための Grunt プラグイン利用のすすめ - Qiita
  • タスクランナーgulp.js最速入門 - id:anatooのブログ

    相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu

    タスクランナーgulp.js最速入門 - id:anatooのブログ
  • grunt bower yeoman入門記事 - lxyuma BLOG

    ※これは、社内の勉強会の資料の下書きです。 ここ数年で、js環境が整理されてきた。 js開発するなら、これらの知識は必須。無いとめっちゃ不便。 という事で、今日は、gruntとbowerとyeomanの話。 各ツール概説 Yeoman applicationのひな形を作る アプリ構築に必要な様々な作業を任せられる Grunt build / preview / testに使う Bower 依存性の管理を行う 手動でDLやscript管理する必要無 rails開発者のために ぶっちゃけ、どれも、railsの環境にそっくり。rails知ってる人は、要するに、以下の事。 grunt => rails server実行時に勝手にやってくれる作業を切り離してカスタマイズできるようにしたもの(coffeeのコンパイルとか) bower => ruby gem管理をjsのclient側で実現した物。 y

    grunt bower yeoman入門記事 - lxyuma BLOG
  • 東京Node学園祭2013の宿題:Gruntプラグインのdefault configを取得する方法 - ぼちぼち日記

    1. きっかけ 「ブログを書くまでが勉強会〜」ということで、東京Node学園祭2013に参加してきました。細かいセッションレポートは他の人に任せますが、id:yosuke_furukawa さんの「東京Node学園祭 2013にスタッフ兼スピーカーとして参加しました。」で述べられているよう、最後飛び込みLTが続いて学園祭がとても盛り上がったのは楽しかったです。 残念ながら予定をいれてしまい途中で無限LTから退出することになったのですが、 [twitter:@muddydixon]さんのGruntに関するLTで 「Gruntのプラグインがいろいろあるけど config書くのにいちいちドキュメントを参照するのが大変だ。 default の config を出力できるようにするとか、なんとかならない?」 な感じの話があり、私自身も以前同じ事を思ってたので、そうだよなぁ〜と思って会場を後にしました

    東京Node学園祭2013の宿題:Gruntプラグインのdefault configを取得する方法 - ぼちぼち日記
  • Grunt: The JavaScript Task Runner

    Why use a task runner?In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile, a task runner can do most of that mundane work for you—and your team—with basically zero effort. Why use Grunt?The Grunt ecosystem is huge and it's growin

    Grunt: The JavaScript Task Runner
  • AngularJS で Hello World - パンダのメモ帳

    AngularJS は Google が中心になって開発が進められている JavaScript MVC フレームワーク の一種です。もちろんオープンソース(MIT License)。 今回はこの AngularJS を使って Hello World するわけですが、 ただ世界にこんにちはするだけじゃおもしろくないので、次のようなカンジでやってみようと思います。 TypeScript で書いてみます。 ビルドツールに Grunt を使います。 Testacular + Jasmine を使って自動テスト(ユニットテスト、受入テスト)環境を構築します。 AngularJS のバージョンは2013年1月現在の最新安定版である 1.0.4 を使用します。 なお、今回のソースコード一式を GitHub で公開しています。 また、こちらで実際に動作を確認することもできます。 View を書く まずは

    AngularJS で Hello World - パンダのメモ帳
  • Gruntによる継続的なビルド環境を求めて 〜 package.jsonと0.4.0のこと

    安定したビルド環境 gruntの広まりを感じる...。みんな...package.jsonをつかうのです...そしてバージョンにも気を遣ってstableな環境を目指すのです....安定して使えないビルド環境はいくらナウくてもゴミです....。 — aho.mu (@ahomu) December 11, 2012 夏前に、nodeでビルドってなんかナウい(∩´∀`)∩ワーイって使い始めて、秋から現職のプロジェクトで実践してみた結果、そんな当たり前な視点を忘れないようにしなければ、と強く思った次第。 今回は下記の2点を紹介します。 Gruntと永く付き合うためのノウハウとして、package.jsonを使った管理について 賞味期限の短いノウハウとして、Grunt 0.4.0への移行に関して Gruntイイヨーの続きとして、今後付き合っていくために必要なことを改めておさらい。 1. packa

    Gruntによる継続的なビルド環境を求めて 〜 package.jsonと0.4.0のこと
  • 1