gulpfile スタイルガイド - v0.5.0 - Qiita
このドキュメントは、gulpfileの再利用性/メンテナンス性を高めることを目的とした、非公式なスタイルガイドです。 更新情報 2014/10/05 - バージョン番号つけました。 2014/10/04 - 「タスク辞書」あらため「タスクの共有」に。以前の内容はgulpfilesとして別ドキュメントに。 はじめに gulpfileはgulp.jsのタスクを定義するファイルです。スクリプトファイルなので自由に書ける反面、プロジェクトが大きくなると、書式を統一が問題になります。そんな時、このスタイルガイドが役に立つでしょう。対象となるのは次のようなケースです。 gulp.js に慣れて来て、再利用性のあるタスクを書きたい チームで運用する必要があり、書式を統一したい スタイルガイドとして、下記を参考にしています。また、ここで述べない JavaScript / CoffeeScript の言語と
gulpのアプローチ
gulpのGetting Startedにもあるように、gulpを使うにはグローバルインストールとローカルインストールが必要になる。なんで同じものを2つインストールするのか、不思議に思ってソース読んで「へー」と思ったのでまとめてみる。 Gruntの場合 Gruntの場合はgrunt-cliをグローバルにインストールしてgruntはローカルにインストールする。grunt-cliはローカルにインストールしたgruntを呼び出すためだけのモジュールだ。タスクを走らすgruntと、そのgruntを実行するgrunt-cli、2つのモジュールは明確に役割が切り離されている。 Gruntがこうなってる理由は、異なるプロジェクトで使ってるgruntのバージョンが違うと、グローバルにインストールされてるgruntのバージョン次第で、そのタスク（Gruntfile）が動かせない可能性が出てくるから。 （参考
gulp-plumberとgulp-notifyでデスクトップ通知を出す
gulpでwatch中にエラーが出たとき、ターミナルでエラーメッセージが出ててもなかなか気づけないので通知を出すようにした。 gulpfileの記述とか詳細はQiitaに投稿したのでこちらを参照。 gulpタスク実行中にエラーが出たらデスクトップ通知を出す | Qiita 通知出すやつ 今回gulp-notifyとnode-notifierの2つを使ってみた。gulp-notifyはgulp-plumberと組み合わせるにはベストな感じで何も考えず設定できる。 node-notifierはterminal-notifierを使ってて細かい指定ができる。めんどくさくないならnode-notifierでタスク毎に通知をカスタマイズするとヨサソウ。 イベント監視する Qiitaの方には書かなかったけど、gulpのプラグインはだいたいエラーが起きたときにはthis.emit('error', er
Gulp使い始めた
みんなGulpGulp言ってるので僕もようやく使い始めた。 gulp.js - the streaming build system 何が良さそうか設定ファイル(gulpfile)が簡単に書ける気がする動作軽い気がするプラグインもいっぱいあるなんかこんな感じ。 gulpfileが簡単に書けるのはホントその通りで、実際に「Gulp使えるようになるか」と思い立っていろいろサイトを見て、2時間後くらいには自分でなんとなく書けるようになった。 インストールGulpインストールする$ npm install --global gulp ディレクトリに移動$ cd (プロジェクトのフォルダ) 依存ファイルのインストールgulpfile.jsやpackage.jsonがある前提。 $ npm install Gulp実行$ gulp Gruntと何ら変わりはない。 package.json{ "name
Gruntfile.js が長すぎてつらい人は gulp を使ってみよう - Qiita
Gruntfile.js は常々長すぎると思っていました。複数ファイルに分割しようが長いものは長いです。 最近、後発の gulp というものを見つけて使ってみていますが、いい感じです。 設定ファイルが短く書ける上に、速いです。 先日 Grunt 入門の記事「Web デザイナーさん向け Grunt を使った コーディング作業の効率化、はじめの一歩」を読んで、例の Gruntfile.js と同等の内容を gulp で書いたらどうなるかなと思って書いてみました。 サンプルファイル含めたプロジェクト全体 gulpfile.js だけ 67 行から 29 行に。約半減です。また、短くなっただけではなく、処理の流れがわかりやすくなっていると思います。 var gulp = require('gulp'); var concat = require('gulp-concat'); var prefix
gulpとかnpmのこととか – A Memorandum
最近、Gruntからgulpに切り替え始めている人が増えている気がします。この数ヶ月でいろんなブログなんかでも導入記事が増えてるようですが、ひとつ言っておきますと「数ヶ月前の記事は鵜呑みにしてはいけない（というか、そのままだと動かないこともありうる）」かな〜、なんて。 あれがどうしたこうしたと質問を受けたりするんですが、いろんな人がはまってる原因はそこら辺にある気がしてならないのですよね。そんなわけで、ちょっとその辺の話をまとめておこうかと立ち上がった次第です。 ※この記事は2014年7月30日時点のものですので、数ヶ月後にコレを読んでる方はご注意を。 アップデートの頻度が高いので… こういったツールのアップデート頻度は高いものですが、gulpのバージョンアップ頻度もまぁまぁで現在の最新版は「v3.8.6」になっています。プラグインを使えばあらゆる機能を追加することができますが、そういった
Google Web Starter Kitのgulpfileを翻訳してみた - Qiita
Google Web Starter Kit GitHub - google/web-starter-kit javascriptを覚えるために静的開発環境を整えようとして、タスクランナーフレームワークgulpを導入。 ついでにcssフレームワークは話題のGoogle Web Starter Kitを使ってみる。 Google Web Starter Kitの純正gulpfileを読んで注釈をつけてみたので、投稿。 use scrict // Include Gulp & Tools We'll Use var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var del = require('del'); var runSequence = require('run-sequence'); var brow
[Gulp.js] タスク単位のファイル分割 | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 今までタスクランナーツールは Grunt を使用していたのですが、Gulp ( ガルプ ) は、Grunt よりも定義ファイルの記述が簡潔だと評判が良いらしいのでデビューを果たしました。 ざっくり触ってみたところ、かなりシンプルであることは分りました。ただそれでも、開発中に機能 ( タスク ) を追加していくたびに、どうしても設定ファイル (gulpfile.js) は肥大化していきます。そんな状況を極力減らすために、タスク単位でファイルを分割することを試してみたのでまとめてました。 解説前に 当ブログに Gulp のインストールから実行までの入門記事がありますので、何もご存じない方は併せてご覧ください。 【Gulp.js入門】新鋭フロンエンド・タスクランナーツール を試してみました。 例 : 任意の JavaScript ファイルの結合お
![[Gulp.js] タスク単位のファイル分割 | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/03a1ea44cc6ca0d02a5082d489e39167ed533931/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F05%2Ficon-gulp-400x400.png)
「gulpってどうなの？」に対する返答
Gruntを使ってる人に「gulpってどうなの？」と聞かれる機会が最近何回かあったので、いまさらながら自分の所感を交えて答えてみる。 まず、自分がこれからプロジェクトを始めるとしたらgulpを使うでしょう。理由は質問に答えながら書いていきます。 Grunt使い続けちゃだめなの？ そうですね。あなたがGruntに十分慣れていて、タスクのテンプレートがあってすぐに開発に入れるならGruntを使い続けてもいいと思います。ただ、今はGruntとgulp両方とも使われていますが、どっちが覇権を握るかわかりません。Gruntしか知らないままgulpの時代が来たときにノウハウの差が多少出るかもしれません。 もしあなたがGruntを片手間程度に使っていて、設定してるタスクが「ローカルサーバとライブリロード、あとminify系くらい」な人ならgulpを触ってみる価値はあると思います。同じタスクをgulpでや
gulp.jsでWeb開発環境をつくる - Qiita
. ├── gulpfile.js ├── package.json ├── .jshintrc └── src ├── images │ └── picture.jpg ├── index.html ├── page.html ├── scripts │ ├── lib │ │ └── jquery.js │ └── main.js └── styles ├── main.scss └── sub.scss var gulp = require('gulp'); var $ = require('gulp-load-plugins')(); var browserSync = require('browser-sync'); var rimraf = require('rimraf'); var runSequence = require('run-sequence'
npm + gulp + bower でビルド自動化 - GeekFactory
(追記) この記事は公開から時間が経っており、内容が古くなっています。2016年時点ではWebpackが圧倒的におすすめです。 JavaScriptやCSSのビルドを自動化することで、手作業による無駄な時間やミスを削減できます。また、誰でもビルドできるようになるため、リリースのボトルネックを解消できます。 改善したいこと JavaScriptフレームワークやCSSフレームワークの依存関係を自動的に管理したい。ダウンロードして配置を手作業でやりたくない。 CoffeeScriptやLESSのコンパイルを自動的に実行したい。手順書を見ながらコマンドを叩くとかやりたくない。 ダウンロードしたライブラリをリポジトリに入れたくない。 出荷対象のリソースを明確にしたい。ゴミファイルをリリースしたくない。 どうやって実現する？ bowerでライブラリの依存関係を管理する。 gulpでビルドを自動化する。
gulpでbrowserify使ってcoffee-scriptの監視とコンパイル - Qiita
まずnpmから必要な物をいれる。gulpで browserify/coffeeify を使ってビルドする場合、coffee-script も必要になる。 $ mkdir proj-path; cd proj-path $ npm init $ npm install --save-dev gulp gulp-browserify gulp-watch gulp-plumber gulp-rename coffeeify coffee-script gulp-rename リネームタスク gulp-watch 監視タスク gilp-plumber タスクの実行に失敗してもgulpを終了させないパイプ(watchでビルド失敗時に終了させない) gulp-browserify browserify gulpfile.coffee gulp = require 'gulp' browserify
[JavaScript] Gruntの後発のフロントエンドビルドツール、gulpに入門 - YoheiM .NET
こんにちは、@yoheiMuneです。 gulpというフロントエンドのビルドツールが気になってました。 それについて試したり調べたりしてだいぶ理解できたので、今日はその内容をブログに書きたいと思います。 目次 gulpとは gulpとは、JavaScriptのMinifyやCSSプリプロセッサのコンパイルなどを行うことができるフロントエンドのビルドツールです。 フロントエンドのビルドツールには有名なGrunt.jsがありますが、その後発のビルドツールのようです。 Grunt.jsと何が違うの？ 実現できることはぶっちゃけ同じで、その実現方法や思想が異なるのだと思います。 gulpのサイト(英語)からいくつか主張を拝借してみました。 gulp's use of streams and code-over-configuration makes for a simpler and more i
![[JavaScript] Gruntの後発のフロントエンドビルドツール、gulpに入門 - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/c9458bbaf8523aa2072e6548e170dd047c0f5e2d/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F333.jpg)
gulp.js チートシート - Qiita
チートシートで使われているサンプルコード コマンド 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
gulpプラグインエラー時に発生するイベントの調査 - Qiita
gulpプラグインでは、エラー時の処理として emit('error') した後に callback() を実行しているものをよく見かける（例えばこれとか）。 このような場合、プラグイン呼び出し側で発生するイベントは'error'イベントなのか'end'イベントなのか、理解が曖昧だったので調査してみる。 調査の概要 'error'イベントおよび'end'イベントの発生条件を調べる。組み合わせる条件は以下の通り。 a. プラグイン内で emit('error') を実行するか b. プラグイン内で callback を実行するか c. プラグイン内で callback を実行する場合、callback に引数与えるか 調査用に使ったソースは以下のとおり。コマンドライン引数で実行条件を指定できるようになっている。 var gulp = require('gulp'); var gutil =
gulpプラグインの基本構造（プラグイン開発者向け） - Qiita
プラグイン開発に関する詳細な情報はgulpの公式ドキュメントを参照のこと。また、開発したプラグインを公開する場合はgulp公式によるプラグイン開発ガイドラインは必読（MUST readと書かれている）。README規約も見ておくとよい。 （2014/2/9追記：プラグイン開発ガイドラインの日本語訳を公開） なお、gulpプラグインはnode.jsパッケージの一種なので、公開する際の手順やpackage.jsonの記述方法などはnode.jsのドキュメントを参照のこと。 gulpプラグインの実態（i.e. pipeに渡すもの）はnode.jsのStream.Transformのサブクラス Stream.Transformとは、ストリームからの入力を受け取り、加工し、ストリームに出力するもの Stream.Transformのサブクラスを直接作って実装しても良いが、gulpプラグインではStr
gulpの「Writing a Plugin - Guidline」日本語版 - Qiita
gulpプラグインの開発者向けドキュメントの中で、MUST Readとなっているガイドラインを日本語に翻訳しました。オリジナルの文書はこちらGuidelinesです。 権利者の許可を得て翻訳＆公開します。オリジナルと同じライセンスCC0です。また、末尾に翻訳の更新記録を掲載してあります。誤訳などあればコメント欄で指摘してください。よろしくお願いします。 ガイドライン このガイドラインは強制ではありませんが、全てのプラグイン開発者が従うよう 強く 奨励します。質の悪いプラグインなど誰も使いたくないでしょう。またこのガイドラインは開発者がgulpと相性のいいプラグインを書く手助けになるはずです。 Writing a Plugin > ガイドライン 既存のnodeモジュールを使って容易に出来ることをプラグイン化すべきでない ラッピングできるからといって全部ラッピングしてしまうと、エコシステムに無
» GulpでSassのコンパイルとlivereloadをやってみる | isee ウェブに関するブログ
Gruntと同じくタスクランナーのGulp。Gruntよりもビルドファイルが読みやすく、スピードも軽快な気がします。GulpとGrunt Gruntに関しては前回の記事で(タスクランナーGrunt導入メモ)導入方法と簡単な使い方を紹介しましたが、今回はGruntと同じタスクランナーのGulpでSassのコンパイルとブラウザを自動で更新するlivereloadを使ってみたいと思います。 Gulpのいいところ Gruntと大きく違う部分は以下になります。 ・Gruntよりもビルドファイルの可読性が良く、短いコードで済む ・なるべくタスクを並列で実行しようとするので、スピードが早い Gruntもとても優秀ですが、GulpはGruntの良い部分を引き継ぎ、短所を改善したツールだそうです。そのためビルドファイルの書き方や導入方法はGruntと似ているので、Gruntを使ったことのある人は、使いや
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
MacIous.com is for sale | HugeDomains
gulp.js CheatSheet!
