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は、統治を

ASP.NET 5 と Visual Studio 2015 Preview では Bower と Grunt、そして npm へ標準で対応するようになりました。今後は ASP.NET 5 開発で必要となってくる知識になるので、簡単に調べてみました。 既に ASP.NET 公式サイトでは Visual Studio 2015 で Bower と Grunt を使う記事が公開されてます。 ASP.NET Core Blazor | Microsoft Learn これまでは NuGet だけ使っていれば解決してましたが、今後は .NET のコンポーネントだけが NuGet で提供され、クライアントサイドのコンポーネントは Bower を使うようになるのでしょう。 テンプレートにも Bower / Grunt / npm の設定ファイルが用意されていますが、まずは Bower と Grunt

Options options.target type <string> default "default" Specify ECMAScript target version: "default", "es3", "es5", "es6" or "latest". options.module type <string> default "commonjs" Specify module code generation: "commonjs" or "amd". options.declaration type <boolean> default false Generates corresponding *.d.ts file. options.comments type <boolean> default true Emit comments to output. options.s

テスト書いてないとかお前それ @t_wada の前でも同じこと言えんの? こんにちは。皆さんテストは書いていますか。 私はAngularJSを書き始めた当初Jasmineを使い、以後1年以上そのままだったのですが、周りの流れがどうもmochaらしいのと、t_wada氏のpower-assertを試してみたかったことから、今回一念発起して乗り換えました。今回はその内容のメモです。 あと、gruntです。（gulpは全然勉強してない） 変更前の環境 クライアント・サイド (Browser) grunt jasmine karma karma-jasmine サーバ・サイド (node.js) grunt jasmine-node 両サイドともフレームワークにjasmineを用いて、テストランナーにはjasmine-nodeやkarmaを使用、gruntで監視して動かすといった構成でした。 クラ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? どんなニーズに基いているか デザインやちょっとしたプログラミングをする人なので、単体テストとかはないです。 デザイナーだけどフロントエンドに興味ある人向け。 2015-02-07: gulp編を作成 gruntからgulpへ移行したので、gulp版の一覧も作成しました。 僕がGulpで使っているPluginとnode.jsモジュール一覧 - Qiita プラグイン一覧：非Contrib系 grunt-aws-s3 S3にアップロードできるプラグインはいくつかあるけど、いくつか試して一番良かったのがこれ。 同名ファイルは確認なしで上書き可

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

This talk covers build tooling, processes, and your development workflow. You’ll get a glimpse as to why you should be building, and why you should put together a build process from the get-go. Then we’ll move on to tooling. Here I’ll discuss some of the most popular JavaScript build tools, namely Grunt, Gulp, and npm. We’ll investigate how each one performs for certain tasks, and I’ll help you fo

Middleman を使うようになってしばらく経ちますが、2014年4月現在 TypeScript に対応していないというのがどうも気になります。Ruby on Rails や Sinatra といった他の Ruby 製フレームワークと同様、Middleman が対応している Alt JS は CoffeeScript のみです。 CoffeeScript は機能が軽量であることから学習コストが低く、記述されるコード量も少なくなるので個人的に結構気に入っているのですが、Web アプリケーションの規模が大きく複雑になるにつれて静的型付けの機能を持っていないことがデメリットとして浮上してきがちです。案件の規模によっては静的型付け言語の採用を検討しないと後々で大変な目にあいかねません。 はい。JavaScript や CSS 周りのお世話なら Grunt だけで十分にまかなえるのですが、Midd

この内容は grunt-typescript 0.3.2 (typescript 1.0.0) をもとに記述しています。 ついさっき grunt-typescript 0.3.2 をリリースしたわけですが、ちょっとコンパイルを早くしてみました。ってことで typescript 自体のコンパイルの速さを tsc と比較して見ました。 grunt-typescript は以下のように指定してます。 typescript:{ base:{ src: ["src/compiler/tsc.ts"] } } まずは tsc コマンド。 $ time tsc src/compiler/tsc.ts real 0m15.641s user 0m0.000s sys 0m0.015sで、じつは私の環境が Windows で Visual Studio 2013 の Update 2 RC が当たってる状態

WebStorm 8.0.0でgrunt consoleが実装されました。Gruntfileに定義されたタスクをWebStorm上でGUIから実行できます。 grunt-cliのインストール npmからgrunt-cliをインストールします。 npm install -g grunt-cli 環境変数の追加 WebStormはbashやzshの環境変数は読めないので、 システムの環境変数 にnodeのパスを通す必要があります。 nodebrew環境であれば、/etc/environmentに~/.nodebrew/current/binを追加します。他の環境でもgruntにパスが通るようにパスを追加すれば大丈夫だと思います。 プロジェクトにgruntをインストール プロジェクトにgruntをインストールします。 npm install grunt Gruntfile.jsを追加 これは手作

