チートシートで使われているサンプルコード コマンド gulpをグローバルにインストール: $ npm install -g gulp gulpをローカルにインストール: $ npm install --save-dev gulp $ npm install --save-dev gulp-other-plugins タスクを実行: $ gulp task_name 複数タスクを実行: $ gulp task_name other_task JavaScript: gulpfile.js Single Dest & Watch Multi Dest Incremental Rebuilding Only Changed Async Streams Serial Join Stream Array CoffeeScript: gulpfile.coffee Single Dest & Watc

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

タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト

詳しくは上記連載を見てもらえば分かりますが、GruntとはJavaScriptを使用してWeb開発に伴うさまざまな作業を自動化して効率良く行うためのビルドツールです。 このツールでは「タスク」と呼ばれる一連の処理を設定ファイルに記述していきます。Gruntの設定ファイル（Gruntfile.js）は、タスクに対してJSON形式でパラメーターを指定していくのですが、ここで少々問題があります。 シンプルなタスクであれば分かりやすいのですが、多くの拡張機能（プラグイン）を使用したり、タスクの制御を細かく行う必要が生じたたりした場合、Gruntfileの記述量が増えて冗長になり、タスク同士の関連やタスク実行結果も分かりにくくなってしまいます。 そんなGruntの問題点を解消することを目的として開発されたのが、今回紹介する「gulp.js」（以下、gulp）です。 gulpはGruntを継承しつつ、

普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs

いつも livedoor Reader(LDR) ご利用いただき、ありがとうございます。 下記、「livedoor Reader サービス終了のお知らせ」は撤回され、12月1日よりサービス運営元がLINE株式会社から株式会社ドワンゴへと変更になりました。 また、 livedoor Reader 派生スマートフォン版 LDR Pocket をリリースいたしました。 livedoor Reader (LDR) 、現 Live Dwango Reader また LDR Pocket を引き続きよろしくお願いいたします。 2014年10月15日 追記：みなさまのご要望を受け、サービス終了を撤回し、継続の道を検討中です。 【重要】 サービス終了撤回のお知らせ｜livedoor Reader 開発日誌 いつも livedoor Reader をご利用いただきましてありがとうございます。 2006年4月

最近は、Sass（サース）やCoffeeScript（コーヒースクリプト）など、便利なツールがあります。 そういうツールを使わなかったとしても、jQueryや、Bootstrapなどを触ったことがないWeb制作者はいないのではないでしょうか。 それらを、すぐに使える状態で、用意できるのがYeomanです。 http://yeoman.io/ Yeomanは、3つのツールの複合 Yeomanは、おもに以下の3つのツールが複合されています。 Yo Bower Grunt Yo プロジェクトのひな形を作成したり、使用するツールです。 そのひな形をgeneratorと呼び、自分で作ることができますし、人が作成したものを使うこともできます。 http://yeoman.io/ Bower Web用のパッケージマネージャです。 例えば、あるプラグインとそれが動くjQueryのバージョンを、使える状態で

削除する Google Service TGカルチャー アプリケーション開発 コンサルティング セミナー テックブログ デザイン デジタルプロダクト開発 開発実績 ニュース 2025年の崖(1) 5G(1) AI(39) AI Hub(1) AI Platform(1) AlloyDB(12) AlloyDB for PostgreSQL(6) AlphaZero(1) Analytics HUB(1) Android(11) Android アプリ(1) Anthos(6) API(12) API エコノミー(1) APP(2) App Engine(2) App Maker(2) AppServer(1) AppSheet(3) arduino(1) Authentication(1) AutoML(4) AWS(12) AWS (Amazon Web Services)(1) AWS

Yeoman を勘違いしてスルーしてたところもあったので、 改めてこんなメリットがあるんだーみたいなところを共有しつつ、 必要性を感じられる人が使い始める機会になれればと思います。 僕もこれからちょいちょい使っていきたいです。Read less

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

...psst! While Bower is maintained, we recommend using Yarn and Vite for front-end projects. Read how to migrate! Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you. Keeping track of all these packages and making sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue! Bower can mana

連載目次 前回記事「Gruntで独自タスクを定義し、独自プラグインをnpmモジュールとして作成・公開するには」では、Gruntを使っていろいろな手法でタスクを定義する手法や、独自プラグインを作成してnpmで公開する方法について解説しました。 今回は少し角度を変えて、Gruntを自身の機能として利用しており、快適な開発ワークフローを提供してくれるツール、「Yeoman」について解説します。 3つのツールを統合したワークフローを提供する「Yeoman」 Yeomanとは、公式サイトいわく、「The web's scaffolding tool for modern webapps」とのことです。 訳すと、「今風のWebアプリのための土台／基盤を作ってくれるツール」といったところでしょうか。「scaffolding」はRuby on Railsの主要機能として有名になった言葉で、コマンドを打つだ

※ 追記： id:TokyoIncidents さん"補足"の誤字修正しました、ありがとうございます!! これからYeomanに関して説明していきます。 Yeoman自体が何者なのかよくわかっていない人も多いと思います。また、ある程度Yeomanの概要は知っているので、generatorの作り方が知りたい、という方もいると思います。今回は三部構成で、yeomanを使う話、yeomanのgeneratorを作る話、最後にyeomanのAPIに関して説明していきます。今回は第一部のyeomanを使う話について説明します。 Yeomanとは Google社が作成した総合開発ツール群です、「ヨーマン」と呼びます。公式サイトには MODERN WORKFLOWS FOR MODERN WEBAPPS (モダンWEBアプリケーションのためのモダンワークフロー) と記述されています。 Yeomanを使う

遊びながらJavaプログラミングを学ぶことができるというゲームが今話題になっています。 『CodeSpells』と呼ばれるこのゲームは、ファンタジー世界の魔法使いとなり、Javaのコードの組み合わせで唱えられる魔法を駆使して進めていくゲームです。Javaのコードの組み合わせによりゲーム中で様々な魔法が使えるような作りになっているので、遊んでいく中で自然とJavaのコードが組めるようになっていくとのことです。 ゲームのデモに参加した8歳から12歳の子供達は、毎日数時間のプレイでJavaのコードを理解し、実際にプログラミングができるようになったそうです。 これはもともと、数々のノーベル賞受賞者を輩出しているカリフォルニア大学サンディエゴ校の研究者や学生達が研究していたプロジェクトですが、今回、グラフィックとインターフェイスを洗練させ、AAAクオリティにしたものをPC等でリリースするために、「K

まねきで御座候 まいどまいど！ ジャニーズの人気アイドルグループ「Ｖ６（当時）」の岡田准一はんが２０１４年に演じた黒田官兵衛が主人公のＮＨＫ（日本放送協会）大河ドラマ「軍師官兵衛」。 黒田官兵衛は戦国時代から江戸時代にかけて活躍した武将の一人で別名、黒田孝高、黒田如水とも。 黒田官兵衛は、兵庫県姫路市の御着城にゆかりがあり、現在の御着城址公園では官兵衛に関する碑や案内板などが建立されてまんねん。 ほんでから、周辺にもゆかりの場所があり、それらをめぐっていきまっせ。 安くて美味しい！と評判のパンを販売するオカノファクトリーアウトレット。 ここでは、食パン・菓子パン・フランスパン・サンドイッチ・和洋菓子などの販売を中心に全国展開するパン屋さんが運営、ワケアリでも、商品として劣らないパンが店内に並び、ぎょうさん買い物客でにぎわってまんねん。 ほんでまた姫路っちゅうのは駅弁の発祥の地としても知られ