タグ

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

  • 最近のフロント系ビルドツールまとめ

    JavaScriptタスクランナーを広めた Grunt grulnt GruntはRuby製のGuardに影響を受けて、後のタスクランナーに影響を与えました。 grantの設定ファイルは、初期化部分と実行タスクに別れ、それが故にコードが大きくなると可読性&メンテナンス性が悪くなると言う弊害があります。しかし、タスクの責任範囲が明確になっているので、大きなプロジェクトでは各担当の管理部分がわかりやすいというメリットがあります。 1. グローバルにgruntのCLIパッケージをインストールします。 $ npm install -g grunt-cli 2. プロジェクトのディレクトリに移動し、npmコマンドでpackage.jsonを生成します。 $ npm init 2. gruntのパッケージをインストールします。 $ npm install grunt-contrib -save-dev

    最近のフロント系ビルドツールまとめ
  • HTMLメールワークフローに役立つGruntプラグイン | チャットワーククリエーターズブログ

    こんにちは、先日Web開発チームに加わりました西口です。 HTMLメールの制作って煩わしくないですか? おそらくそう感じているWebデザイナーの方は多いのではないかと思っています。 HTMLメールの制作って大変特に下記のような点が挙げられると思います。 テーブルレイアウト(コーディング面倒…)インラインCSS(コーディング面倒…)メールクライントごとで差のあるCSS対応(表示チェックどうすんの…)各種メールクライアントでの表示テスト(古い環境もまだまだ現役…)などなど… 弊社でもHTMLメールはそこまで頻繁に作成することがなかったので、これまでワークフローを見直すことがなく、ヘイトの増加を感じつつもHTMLを直接コーディングして作成していました。 ただ、やはりこういうフローでは時間がかかってしまったり表示確認が面倒だったので、どうにか効率良くならないかと調べていたら、HTMLメール作成用の

    HTMLメールワークフローに役立つGruntプラグイン | チャットワーククリエーターズブログ
  • なぜ僕は(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
  • HTML/JavaScript開発作業を効率化する便利ツールの活用:CodeZine(コードジン)

    CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

    HTML/JavaScript開発作業を効率化する便利ツールの活用:CodeZine(コードジン)
  • TypeScriptを始める – tscコマンド、Grunt導入、型定義ファイルの使用、tslintで構文チェックなど

    TypeScriptが盛り上がってきています。昨年2014年4月2日に正式版となる「TypeScript 1.0」がリリースされてから、現在は「TypeScript 1.4」と順調にバージョンアップもなされてきています。それから、ドットインストールでも、プレミアム版となりますが、ついに「TypeScript入門」が2/23に公開されました。ECMAScript 6の正式リリースも6月と差し迫ってきていることなので、そろそろ自分の開発環境でも使ってもよいかなと思い、今回自分のMacにもTypeScriptを導入することにしました。 TypeScriptとは TypeScriptTypeScriptはCoffeeScrtiptなどと同様に「altJS」と呼ばれるJavaScriptの代替となるプログラミング言語です。JavaScriptの弱い部分を補うように設計されていて、JavaScript

  • 東京Node学園祭2014 アウトラインメモ

    東京Node学園祭2014 に参加してきたのでその時のメモ 企業JavaScript飯 #企業JavaScript飯というご飯イベントをNode学園祭のお昼に(勝手に)やってました。 @teppeis、@ahomu、@kyosuke、Layzie (敬称略)で企業内でのJavaScript状況ですかという感じの話をしてきました。 質問テーマのスライド: https://github.com/azu/slide/raw/gh-pages/nodefest2014/lunch.pdf という感じのテーマを元に話をしてきました。 参加していただいた皆さん興味深いお話ありがとうございました。 最近企業のJavaScript(er)ってどんな感じになってて、どういうものを求めているのかに興味を持ってるので、面白い話があったらお話きかせて下さい。(to @azu_re にmention) どうやったら

    東京Node学園祭2014 アウトラインメモ
  • Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    はじめまして、フロントエンドエンジニアのおじいちゃんと言います。おじいちゃんはあだ名で、名は後藤です。よろしくお願いします。 日は、開発を効率化してくれる自動化ツールのGruntの導入から使用方法、おすすめプラグインまでを紹介したいと思います。 Gruntとは http://gruntjs.com/ GruntはNode.jsを使ったJavaScript製のタスクランナーです。 決まった動作をおこなったときに、あらかじめ決めておいたタスクを実行してくれます。 黒い画面を使うから面倒くさそう…と思っている方もいるかもしれませんが、コマンドはコピペでいけるのでご安心を! それでは、いってみましょう。 環境構築 Gruntを利用するためには、まずNode.jsが必要です。 さっそくインストールしてみましょう。インストーラーがあるので簡単です。 Node.js 下記URLよりダウンロードしてイ

    Web制作の作業を効率化するための自動化ツールGruntの導入方法とおすすめプラグインまとめ | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
    astk_f
    astk_f 2014/10/22
  • JavaScriptフロントエンド開発の昨今

    フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発

    JavaScriptフロントエンド開発の昨今
  • フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia

    19. • grunt-‐‑‒contrib(公式プラグイン:25個)でどんなことができるか https://github.com/gruntjs/grunt-‐‑‒contrib • grunt-‐‑‒contrib-‐‑‒clean Clean  files  and  folders. • grunt-‐‑‒contrib-‐‑‒coffee Compile  CoffeeScript  files  to  JavaScript. • grunt-‐‑‒contrib-‐‑‒compass Compile  Compass  to  CSS • grunt-‐‑‒contrib-‐‑‒compress Compress  files  and  folders. • grunt-‐‑‒contrib-‐‑‒concat Concatenate  files. • grunt-‐‑‒contri

    フロントエンド制作向けビルド ツールGruntがバックエンド 開発でも意外と使える! @M_Ishikawa #yapcasia
  • ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita

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

    ぼくがかんがえたさいきょうのGruntfileを晒してみる - Qiita
  • grunt-releaseでversionを上げられる男になろう - Qiita

    弊社の大先輩、mashさんがpull-req送っていたのを偶然見て、 grunt-releaseというプラグインの存在を知りました。 dry run support by mash · Pull Request #29 · geddski/grunt-release これが、npmやbowerにがんがんライブラリを置いている自分には、 めちゃくちゃべんりでした! bowerでライブラリ公開するハードルを下げることにもなる、 と思うのでちょっと紹介してみます。 grunt-releaseとは geddski/grunt-release grunt-releaseは、git管理しているライブラリの versionアップ時の作業を自動化してくれる gruntプラグインです。 具体的には、 設定ファイルから、現在のversionを取得 次に使うべきversionを計算 (semver形式) そのv

    grunt-releaseでversionを上げられる男になろう - Qiita
  • [Grunt]Yeomanで開発ワークフローを楽にしよう[bower] | DevelopersIO

    ※2013/5/14 Yoemanってスペルミスしまくってたのを修正 Yeoman(ヨーマン)とは LESS、Sass、compass、Coffeescript、TypeScript等々、クライアントサイドのWebアプリケーション技術は多様化しています。 Coffee ScriptやLESS等の拡張言語はコンパイルする必要がありますし、jsファイルはconcat/最適化/ミニファイすることも多いです。 ソースを修正するたびにいちいち手動でコンパイルしたり最適化するのは、来注力すべき事象ではありません。 Yeomanは開発者がアプリケーション開発に注力できるよう、アプリのひな形生成からテストやコンパイル、ファイル最適化といったワークフローを提供してくれます。 Yeomanについてはここでも少しふれていますが、開発を楽に楽しくするためのツールが満載のようですね。 まずはYoemonについての

  • TypeScript0.9alphaをNode+Gruntで使うよ

    Swift is the best programming language you should learn and make your dream app easily. Swift programming is a powerful yet easy-to-learn coding language created by Apple. It's frequently used for developing iOS and macOS applications, as well as tvOS and watchOS apps. While you can use other languages to create Apple apps, Swift is the preferred language, and it's recommended because its code is

  • 合コン失敗したら風俗

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

  • JSHint+Closure Linter+Gruntで最強のLint環境を目指してみた - はてブロ@ama_ch

    先日JSHint 1.1.0がリリースされ、そのリリースノートに気になる記述がありました。 Adds new option gcl to make JSHint style checks compatible with Google Closure Linter. うそーまじでーなにそれヤバイ! 普段は仕事でClosureにどっぷりなせいもあってClosure Linterを使っているんですが、Closure LinterってJSDocとかお作法的なとこはチェックしてくれるけど、他のLintツールが当たり前にチェックしてくれるとこはやってくれないんですよね。たとえばvarの付け忘れとか。 Closure Compilerを使ってコンパイル時にチェックすることもできるけど、規模が大きくなってくるとその結果が出るまでに10分とか待たないといけなくっていやな感じー。Closure Linter

    JSHint+Closure Linter+Gruntで最強のLint環境を目指してみた - はてブロ@ama_ch
  • 合コン失敗したら風俗

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

  • Yeomanのあれこれ - Qiita

    はじめに 僕はWebフロントエンドはほぼやってないんだけど、Firefox OSとかもアレだって事でソレ系にも手を出すかとあれこれやってたらまぁWebのフロントエンド周りのツールが何か色々あってよくわかんねーしどうしよっかなと思ってた所Yeoman辺りが大分良さそうなんじゃないか程度にはわかって来たので手を出してみた次第。 Yeomanってなに Webフロントエンドでよくある各種構成をコマンド一発で生成してやろうじゃん、というのがYeomanらしい。Yeomanは内部でyo, bower, gruntの3つのツールにわかれていて、Yeoman自身が作ってるのはyo。bowerはTwitter社が、GruntはBocoup社がメインで作っている。 ワークフローとしてはこうらしい yoでプロジェクトを作成し、bowerで依存性管理をし、gruntでビルド&テストをするという事だそうで。volo

    Yeomanのあれこれ - Qiita
  • Grunt 日本語リファレンス | js STUDIO

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

  • Karma(元Testacular)を使って簡単にテストを実行しよう | DevelopersIO

    Karmaとは 昨年、Googleがnode.jsベースのJavaScriptテストランナー、「Testacular」をオープンソース化しました。 このツールは元々AngularJSのためのテストフレームワークとして作られたそうで、 クライアントサイドのJavascriptコードのテストを簡単に実行することができます。 このツール自体はテストランナーで、JasmineやMochaなどのテストフレームワークを使用してテストを行います。 先日このプロジェクトの名前が変更され、「Karma」という名前になりました。 今回はKarmaのインストールからテスト実行(+ Gruntでの実行)までをおこなってみます。 環境構築方法 今回使用した動作環境は以下のとおりです。 OS : MacOS X 10.7.4 Node.js : v0.10.0 npm : 1.2.14 Grunt : 0.4 npm

  • Grunt の記事一覧 | DevelopersIO

    # Grunt の記事一覧JSHintの結果を静的レポートとして出力する。 梶原裕2014.06.02gruntfile.jsのパラメータを別ファイルに分割してみた 梶原裕2014.05.20Grunt + TypeScript + Middleman によるフロントエンド開発環境を作ってみる 山田 直樹2014.04.30[Grunt]grunt-ec2でGruntからEC2を操作する 中村 修太2013.11.28[Grunt]grunt-contrib-jstでjsテンプレートを管理する。 清田 隆志2013.10.23AngularJSジェネレータでコマンドを使ってみる 中村 修太2013.09.12【Grunt】styledoccoでCSSスタイルガイドを自動作成をしてみる。 清田 隆志2013.08.09AngularJSのviewをもう少し使ってみる&テストを実行 中村 修太

    Grunt の記事一覧 | DevelopersIO