[B! JavaScript][grunt] ThailandMethodのブックマーク

ブラックなWeb開発現場の救世主、Gruntのインストールと使い方

連載目次一昔前であれば、HTML／JavaScript／CSSを使用してWebアプリを作成する場合、（筆者の経験では）所定の位置にファイルを置くだけでした。最近はHTML／JavaScript／CSS関連の技術も複雑化／多様化し、いろいろなことを考慮しなければなりません。例えばJavaScriptファイルの場合は、以下の作業を行うこともあるでしょう。 minify（圧縮）や結合単体テストの実行 JSLint（構文チェック）の実行さらに、CoffeeScriptやTypeScriptを使用している場合にはコンパイル（JavaScript変換）を行う必要もあります。また、SCSS（Sass）やLESSなどのCSS拡張メタ言語を使用している場合にも、コンパイル（CSS変換）作業が必要です。ファイルを修正してビルドするたびに、これらの作業をいちいち手作業で行っていては非常に面倒でしょう

ThailandMethod 2014/03/04

リンク

打倒Grunt！Node.js用の新たなビルドシステムgulpことはじめ | OpenWeb

メリークリスマス！このブログは、HTML5 Advent Calendar 2013の12/25用です。とはいえ、HTML5カンファレンスとかあったせいで、最近あまり技術的なトピックを追っておらず・・・ここは、つい最近目にした gulp というプロダクトを触ってみたレポートでもしようかと思います。 Node.js製なので、実はHTML5ともあんまり関係ない。すいませんすいません gulpは、自身のことを「ストリーミング・ビルド・システム」と称しています。つまり、Gruntなどと同カテゴリの「ビルド用ツール」です。 Gruntは、JSON形式で宣言的にタスクのパラメータを記述していく形式です。慣れればスッキリしていて見やすいし、設定を変更するのも容易なのですが、細かくタスクの動作を制御する必要が生じた時に「何をどうすれば求める結果が得られるのか？」がわかりにくいという欠点があります。あ

ThailandMethod 2013/12/26

リンク

JavaScriptフロントエンド開発の昨今

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

ThailandMethod 2013/10/11

リンク

Gruntで始めるWeb制作の自動化

Gruntで始めるWeb制作の自動化 Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。インストールまずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインストールが可能です。次にMacではターミナルを開いてgrunt-cliをインストールしましょう。cliとはCommon Language Infrastructureの略でコマンドラインからGruntを利用するためのツールです。 sudo npm install -g grunt-cli パスワードが聞かれるので入力してください。成功すればgrunt-cliのイ

ThailandMethod 2013/08/28

リンク

gruntのzsh補完を書いた。 - よんちゅBlog

bashの補完は公式で提供されていたが、gruntのzsh補完がなかったので作った。私が存在を知らないだけかもしれないので、知ってる方がいたら教えてください。 (zsh-completions と oh-my-zsh にはなかった。1つだけgithubにあったけど微妙だった。) ちなみに公式のbash補完は、以下の設定を .bashrc などに記述すれば使用出来ます。 eval "$(grunt --completion=bash)" zsh補完イメージインストール方法 Githubに置いてあるのでとってきて下さい。 yonchu/grunt-zsh-completion · GitHub $ git clone git://github.com/yonchu/grunt-zsh-completion.git or $ wget https://github.com/yonchu/gr