タグ

Gruntに関するs12btのブックマーク (18)

  • grunt-text-replaceでテキスト置換 | DevelopersIO

    テキスト置換を一括で 最近お気に入りのGruntの話です。 Gruntではテキスト置換もプラグインを使って簡単にできます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.10.0 npm : 1.2.14 Grunt : 0.41 grunt-cliをグローバルオプションを付けてインストールしておきます。 % npm install -g grunt-cli そして、npmを使ってpackage.jsonを作成しましょう。 % mkdir grunt-replace % cd grunt-replace % npm init //全部デフォルトで作成 最後に、gruntモジュールとgrunt-text-replaceモジュールのインストールをしておきましょう。 --save-devオプションをつけると、packag

    s12bt
    s12bt 2014/10/29
  • 僕が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.jsで使っているPlugin一覧 - Qiita
    s12bt
    s12bt 2014/09/01
    livereload使ってるのでgrunt-browser-sync試してみたい。
  • 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
    s12bt
    s12bt 2014/02/22
  • ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita

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

    ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita
    s12bt
    s12bt 2014/01/06
  • https://qiita.com/t32k/items/9e03e80061de21411765

  • CSSポストプロセッサー時代の到来

    SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries

    s12bt
    s12bt 2013/12/04
    grunt:productionタスクとかにcssポストプリセッサーをかます。/ プリプロセッサーとかポストプリセッサーとか噛みそうになる
  • タスクの作成 | Grunt 日本語リファレンス | js STUDIO

    タスクはGrutnにとって無くてはならない存在です。 頻繁に使用されるものに、jshintまたはnodeunitがあります。 1つまたは複数のタスクを指定して、Gruntに実行して欲しいタスクを伝えます。 もし、タスクが指定されなかった場合、"default"と定義されているタスクが実行されます。 エイリアスタスク マルチタスク "ベーシック"タスク カスタムタスク CLIオプション/環境 なぜ非同期タスクが完了しないのか? エイリアスタスク もし、タスクリストが指定されると、新しいタスクは他のタスク(1つまたは複数)のエイリアスになります。 "alias task"が実行されると、taskListに指定された各タスクが順に実行されます。 taskListの引数は、タスクの配列でなければなりません。 grunt.registerTask(taskName, [description, ]

    s12bt
    s12bt 2013/11/01
    タスクの作成
  • jsCafe v13 Grunt

    jsCafe v13で発表した Grunt のビギナーズ向けのスライドです。 間違い・不明点があれば連絡してもらえれば直します。Read less

    jsCafe v13 Grunt
    s12bt
    s12bt 2013/11/01
    Grunt入門にすごくいい。プラグインの紹介がステキ
  • Gruntで自動ブラウザ更新 - Shut the fuck up and write some code

    s12bt
    s12bt 2013/11/01
    grunt-contrib-watchでlivereload
  • 合コン失敗したら風俗

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

    s12bt
    s12bt 2013/11/01
    タスク連結の書き方
  • GitHub - jsoverson/grunt-open: Open urls and files from a grunt task

    s12bt
    s12bt 2013/11/01
    指定したURLを開く
  • 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

    s12bt
    s12bt 2013/11/01
    LiveReloadのブラウザエクステンション
  • grunt-contrib-watchしてれば簡単にLiveReloadできる - Qiita

    ドキュメントを見て単純に気づいただけなのですがメモ代わりに。 GruntのLiveReload実現手段としてよく紹介されているgrunt-contrib-livereloadは現在deprecated扱いになっており、代わりにwatchタスクのオプションでLiveReloadが指定できるようになっています。 事前準備 grunt-contrib-watchでwatchタスクを準備しましょう。 LiveReload対応のブラウザ拡張をインストールしておきましょう。How do I install and use the browser extensions? – LiveReload Help & Supportを参考に。 LiveReloadの設定方法と使い方 以下、詳しくはgruntjs/grunt-contrib-watchをご参照くださいなのですが、とりあえず試したいという方向けにざ

    grunt-contrib-watchしてれば簡単にLiveReloadできる - Qiita
    s12bt
    s12bt 2013/11/01
  • コーダーさんの為のGrunt入門(後編)〜CSSプリコンパイラ編 - Mach3.laBlog

    この記事は賞味期限切れです。(更新から1年が経過しています) 前編の導入編 に続いて、 コーダーさんにとって強力な武器である、Less/Sass/Stylus等のCSSプリコンパイラのコンパイルを Gruntにお任せしてみる方法を紹介していきます。 Less/Sass/Stylus をGruntでコンパイルする ではさっそく、GruntでCSSプリコンパイラを扱うタスクを紹介します。 grunt-contrib-less – LessをCSSにコンパイルします grunt-contrib-sass – SassをCSSにコンパイルします grunt-contrib-stylus – StylusをCSSにコンパイルします 指定できるオプションは異なりますが、設定の仕方に差はありません。 違いを挙げるならば、Less/StylusはJavaScriptで書かれているのでnode.js上で動作

    コーダーさんの為のGrunt入門(後編)〜CSSプリコンパイラ編 - Mach3.laBlog
    s12bt
    s12bt 2013/10/31
  • GitHub - gruntjs/grunt-contrib-watch: Run tasks whenever watched files change.

    You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

    GitHub - gruntjs/grunt-contrib-watch: Run tasks whenever watched files change.
    s12bt
    s12bt 2013/10/31
  • grunt.jsによるlessの自動css化メモ - Qiita

    もうlessファイルをいちいちcrunchでコンパイルしたくないんやー。 ということで 自動コンパイル&minifyとか色々できちゃうgrunt.jsのメモ。 http://gruntjs.com/ 動作環境はmac。node.js。 1.やりたいこと ・less/import.less // 内部でreset.less, var.less, mixins.less使用 ・less/prize.less // 内部でmixins.less使用 ・less/result.less // 内部でvar.less使用 ・less/var.less // html上から単独呼び出し無し ・less/mixins.less // html上から単独呼び出し無し ・less/reset.less // html上から単独呼び出し無し 今回はこんなlessファイル達があるとして、 修正保存される度に下記

    grunt.jsによるlessの自動css化メモ - Qiita
    s12bt
    s12bt 2013/10/31
    "全ファイルcss化したく無いので、配列arLessFileNamseにcss化したいlessファイル名を入れる方法にした。"
  • grunt-cliでlessのコンパイル環境を整える

    bootstrapをいじりだしてから、lessを触る機会を増やしています。 そうするとどうしても自動でコンパイルする環境が欲しくなって来たので、前から気になっていたgruntを使ってlessをコンパイルする環境を整えました。 grunt-cli || grunt0.3いざ、gruntを使いってみよう思うと迷うことがありました。 それは、現在2つのバージョンが混在していることです。 ドキュメントの種類も圧倒的にgrunt0.3が多く、まだまだ、grunt0.3がメインのようです。 gruntの公式サイトにリンクを貼られているgithubのページは0.3ですしね。 grunt: a task-based command line build tool for JavaScript projectsgruntjs/grunt at 0.3-stable ・ GitHubバージョンでの差異2つのバ

    grunt-cliでlessのコンパイル環境を整える
    s12bt
    s12bt 2013/10/31
  • 昨今のWebアプリケーションのひな形その2 - Grunt - naoyaのはてなダイアリー

    昨日の続き。 こういうアプリケーションのテンプレートを管理するのに便利な仕組みはないですかねーと言っていたら @teppeis さんや @omo2009 さんに Grunt や Yeoman はどうかと教えてもらった。 Grunt はユースケースとしては JavaScript の連結や圧縮、SCSS/LESS なんかのメタ言語のコンパイルをするときに使うもの、つまり rake なんかと同じようなものと以前にチラ見した程度で知った気になっていたけども、ちょっと違っていた。Grunt は確かにタスクランナーではあるのだが、Node.js で実装している利点を十分に活かして、任意のファイルが更新されたのをトリガに一連のタスクを実行させたり、Grunt で Webサーバーを立ち上げて他のタスクと連携させたりといったことができるようになっている。プラグインの仕組みがあって、エコシステム的に結構活発に

    昨今のWebアプリケーションのひな形その2 - Grunt - naoyaのはてなダイアリー
  • 1