タグ

gruntに関するsyan0のブックマーク (28)

  • Grunt 1.0.0 released - Grunt: The JavaScript Task Runner

    The Grunt team is pleased to announce the release Grunt 1.0.0. This release is made possible by @shama, @vladikoff, @jkaussieskater, @dmethvin. Also thanks to contributions by @XhmikosR, @AurelioDeRosa, @Arkni, @arithmetric, @ascripcaru. Be advised Grunt 1.0.0 will no longer support Node.js v0.8. We ask you to test this release and report any issues you are experiencing. Update to Grunt 1.0.0 toda

    Grunt 1.0.0 released - Grunt: The JavaScript Task Runner
    syan0
    syan0 2016/04/05
  • なぜ僕は(2015年のフロントエンドで、makeではなく)gulpを選ぶのか - mizchi's blog

    http://d.hatena.ne.jp/m-hiyama/20150511/1431306678 の件 最初に 僕もgulpが今後生き残るかというと、かなり懐疑的です。開発パラダイムに合わせて変わっていくで、来年の段階で自分はgulp使えないなといっている可能性は十二分にあります。そのタイミングの一つはES6 import がHTTP2で並列ロードのオーバーヘッド無しで解決されるようになるタイミングでしょう。 根的な問題として、Web周りは標準化の関係で動きが遅いです。最新の仕様ではままならず、ブラウザ間の実装がまちまちで、また開発上の要求が多様なのでプリプロセッサで解決する文化が根付きました。プリプロセッサがいらなくなるぐらい個々の標準が洗練されればプリプロセッサも不要になりますが、そのような未来は、今の動きをみるに、あと15年は来ないように思えます。 とはいえ、ただひとつ言えるの

    なぜ僕は(2015年のフロントエンドで、makeではなく)gulpを選ぶのか - mizchi's blog
    syan0
    syan0 2015/05/13
  • GruntでWebFont作成を自動化 | Web雑記帳

    WebFont作成をGrunt.jsで自動化 WebFontを作成するサービスなどには、いろいろあり便利ですが、ちょっとした修正を入れる度にWebFont化するのは面倒くさいです。そこで、grunt-webfontという便利なプラグインがあったので自動化してみました。 ここでは、macにインストールしていきます。 下準備 homebrew node grunt ここらへんをインストールしておいて下さい。 インストール grunt-webfontのreadmeに沿ってインストールしていきます。 まずはhomebrewでfontforgeとttfautohintをインストールするのですが、 readmeにnodeエンジンを使用するならfontfogeは必須でないとあるので、 ここではttfautohintのみをインストールします。 $brew install ttfautohint cairo

    GruntでWebFont作成を自動化 | Web雑記帳
  • Web フロントエンド開発用パッケージマネージャ component について (2ページ目)

    mizchi @mizchi 今更気づいたんだけど component.jsめっちゃいいな、これからcomponent.json ちゃんと書くようにしよう 2014-06-17 17:54:01

    Web フロントエンド開発用パッケージマネージャ component について (2ページ目)
  • Yeomanでフロントエンドとバックエンドサーバを一緒に開発する

    先月、HTML5など勉強会に参加した時、雑談タイムで 「 yeoman を使ってバックエンドの開発とかできないですか? 」 という内容に対して、フォローとして 「 gruntでリバースプロキシ使えますよ 」 っていうお話をした。 そのまま記事に書かずじまいで申し訳ないなーと思っていたら、@bathtimefish さんがブログをアップされていた。 その記事、 YeomanでフロントエンドとREST APIサーバーを同時に開発する方法 でリバースプロキシを使った手法が挙がっていたのですが、gruntのモジュールを使うともう少し楽ができそう。 私は、easymock を知らなかったですし、やはりyeoman 使ってる人が周りにあまりおらず、前回の勉強会は非常に勉強になったので、ここは一つ御礼の意味を込めてブログを書こうと思います。 ということで、yeoman(grunt) を使ったバックエンド

  • grunt-bake が静的サイト制作に便利だった | blog.makitasako.com

    受託制作をしていると、SSI が使えないサーバーが稀にあって共通要素の扱いに非常に困る。さらにそういうサーバーは PHP すらも使わせてくれなかったり厳しい条件のケースが多い。そんなときよく見かけるのが Dreamweaver のテンプレート機能。何度か使ったことはあるが、こういうときには便利な機能だと思う。 が、自分は Dreamweaver が嫌いだ。理由はいくつかあるが、JavaScript などの閉じカッコを自動で書いてくれなかったり、そして何より重かったり。テンプレート機能についても、自分の使い方が悪いせいもあるかもしれないが、すぐに壊れる貧弱なイメージがある。一度壊れてしまうと戻せなかったはず。少し学習コストが必要なのも気に入らない。 ではどうするか。 こういう課題に grunt-bake は見事に答えてくれた。grunt-bake には SSI 同様にインクルード機能がある。

  • Maintainable Gruntfile.js - from scratch

    さてさて、前回の続きです。 オレはgruntのエコシステムに乗って楽をしたい、でもGruntfile.jsが長くなりすぎて辛い、grunt taskが時間がかかりすぎて辛い、という話は話で分かります。また、それに対する色んな解決策もあります。 最近出た、HTML5Rocksで紹介されてたやり方もあるし、いくつか先人の知恵もあるので、解決していきましょう。 Gruntfile.jsが長くなりすぎて辛い時 https://github.com/firstandthird/load-grunt-configを使いましょう。 いろんなtipsを見てきましたが、このライブラリが一番分かりやすく、かつGruntfile.jsをメンテナブルに保つことができます。 load-grunt-configには3つの機能があります。 grunt pluginの自動ロード機能 grunt configのファイル分割

    Maintainable Gruntfile.js - from scratch
    syan0
    syan0 2014/03/11
  • タスクを並列超速化するgrunt-parallelizeを紹介するよ - teppeis blog

    この記事は Grunt Plugins Advent Calendar 2013 23日目の記事です。 Gruntタスクを並列で実行するプラグイン grunt-parallelize を紹介します。 ある程度プロジェクトが大きくなるとJavaScriptが1500ファイルとか超えてきてJSHintにくっそ時間かかるみたいなことがよくあります。JSHintを含む多くのNode製ツールはシングルプロセスなので、普通に実行しちゃうとマルチコアなCPUが遊んでてもったいないわけです。 そんなときにgrunt-parallelizeを使うと、指定のプロセス数にファイルリストを分割してマルチプロセスでタスクを実行してくれます。 まずはもとになるタスクのGruntfile.jsの定義。grunt-contrib-jshintを使った普通のタスクですね。 grunt.initConfig({ jshint

    タスクを並列超速化するgrunt-parallelizeを紹介するよ - teppeis blog
    syan0
    syan0 2014/03/03
  • 今更だけどやるgrunt入門編・インストールから基本的な使い方

    JavaScriptCSSの結合や圧縮などいろいろな事を自動で処理してくれるGruntですが、もう話題になってずいぶん立ちますが今更ながら入れてみましたのでその方法です。 前にGruntの話題で盛り上がった時に試してみたのですがどうしても動かず原因もわからずで止まっていたのですが、情報も増えてきたので再チャレンジでした。 結果的に原因もわかったのでGruntの入れ方と基的な使い方を書いておこうと思います。 node.jsのインストール Gruntを使うためにはnode.jsが必要になりますので、以下のサイトからnode.jsをダウンロードします。 node.js ダウンロードしたものを実行します。 これでnode.jsがインストールできたはずです。 コマンドを起動 次にコマンドを起動します。「管理者として実行」をクリックします。 まずはnode.jsが入ったか確認してみましょう。以下の

    今更だけどやるgrunt入門編・インストールから基本的な使い方
    syan0
    syan0 2014/02/10
  • Gruntのtaskの実行にかかる時間を劇的に短縮する方法 - Qiita

    最近ではGrunt無しでのフロントエンド開発は考えられなくなってきた気がしますが、大抵taskを実行した際に結構時間がかかってしまいます。 Gruntの実行にかかる時間を減らすにはどうすれば良いのか調べてみたら、loadTasks as they are needed to speed up Grunt load time · Issue #975 · gruntjs/gruntのissueに方法がありました。 何に時間がかかっているか taskを走らせた際、何で時間がかかっているのかをtime-gruntで確認してみると、実行しているtask自体ではなくnpmタスク(適切な表現かは分かりませんがGruntプラグインの事です。)の読み込みの方に時間がかかっている事が分かります。 loadNpmTasks()で2秒はかかっている状態 npmタスクの読み込みに何故時間がかかるかというと、Gru

    Gruntのtaskの実行にかかる時間を劇的に短縮する方法 - Qiita
    syan0
    syan0 2013/12/20
  • ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita

    開発中とリリースビルドをわけて考える。 開発中はとにかく速度重視。テスト重視。 リリースビルドのほうに、自動化できる便利なタスクを出来るだけ突っ込んでおく。 開発中に使用するソースファイルから、リリースビルドに余計なファイルを混ぜない。 こんな考え方でGruntfileを書いてみました。 プロジェクトごとに最適化したGruntfileを作るということも魅力的な挑戦なのですが、私は開発者一人で短納期な案件をいくつもこなさないといけないので、そのために導入したタスクランナーのはずなのにGruntfileの開発やメンテに時間を取られるのは末転倒になってしまうので、出来る限り汎用的に使えるように気をつけて書きました。 さらに何か特定の開発スタイルやフレームワークに依存しないように、特殊なディレクトリ構成などを必要としない点も気を付けました。 普段は開発は私一人ですが、デザイナーやコーダーや開発者

    ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita
  • gruntで快適JS/CSSビルド生活

    programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ この記事はgrunt version 0.2.x のもので、grunt 0.3 からはAPIが変更されています grunt というJS/CSSのビルドツールが便利だったので紹介します。(Mac/Linux) cowboy/grunt - GitHubこのgruntってのは、JS,CSSを全部まとめて繋げる、まとめてJS lintする、minifyする見たいのをタスクとして登録しておくと、それ実行すればちゃちゃっとやってくれちゃうやつです。さらにwatchっていう機能使えば、ファイルが更新されたらそのタスクをやってくれるみたいなのも。 似たモノで、MakeとかRakeとかCakeとかそういう

    gruntで快適JS/CSSビルド生活
    syan0
    syan0 2013/09/15
  • 合コン失敗したら風俗

    女子大生がたくさん働いているデリヘルのサービス。深夜でも使える風俗として、自分の暮らしを豊かにしてくれているデリヘルです。有名大学に通う女性を指名した今回は、思い出しただけでも興奮が甦ってくるほど。素股の気持ち良さは挿入を超えるくらいの感覚でした。その秘密は敏感なクリにあります。素股をするとどんどん刺激されてクリが固くなり、それが亀頭に当たって気持ち良い。相手も擦れて気持ち良いという相乗的な魅力に浸るのが、今までの風俗史上最高の体験になったのです。素股はぎこちなさもあるのですが、それでも密着度が高くてアソコへの刺激は十分すぎるほど。途中で耐えることを諦めていれば、きっとサービスから半分も消化しないうちに果ててしまっていたと思います。しかし、僕は風俗MASTERです。そんなことできません。キスも大好きらしく、クンニをした後でも何度となく「チューしてほしい」とお願いされたので、舌を絡めてじっく

    syan0
    syan0 2013/09/14
  • [grunt] gruntを使ってSFTPをファイル保存時に自動で行う - YoheiM .NET

    こんにちは、@yoheiMuneです。 久々のgruntJSネタ☆日はgruntでSFTP(SecureFTP)を行う方法をブログに書きたいと思います。 gruntでSFTPを行う必要があった理由 現在ソーシャルゲーム開発でフロントエンド仕事を行っています。JS、CSSHTMLをせこせこと作る仕事です。 今回の案件では、バックエンドにJavaアプリケーションを利用しており、そのViewに当たる部分がJSPやFTLといったテンプレートになっています。 フロントエンドでは、そのJSPやFTPにHTMLを実装していき、開発用公開サーバーにアップして動作を確認するという作業フローを取っています。 そのため「編集して、FTPして、確認して」というタスクの流れが必要となり、今回はSFTP部分を自動化することで、作業効率をアップしようという狙いなのです。 ちなみにJavaプロジェクトをローカルに再

    [grunt] gruntを使ってSFTPをファイル保存時に自動で行う - YoheiM .NET
    syan0
    syan0 2013/09/13
  • Grunt 日本語リファレンス | js STUDIO

    このサイトについて Gruntの日語リファレンスです。 Gruntの家サイト(英文) の内容を翻訳して作成していますが、誤訳や誤記があると思いますのでその点についてはご了承ください。 もし、誤訳などの間違いを見つけましたら、 @tomof まで教えていただければ幸いです。 News 2013.04.15 サイトをオープンしました。 概要 何故タスクランナーを使うのか? 一言で言えば、自動化のためです。 ファイル圧縮、コンパイル、単体テスト、Lintなどの繰り返し実行しなければいけないタスクを自動化することで、仕事を楽にしてくれます。 タスクランナーを設定すれば、こういった冗長的なほとんどの仕事を、あなたやチームのために行なってくれます。 何故Gruntなのか? Gruntエコシステムは、巨大で日々成長しています。 Gruntを使って文字通り何百ものプラグインから選択し、最小限の努力で自

  • grunt-contrib-watchを使ってlivereloadする - Qiita

    これまでgruntでlivereload(grunt-contrib-livereload)をするにはregarde(grunt-contrib-regarde)とlivereload(grunt-contrib-livereload)が必要だったみたいなんですが、watch(grunt-contrib-watch)の0.4からlivereloadがビルトインされたようなので、使ってみました。 確か、livereloadを入れようとすると「Deprecated in favor of grunt-contrib-watch which now have Livereload support built-in.」って怒られたはず。watchの0.4以降だとconnectとwatchがあればlivereloadできるみたいです。watch内の設定でlivereload: trueにします。 '

    grunt-contrib-watchを使ってlivereloadする - Qiita
    syan0
    syan0 2013/09/13
  • GitHub - intesso/connect-livereload: connect middleware for adding the livereload script to the response

    syan0
    syan0 2013/09/12
  • [grunt] Gruntfile.jsをチーム共有用と個人用にファイル分割して、gitやsvnのコンフリクトを減らす方法 - YoheiM .NET

    [grunt] Gruntfile.jsをチーム共有用と個人用にファイル分割して、gitやsvnのコンフリクトを減らす方法 こんにちは、@yoheiMuneです。 日はチームでgruntJSを使った開発を行う際に、よく困るGruntファイルのコンフリクト。 チーム共有のGruntfile.jsと、個人が自由に利用するGruntfile.jsを別々のファイルに分割して管理してコンフリクトを減らす方法を、ブログに書きたいと思います。 GruntFile.jsをチームで共有するとファイルのコンフリクトが大変 GruntJSは、JSのミニファイが出来たりCSSプリプロセッサのコンパイルが出来たりと便利なのですが、数人のチームで開発していると、個人毎にGruntfile.jsをカスタマイズしたくなることが多いです。 例えばある人は、ファイルサーバーへアップロードするためのsftpやrsync用のタ

    [grunt] Gruntfile.jsをチーム共有用と個人用にファイル分割して、gitやsvnのコンフリクトを減らす方法 - YoheiM .NET
    syan0
    syan0 2013/09/12
  • [grunt] ファイル保存したタイミングで、ブラウザを自動的にリロードして、確認作業をスピードアップさせよう - YoheiM .NET

    [grunt] ファイル保存したタイミングで、ブラウザを自動的にリロードして、確認作業をスピードアップさせよう こんにちは、@yoheiMuneです。 HTMLCSSやJSなどのフロントエンド開発を効率的に行いたい。そんな目標のもと、今回はgruntJSを使ってファイル保存したタイミングで、自動でブラウザリロードしてソースの変更内容を即座に確認する方法をブログに書きたいと思います! ※2014/02/05更新 grunt-regardeではなくgrunt-contrib-watchでも出来るようになったので、記載を修正しました。 gruntJSのセットアップ gruntJSは、 CSSプリプロセッサのコンパイル、JSファイルの結合などフロントエンドの開発で行うビルド作業を行うためのツールです。 まずはgruntjsが使えるようにセットアップを行います。 nodeとnpmを利用しますので、

    [grunt] ファイル保存したタイミングで、ブラウザを自動的にリロードして、確認作業をスピードアップさせよう - YoheiM .NET
    syan0
    syan0 2013/09/12
  • Grunt導入してみた | blog.bouze.me

    MacにはCodeKitっていうCoffeeScriptとかSassとかLessとかをコンパイルしてくれる便利なツールがあって最近までお世話になってた。でも自分はWindowsユーザーで、これだけのためにMacを起動するのも面倒くさいので、CodeKitでやってたことをWindowsでもできるようにとGruntをはじめてみた。 Gruntそのものはコンパイラではなく、いろんなタスクを実行してくれるだけのツールなんだけど、プラグインを追加することでCoffeeScriptのコンパイルや、Sass/Lessのコンパイル、Uglifyを使ってjsのminifyなどができるようになる。 これを使ってCodeKitでやってたことを再現してみた。 1. インストール まずGruntを実行するのに必要なnode.jsをインストール。同時にnpm(node.js用のパッケージ管理ツール)もインストールされ

    Grunt導入してみた | blog.bouze.me
    syan0
    syan0 2013/09/12