gulp vs Grunt - lxyuma BLOG
概要 gulpの入門記事を以下に書いて行きます。 目次 gulpとは gulp sample gulp支える技術(Streamと並行性) grunt vs gulp どっち使う? gulp.jsとは いわゆるフロントエンド周りの task runner build tool Gruntあるでしょ その通り いわば、Gruntの簡易版 去年位?出来た後発のtool 最近、blog記事も増えてきた 公式Page売り文句 複雑なtaskも管理し易く、simpleで、使うのが簡単 一時fileのdisk書き込みが無いので早くて能率的 simpleで期待通り動くようにPluginのGuidelineがある APIが小さく学習時間かからない リソース gulp公式page 入門記事 クラスメソッドさんの入門記事 shuheiさんのqiita記事 sample多め anatooさんの入門記事 Shump
minimatch（node.js で path match するライブラリ）のチートシートを作った - 詩と創作・思索のひろば
minimatch っていうのは Grunt や gulp.js その他あちこちで（npm もらしい）使われてるグロブマッチライブラリです。最近よく gulp を使ってるんだけど、毎回 gulp.src() の書き方で迷ってしまう。調べた結果 minimatch に行き当たったんだけど各種 glob 実装のドキュメント読んで把握しろ、という感じでよく分からなかったので早見表を作った次第です。 https://github.com/motemen/minimatch-cheat-sheet 確認用にテストを書いていて、そのテストケースからドキュメントを生成してるので間違いはないはずです。説明が間違ってる、この例も乗せた方が見やすいだろ、とかあればプルリクください。 折角なので日本語版を書いておきますね。 基本 * はパスセパレータを含まない任意の文字列にマッチ ** はパスセパレータを含む任
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
Browsersync - Time-saving synchronised browser testing
Time-saving synchronised browser testing.It’s wicked-fast and totally free. npm install -g browser-sync Get Started Your indispensable test assistant.With each web page, device and browser, testing time grows exponentially. From live reloads to URL pushing, form replication to click mirroring, Browsersync cuts out repetitive manual tasks. It’s like an extra pair of hands. Customise an array of syn
t32k、怒られる！セマンティック バージョニングしてますか？
どうも、バンクーバーでぶらぶらしている@t32kです。最近は暇なのでもっぱらOSS活動に勤しんでおります。そんなわけで日々のアプリケーション開発において重要になってくるのがバージョニングです。 今日はセマンティック バージョニングについて解説します。自身が公開しているライブラリやパッケージのコードを何かしら修正したら、それに伴いバージョンを上げるのが一般的だと思うのですが、実はどのようにバージョンを上げるのが適切なのか、昔の私は理解していませんでした。 『いっぱい変更したのでメジャーバージョン上げてみるか』、『今回の修正は軽微なものだし、マイナーバージョンを上げるか』などと、なんとなくにバージョニングをしていました。 If the plugin’s API changes dramatically (for example, when sortOrder option is renamed
僕がGrunt.jsで使っているPlugin一覧 - Qiita
どんなニーズに基いているか デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。 デザイナーだけどフロントエンドに興味ある人向け。 2015-02-07: gulp編を作成 gruntからgulpへ移行したので、gulp版の一覧も作成しました。 僕がGulpで使っているPluginとnode.jsモジュール一覧 - Qiita プラグイン一覧：非Contrib系 grunt-aws-s3 S3にアップロードできるプラグインはいくつかあるけど、いくつか試して一番良かったのがこれ。 同名ファイルは確認なしで上書き可能 デフォルトでpublic-readになるので、Web関係には便利 配布元 https://github.com/MathieuLoutre/grunt-aws-s3 grunt-bless IE9のセレクタ数限界を解消する「bless」を実行できる。 昔
GruntでSassのビルドとjsファイルの結合・圧縮を自動化 - bata's log
JSファイルの結合と圧縮を自動化したくて色々調べていたのですが、やはりGruntが一番便利だということで導入してみたました。 結論からいうと、もっと早く導入すればよかった。 Gruntの導入 導入部分は下記を参考に。 Windowsの場合 http://webdrawer.net/javascript/firstgrunt.html Macの場合 http://catcher-in-the-tech.net/461/ Gruntfile.js を記述 module.exports = function(grunt) { grunt.initConfig({ //Sassをビルド sass: { options: { style: 'compressed',//CSSのスタイル sourcemap: true,//ソースマップを書き出す noCache: true//キャッシュファイルを生成
ビルドツールまとめ。Gruntとかgulpとか (フロント寄り) - Qiita
はじめに そろそろ、使っていないと後ろ指をさされそうな雰囲気になってきた、ビルドツール各種ですが、業界(?)の全体像をなんとなく眺めてみたいと思います。動きとしてはRuby界隈が早く、Guardが2010年あたりから、それを参考にする形でGruntが出てくるのが2011年、gulpについてはまだ1年未満という状況ですが、特にJavaScript周りは活況です。 下記、主にGitHubの各種数値を並べています。コミュニティの盛り上がりや成熟度の判断の参考として。 名称 環境 設定ファイル 可読性 GitHub プラグイン Issues 初コミット
grunt-este-watchとgrunt-contrib-connectで軽快ファイル監視とLiveReload - Qiita
$ npm install grunt grunt-contrib-jade grunt-contrib-stylus \ > grunt-contrib-connect grunt-este-watch module.exports = (grunt) -> grunt.initConfig connect: server: options: # LiveReloadに必要なスクリプトを</body>直前に挿入してくれる # 多分grunt-contrib-connect ver.0.4.0から # HTML5などでbodyタグを書いていないと挿入してくれないみたい…… livereload: true esteWatch: options: # 監視対象のディレクトリ # ['./**']などとするとサブディレクトリを含むようになる dirs: ['.'] livereload: en
trash: grunt.jsを使うまで
2013年2月6日水曜日 grunt.jsを使うまで Antタスクみたいに、jsやSassをビルドしたりDocを生成してくれたりするgrunt.jsを使うまでの準備。 試した環境 node.js v0.8.18 ruby 1.9.3p374 grunt.js 0.3.17 Mac SnowLeopard node.jsのインストール 公式にインストーラーがあったので入れる。 Rubyのインストール Sassを使いたいので(Macに入ってるRubyが古いので)Rubyを入れる。 $brew install ruby (略) $gem install sass $gem install compass grunt.jsなどのインストール プロジェクトのフォルダ内に、package.jsonをつくり、いっしょに使いたいプラグインを登録しておく。 rubyのGemfileとbundle in
Gruntを使ったプロジェクトの自動化。もうCodeKitもMAMPもいらないよ。 | 5 LOG
Grunt を使ったwebsite製作用のデフォルトセットを一式作ってみた ソースコード一式 準備 下記がインストールされていない場合は、要インストール node.js grunt-cli node.js のインストール node.jsをインストール nodebrewを使って管理する grunt-cli のインストール grunt-cli はgrunt を実行するためだけのパッケージなので、「-g」でグローバルにインストールしておく $ npm install -g grunt-cli Grunt のインストール Grunt を実行するには下記が必要 package.json （プロジェクトの情報を記述した設定ファイル） Grunt.js Gruntプラグイン （sassのコンパイルなど、Gruntで実行するタスク） Gruntfile.js （Gruntで実行するタスクを記述したファイル
[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました - YoheiM .NET
[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました こんにちは、@yoheiMuneです。 Compass(Sass)を仕事で使うのですが、@extendとかがいっぱいあるとビルドに時間がかかるようになってきました。 今回は、その対策としてgruntのタスクとして、compassビルドをマルチスレッドで高速化するタスクを作ったので、紹介させて頂きたいと思います。 Compassのビルドは時間がかかる？ Compassってすごく便利なツールで、CSSをモジュールか出来たり案件ごとに使い回したりして、CSSのコーディングの効率化が出来ます。 でも、画像のBase64化やSprite化、@extendで共通Compassモジュールを使うコードなどが増えると、コンパイルに時間がかかってきます。 自身が関わっている案
![[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/be8a85a78049a62f12c7fca35a7418bb8dcd8564/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F217.jpg)
ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
How do I install and use the browser extensions? – LiveReload Help & Support
Installing extensions Download and open to install: Safari extension 2.0.9 — note: due to Safari API limitations, browser extension does not work with file: URLs; if you're working with local files via file: URL, please use Chrome or insert the snippet Chrome extension on the Chrome Web Store — if you want to use it with local files, be sure to enable “Allow access to file URLs” checkbox in Tools
2014年 フロントエンドはGrunt.jsでサクっと自動化 まとめ
もう、2014年も5日が過ぎようとしています。 なー早い。早い。 とにかく時間がない。と誰かの歌詞の様ですが、何事も時間との勝負。 そうお仕事も。 という訳で、Grunt.jsでフロントエンドをサクっと自動化しようではありませんか！ Grunt.js 公式サイト http://gruntjs.com Sassやらlessやらcompassやらと何かと騒がしいフロントエンド事情。 今回のGrunt.jsはそんなフロントエンドを自動化しちゃうツールとなります。 インストールにnpmコマンドを使いますので、node.jsをインストールしましょう。 インストール等はこちらを参照してください。 サーバーサイドJavascript 『node.js』 macにインストール・使用方法 コマンドでサクッとインストールします。 npm install -g grunt-cli これであなたのPCに grun
Gruntの復習(5) 色々なタスクを追加しよう - 鴨のいいカモです
Gruntの基本的なところはおさえられた気がするので、他にどのようなことができるか見てみることにします。 grunt-contribを見てみる 前回書いたように、contribと付いているプラグインはいわば公式プラグインのような扱いなのですが、その中で初めての人向けによく使いそうなものをまとめたプラグインがあります。その名もgrunt-contribプラグイン。ありがたい。 gruntjs/grunt-contrib · GitHub ということで、まずはこのgrunt-contribプラグインに入っているものを見て、その中から自分に必要そうなものを選ぶのがよさげです。ということで見てみましょう。 grunt-contrib-clean ファイル・フォルダの掃除 grunt-contrib-coffee CoffeeScriptコンパイル grunt-contrib-compass Sas
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Grunt入門 - ぺーぺーSEのブログ
GRUNT のあんなこといいなできたらいいな
https://toybox-design.net/?p=664
http://publicdraft.studiomohawk.com/2012/12/16/npm-and-package.json/