作業効率UP タスクランナーGulp
フロントエンド開発において、もはや必須となってしまった開発環境Gulp。 今更ながらGulpの魅力について書き留めておきます。 Gulpでできること プラグインを追加し、タスクを登録していくことで、様々な処理を同時並行で自動化することができます。 僕がコーディングの際によく使うのは主に4つ 1. Sassのコンパイル 2. CSS3ベンダープレフィックスの自動挿入 3. 画像の圧縮 4. BrowserSyncによるライブリロード 中でも4のライブリロードは重宝してます。 その他、HTML、CSS、JSの圧縮など何でもできちゃいます。 ではまずGulpを動かすための環境構築から解説していきます。 Gulp環境構築 GulpはNode.jsのインストールが前提となるので、公式サイトからインストールしましょう。 インストールが完了したらターミナル（コマンドプロンプト）でバージョン確認。 nod
gulp.js を今一度キチンと！gulp.js 導入基礎
フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には
【保存版】Gulp初心者必見！導入に失敗しないための7つの手順 - 学校では教えてくれないWeb制作の現場
2015-05-26 【保存版】Gulp初心者必見！導入に失敗しないための7つの手順 Web制作の現場 脱にわかフロントエンドエンジニア！シリーズの第二弾！！！ 勝手にシリーズ化してますがｗ 第一弾もご参考にｗ 【フロントエンド向け】脱にわかフロントエンドエンジニア！Macでコーディング環境を整えたい人はこれだけは抑えておこう！ - 学校では教えてくれないWeb制作の現場www.web-genba.com ということで、今回はGulpのお話。 Mac環境を前提にお伝えしていきます。 gulp.js - the streaming build system ぐぐれば、いろいろと情報がでてきますので、設定に詰まったら調べてみてください。 【１】Node.jsをインストール まずは、公式サイトからインストーラをダウンロード。 http://nodejs.org/ 簡単にインストールできま
gulp入門その３―こまごま便利なこと
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ) まさかgulpネタをこんなに引っ張ることになるとは思わず、アイキャッチは使いまわしです。 今回は、細かい便利な機能をgulpに乗せてみましょう。 今までの記事はこちら gulp入門その１―とりあえず動かすところまで gulp入門その２―ファイルの監視をしてみる もくじ 同期処理をする ローカルサーバを立ててライブリロードする CSSのminifyしたりプロパティを並び替えたりする package.jsonでモジュールを管理する まとめ ※今回は手順にプラグインのインストールを含めません。 インストール方法は前回・前々回の記事を参照にしてください。 同期処理をする 初回からさんざん書く書く言っていた同期処理です。 そもそもgulpは非同期処理なのでタスクの完了が早いわけですが、どうしても同期的に処理したい場合もあります。 そこでru
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつ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ページを開く
JavaScriptタスク自動化ツールgulpのAPI説明と実践的な利用例