JavaScript作業自動化ツール「Grunt 1.0.0」が登場。約2年もの開発停滞から復活
Webサイトやアプリケーション開発で発生する作業を自動化してくれるツール「Grunt」の正式リリースとなる「Grunt 1.0.0」がリリースされました。 Gruntは、いわゆるビルドツールやタスクランナーと呼ばれるソフトウェアの1つで、Node.jsをベースにしたオープンソースとして開発されています。 JavaScriptで自動化したい作業を記述でき、また多くのプラグインによって一般的な作業の多くを簡単に自動化できます。例えば特定のディレクトリを監視し、そこに保存されたファイルを自動的に処理する、といったことが可能です。 特にWebサイトやWebアプリケーション開発で発生するタスク、例えばJavaScriptファイルのミニファイ（最小化）、自動ユニットテストの実行、文法チェックなどでよく使われています。 昨年jQuery Foundationに加入し、復活したGrunt Gruntは20
[意訳]私がGulpとGruntを手放した理由 - Qiita
このポストは、Why I Left Gulp and Grunt for npm Scriptsを筆者の許諾を得て意訳したものです。間違いがありましたら、ご指摘いただけると幸いです。 （以下、訳） 私はGulpとGruntが不要な抽象化レイヤーだと気づきました。npmのscriptsはとても強力で、そっちの方が便利だったりします。 例を挙げましょう 私はかつてはGulpが大好きでした。しかし結局のところ、100行ものgulpfileと大量のgulpプラグインを扱うハメになりました。Gulp上でWebpackやBrowsersync、Mochaなどを統合するのは本当にたいへんでした。なぜでしょうか？それは、プラグインによってはドキュメントが不十分だったり、APIの一部しか公開されていなかったためです。 これらを解決しようと思えばできました。しかしなんと それらのツールを直接使用すると不具合が
![[意訳]私がGulpとGruntを手放した理由 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/12154c3563ab1e4c476ab29976daf0bf560e5aaf/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU2JTg0JThGJUU4JUE4JUIzJTVEJUU3JUE3JTgxJUUzJTgxJThDR3VscCVFMyU4MSVBOEdydW50JUUzJTgyJTkyJUU2JTg5JThCJUU2JTk0JUJFJUUzJTgxJTk3JUUzJTgxJTlGJUU3JTkwJTg2JUU3JTk0JUIxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1iZTQ0NGZiN2E3NjgxZTk3NDhhN2VjMjJjMDJlYjM5NQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB0ZW5rZWkmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTU0NzA5OTdmMTUwMmIzOTNhZmZjMzdjZTY5MmZmOWNm%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dedfd6cbca21222e04e388c5b3c8fab39)
「Grunt」がjQuery Foundationに加入。開発者のBen Alman氏は後継者を募集
JavaScriptでアプリケーションを開発する際には、ファイルの圧縮や単体テストを実行するなどの作業が何度も行われます。これらを自動的に実行してくれる、いわゆるタスクランナーとしてよく知られるのがオープンソースで開発されているツール「Grunt」です。 そのGruntがjQuery Foundationに加入し、開発体制を刷新する方向であることが発表されました。 開発者のBen Alman氏は、Grunt開発の統治を引き継いでくれる人を探しているとのことです。jQuery Foundationのブログに投稿された「Grunt, Rebooted」から引用。 Ben Alman, the creator of Grunt, is looking for contributors who can take over the reigns. Gruntの開発者であるBen Almanは、統治を
Webサイト制作に便利なGruntプラグイン（その2） - Qiita
この記事の続きになります。 この記事では、個人的にWebサイト制作によく使っているGruntプラグインを、grunt-contrib以外から4つほど紹介しています。前回の記事の通り、設定例は雰囲気をつかむためのほんの一例になりますので、詳しい使い方につきましては、各々のプラグインのページを別途ご覧ください。 load-grunt-tasks load-grunt-tasks プラグインを追加する度に、
makeのくびき - saneyuki_s log
「gulpって何だよ、makeでいいじゃん（要約」論争について、私もちょっと一本講釈をぶってみることにする。あれやこれやといった実利的な話をするつもりはない。そういうものは既に書いた人がいるのでそちらを参照のこと。 Gruntの思い出 Gruntは、私の印象で言えば車輪の再発明の失敗作のようなもので、タスク間の依存関係が破滅への一途をたどり管理不能に至るなど、宣言型の負の側面が強く出てしまった。しかし、設定は本当にサンプルコードのコピペだけで組み立てられるので、JSが不得手なデザイナーなどには非常に受けが良かったという点は忘れてはならない。ちょうど、html5ブームが本格化して, Apache Antとかに慣れ親しんだJava（主にSIer）系の人が入ってきたタイミングにあった道具かつ、Yeomanファミリーにも組み込まれており、それでいて簡単な事をやらせるには悪くはない具合のシンプルさ、
最近のビルドツールって何なの？ - 檜山正幸のキマイラ飼育記 (はてなBlog)
TypeScriptでは、コンパイルが必要です。プログラムをブラウザーとNode.jsの両方で使おうとすると、さらに加工が必要です。ミニファイだの文書も作るだのすると、ちょっとしたビルドプロセスとなるので手作業では辛くなります。 今更Makeでもないよなー、と思い、最近のビルドツールを試してみました。 内容： 流行りすたりが激しすぎる gulpを使ってみる：こんなサンプル gulpのビルドスクリプト タスクランナーってのはビルドツールとは違うのか？ ビルドツールは進化したのか 参考資料： 例題のファイルとコマンドの一覧 ソースファイル 追加の話： gulp問題ひきずり：ウォッチがまたおバカ過ぎる 流行りすたりが激しすぎる 「確かGruntってツールがあったよな」と、インストールと使い方を調べていると、やたらにgulpって単語が目立つんですよね。Gruntのライバルの新興勢力らしいです。 「
Grunt/Gulpで憔悴したおっさんの話 | MOL
先人たちが1年前に通った道で、いろいろいまさらかよって話なんですが。基本的に以下の記事読んだら分かります。要はGulpとかGruntといったモノ使わずにnpm run hogehogeでビルドしよーぜって話です。 task automation with npm run オレ的Gruntに対する最新の気持ち - from scratch Node - npm で依存もタスクも一元化する How to Use npm as a Build Tool // package.json "scripts": { "start": "npm run start-serve & npm run watch", "test": "stylestats public/files/css/maple.css", "start-serve": "browser-sync start --server publ
JS とかの管理を grunt+bower でやるようにしてみた - tokuhirom's blog
bower 的なものを使わないと､｢これどこから拾ってきたんや……｣という感じになりがちなので､一応やったほうがいいでしょうと｡ bower は直接使っていると､git のレポジトリをぶちまけるばかりで､あきらかに不要なファイルを配信することになり気持ち悪いなーと思っていたのですが､grunt なり gulp なりを使うと､いらないファイルは展開されないようです(ちゃんと main というプロパティを bower.json に記述している場合)｡ Perl なりなんなりで書いていると､node.js のツールを一部だけ使うのとかだるくてアレですが､Java の案件だとみんな何かしら LL を併用しながらやるので､まあいいかな､と｡ package.json に以下のように記述します｡そうすれば grunt の依存とかもなんとなく入る｡ { "name": "jmx-dashboard",
GruntでJasmineを使ったHeadlessなユニットテスト
GruntではHeadlessなユニットテストを行うための Qunit があります。しかし、個人的にはRSpec風に記述できる Jasmine の方が読みやすいので、Jasmineでのユニットテスト環境を構築してみました。 まず、Grunt Jasmine runner をインストール [shell] $ cd /your-project $ npm install grunt $ npm install grunt-jasmine-runner [/shell] PhantomJSがない場合はBrewでいれておく [shell] $ brew install phantomjs [/shell] 自身のgrunt.jsファイルに追加 [js] // Jasmine jasmine: { // テストするためのソースファイル src : ‘path/to/project/*.js’, //
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
昨今のWebアプリケーションのひな形その2 - Grunt - naoyaのはてなダイアリー
昨日の続き。 こういうアプリケーションのテンプレートを管理するのに便利な仕組みはないですかねーと言っていたら @teppeis さんや @omo2009 さんに Grunt や Yeoman はどうかと教えてもらった。 Grunt はユースケースとしては JavaScript の連結や圧縮、SCSS/LESS なんかのメタ言語のコンパイルをするときに使うもの、つまり rake なんかと同じようなものと以前にチラ見した程度で知った気になっていたけども、ちょっと違っていた。Grunt は確かにタスクランナーではあるのだが、Node.js で実装している利点を十分に活かして、任意のファイルが更新されたのをトリガに一連のタスクを実行させたり、Grunt で Webサーバーを立ち上げて他のタスクと連携させたりといったことができるようになっている。プラグインの仕組みがあって、エコシステム的に結構活発に
JavaScript の簡単☆単体テスト（grunt + qunit） - Qiita
概要 Chrome Extention やWebページ用のJSのコード書くときに使う単体テスト環境をサクッと用意したいと思って色々試しました。 今のところこれが個人的なベストです。 「もっと良いやり方があるよ！」という方、是非教えてください。真似させていただきます。 ちなみにqunitの概要についてはこちらのQiita記事が詳しいです。 Qunitの概要 完成図 / (プロジェクトフォルダ) ├── Gruntfile.js ├── node_modules/ ├── package.json ├── src (ソースコードを入れる) │ └── aaa.js └── test (テストコードを入れる) ├── aaa.test.js └── index.html
Yeomanのgenerator-angularとRailsの組み合わせでの開発環境構築 - 仙台 Ruby Vim JavaScript フリーランスプログラマ
grunt-connect-proxyを使って、rails server と、grunt serve の2つを叩いてLiveReloadで開発出来るようにしようという話。 あとフロント側をビルドするとRailsのpublicディレクトリに静的ファイルとして配備するように。 RailsのAsset PipelineにAngularJSを載せるんじゃなくて、サーバーサイド(Rails)とクライアントサイド(AngularJS)を分離しての開発の話。 こういう事↓ 理想的な Rails, AngularJS 環境の構築 - ボクココ 前提 Railsアプリ作成して、apiのnamespaceでAPIを作成済み、Railsアプリのルートにngappとかディレクトリ作って、yo angular --coffee でフロントエンド部を生成済みとする。*1 作業 % cd ngapp % npm ins
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//キャッシュファイルを生成
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
Gruntでプチバージョン管理♥ぽいアップロードのやりかた - Qiita
ブランチを簡単に切るようにアップロードがしたいんです！ いろんな演出を試したり、UIを変更したり、ブランチを簡単に切るようにアップロードがしたいんです。 で、いろんなひとにサクッと確認してほしいんです！ 日付ディレクトリを自動で作ってアップロードしまくる！ こういう感じのバージョンにしたディレクトリをいっぱい作ってそこに展開しまくります。 わかりやすい！やりかた grunt-sftp-deploy を使います ビルドIDを作成(日付ディレクトリになるやつ) publicディレクトリの中身を、日付ディレクトリにアップロードするようにsftp-deployのdestを設定 # Grunt v0.4.5で動きます # 日付を作る # build-versionオプションが設定されてなかったら、いまの時間を設定する revision = grunt.option('build-version')
Grunt + TypeScript + Middleman によるフロントエンド開発環境を作ってみる | DevelopersIO
Middleman を使うようになってしばらく経ちますが、2014年4月現在 TypeScript に対応していないというのがどうも気になります。Ruby on Rails や Sinatra といった他の Ruby 製フレームワークと同様、Middleman が対応している Alt JS は CoffeeScript のみです。 CoffeeScript は機能が軽量であることから学習コストが低く、記述されるコード量も少なくなるので個人的に結構気に入っているのですが、Web アプリケーションの規模が大きく複雑になるにつれて静的型付けの機能を持っていないことがデメリットとして浮上してきがちです。案件の規模によっては静的型付け言語の採用を検討しないと後々で大変な目にあいかねません。 はい。JavaScript や CSS 周りのお世話なら Grunt だけで十分にまかなえるのですが、Midd
CoffeeScriptやSassなどの使用時にオススメのGruntプラグイン一覧
連載目次 前回の記事「ブラックなWeb開発現場の救世主、Gruntのインストールと使い方」では、Gruntについての概要とセットアップ、基本的な動作を確認してみました。 今回は、Gruntで使用できるいろいろな「プラグインモジュール」（以下、プラグイン）をインストールし、実際に動かして動作を確認してみましょう。 Gruntのプラグインとは、何ができるのか 前回の繰り返しになりますが、プラグインを使用すると、Gruntでいろいろなタスクを実行できるようになります。実行できるタスクの内容はプラグインによってさまざまですが、幾つか例を挙げると、下記のような作業が自動化できます。 CoffeeScript／TypeScriptをJavaScriptへコンパイル（変換） SCSS（Sass）／LESSをCSSへコンパイル（変換） ファイルの圧縮／結合／最適化 JSHintでJavaScriptの構文
ブラックなWeb開発現場の救世主、Gruntのインストールと使い方
連載目次 一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。 例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合 単体テストの実行 JSLint（構文チェック）の実行 さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。 また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。 ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のフロントエンドツールの紹介