単独作業&JavaScriptメインのとある案件で必要に感じ環境を作ったので備忘録もかねて。 WebStormは以前から使用していて、TypeScriptは趣味で少し触った程度。Gruntに関しては今回が初めてで、 あと黒い画面は苦手です。 WebStorm？ HTML/CSS/JavaScriptの統合開発環境で、JavaScript版FlashDevelopのようなものを探していて辿りつきました。 素早い構文チェックと強力なコード補完機能、そして記述ルールなど各種設定項目の豊富さ柔軟さが気に入っています。 TypeScriptも標準でサポート。 TypeScript？ Microsoft社が開発するいわゆるaltJSの内のひとつ。 JavaScriptの拡張(スーパーセット)というスタイルで、既存コードの流用も比較的スムーズかつ、コンパイル後も読みやすい。 しかし反面、クラス

Grunt 0.4.3 is now available on npm. This is mostly a bugfix release. Thanks to Jonathan Krause, PatrickJS, Jason Cust, Fabio Crisci, James M. Greene and Mike Pennisi for their pull requests. In addition to closing over 30 issues, we have extracted grunt.util into its own module. As mentioned in the 0.4.2 release, we are in process of deprecating the grunt.util.* API. Task developers who use these

思いつき だいぶ前からGrunt周りというかGruntそのものへの関心が薄れゆくなか、タスク周りがやたらと充実してきたエコシステムの恩恵を、ただただ享受するにとどまっている。 業務で700行のGruntfile.jsを見かけて、SAN値をもっていかれた折に前々から感じていた疑念が表に出た。 「これ、Gruntに仕事させすぎじゃないの」 分担してもよいのでは 前述の700行のなかには、ファイルのビルドをはじめとして、ユニットテスト、E2Eテスト、ドキュメント生成、ローカルサーバー、LiveReload etc etc etc ...すべてひとつのファイルに入っていた。 (; ⁰⊖⁰) Oh... いまいち感覚的なトコロなので表現しづらいのだが、役割としてあまりにGruntfileで表現している内容がごった煮すぎるように思う。 自分の場合、テスト周りはtestemにしていて、ドキュメント生成系

Gruntについて最新の気持ち ::ハブろぐ 上記のブログエントリを読んで非常に今自分が感じていることと共通点を感じました。 Gruntに対する最新の気持ちでは2つの問題提起がされてました。 1. Gruntfile.jsが長すぎる(700行とか) 2. そもそも全部gruntでやらなきゃいけないのか 1.に関しては色んな解決手段があります、ブログの筆者も解決されているようですし、この件に関しては次回のMaintainable Gruntfile.jsで触れます。 最初は2.に関しての、全部gruntでやらなきゃいけないんだっけ、という疑問に関してです。 僕も同じ思いをしてたので、同調してブログを書きます。 gruntについて 言わずと知れたタスクランナーですね、gruntを使うとjavascriptのminifyやmeta cssのコンパイルといったフロントエンドにありがちな作業を自動化

A brief history of Grunt I realized that a task-based build tool with built-in, commonly used tasks was the approach that would work best for me Ben Alman March 2012 Single, global Grunt: $ npm install -g grunt Configuration over code grunt.initConfig({ lint: { src: 'src/<%= pkg.name %>.js' }, concat: { src: [ '<banner:meta.banner>', '<file_strip_banner:src/<%= pkg.name %>.js>' ], dest: '<%= pkg.n

最近、Grunt と grunt-contrib-watch を使っているのだけど、grunt-contrib-watch が CPU を消費しがちである。 watch 対象のファイルが少ないうちは grunt-contrib-watch は問題なく動くんだけども、ファイル数が増えてくると CPU の消費量が増えてくる。自分の環境では、1,000 個ぐらいのファイルを監視していると、常時 10% 程度 CPU を消費している。 この問題は既知であり、FAQ には次のように書いている。 たくさんのファイルを監視している場合、デフォルトの interval の値が小さすぎるかもしれない。options: { interval: 5007 } のようにして増やしてみてほしい。詳しくは issues #35 と #145 を参照のこと (※日本語訳は私によるもの) Another reason i

Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.

Posted: February 12, 2014 / Last updated: February 12, 2014 検索してもあまり日本語の情報が出てこなかったのでメモを残しておきます。 JSDoc # JSDoc は言うまでもないですが、JavaScript のソースコードに残したコメントから自動的にリファレンスドキュメントを生成してくれるコマンドラインツール。例えばこんな感じでソースにコメントを書いておくと /** * Resolve url from `srcset` syntax http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ * @param {string} src Default URL * @param {string} srcset `srcset` argument * @param {number|undef

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