grunt

A collection of 8 posts

grunt

PhpStormからCakePHPをGrunt.jsで起動する

先日、第7回PHP関西勉強会でLTをさせて頂きました。 PhpStormとGrunt.jsで作るCakePHP快適開発環境 from kamiyam . 私の中ではLTの構成として GruntとCakePHP PhpStormとGrunt という二部構成だったのですが、まぁこれが5分で終わるはずもなくほどんど解説すること無く終わってしまったので、フォロー記事を書いてみました。 PhpStorm 6.0.3 GruntとCakePHP まずは第一部、GruntとCakePHPの構成についてです。 ・CakePHPのフォルダ構成などに合わせたビルド実行 ・CSS/JS/PHP(CTP)の変更監視・LiveReload ・PHP -Sを使ったサーバ起動(PHP5.4 <) ・Apache・nginxへのリバースプロキシ(<PHP5.3) という処理をGrunt.jsを使って実行させる。という内容です。 Gruntfile.js 一式 https://gist.

  • kamiyam
    kamiyam
grunt

Yeomanでフロントエンドとバックエンドサーバを一緒に開発する

先月、HTML5など勉強会に参加した時、雑談タイムで 「 yeoman を使ってバックエンドの開発とかできないですか? 」 という内容に対して、フォローとして 「 gruntでリバースプロキシ使えますよ 」 っていうお話をした。 そのまま記事に書かずじまいで申し訳ないなーと思っていたら、@bathtimefish さんがブログをアップされていた。 その記事、 YeomanでフロントエンドとREST APIサーバーを同時に開発する方法 でリバースプロキシを使った手法が挙がっていたのですが、gruntのモジュールを使うともう少し楽ができそう。 私は、easymock を知らなかったですし、やはりyeoman 使ってる人が周りにあまりおらず、前回の勉強会は非常に勉強になったので、ここは一つ御礼の意味を込めてブログを書こうと思います。 ということで、yeoman(grunt) を使ったバックエンド開発のもう一つの手法を書いておきます。 さてここからが本題。 ベースとなる手順は元の記事を見ていただきつつ、途中まではだいたい同じです。 Yeomanは使える環境が整っているのが前提。 使えない場合はYeoman 導入編を参照してみてください。 まず REST APIサーバのモックが簡単に作れる easymock をインストール $ npm install -g easymock Node.

  • kamiyam
    kamiyam
grunt

grunt 管理下で Express(Node.js)を開発できるgrunt-init-express を公開しました

gruntで Expressを使った開発を行う環境を生成するgrunt-initテンプレートを公開しました。 grunt-init-express https://github.com/kamiyam/grunt-init-express 概要 grunt を使うとSass、LESSのコンパイルやWebSocketを使ったLiveReload、ファイルの圧縮など様々なことがことができますが、grunt-init コマンドを使うことでscaffoldingな構成を簡単に生成することができます。 すでに提供されているテンプレートを使用することもできますが、今回のようにベースとなるテンプレートを自分で作成することもできます。 公開されている grunt-init の 他のテンプレートについては過去記事を参照してください。 grunt-init-express はこんな機能があります。 gruntからNode.jsを実行 Node.jsをgruntのプロセスで管理するため gruntコマンドを使用します。Node.jsはsupervisorコマンドを使用しています。 SassとCoffeeScriptのコンパイル SassからCSSへ、CoffeeScriptからJavaScriptへ自動でコンパイルします。 HTML、CSS、JavaScript、View(ejs/jade)ファイルのファイル変更監視 public(private)フォルダのHTML、CSS、

  • kamiyam
    kamiyam
grunt

Grunt.js 処理中にsayコマンドを実行すると開発も気持ちスピーディに!?

はい、ネタです。みんな大好き sayコマンド。 MacOSではターミナルで say hogehoge と実行すると喋ります。 $ say hello world !! 「hello world!!」 出来ましたよね。 話は代わって、Grunt.js では grunt-exec を使うことでシェルコマンドが実行出来ます。 よくGruntの処理が終わったらGrowlで結果を表示したり、処理に応じていろんな出力を行っています。 そこでGrunt実行中に処理の内容をsayコマンドで喋らせれば面白いんじゃないかと思い、やってみました。 手順 ベースはこのgrunt-contrib-livereloadの記事です。 (今回の分もgistに一式おいてあります。) 流れとしては次の通りです。 grunt-exec をロード execで使用するsayコマンドを記述 各タスクごとに設定したコマンド処理を埋め込む package.json package.jsonに grunt-exec を追加します。 $ vim package.json { "name"

  • kamiyam
    kamiyam
grunt

grunt-init を使えば色々なプロジェクトのひな形の生成が簡単に

grunt-init を使うと色々なプロジェクトのひな形を簡単に自動で生成してくれるようになります。 Project Scaffolding http://gruntjs.com/project-scaffolding ここでいう色々なプロジェクトとは 次の項目を開発する際のパッケージのことです。(grunt公式から引用) grunt-init-commonjs Create a commonjs module, including Nodeunit unit tests. grunt-init-gruntfile Create a basic Gruntfile. grunt-init-gruntplugin Create a Grunt plugin, including Nodeunit unit tests. grunt-init-jquery Create a jQuery plugin, including QUnit unit tests. grunt-init-node

  • kamiyam
    kamiyam
grunt

matchdepを使ってGrunt.jsのプラグインを自動ロードする

Gruntが0.4系になってGruntのプラグインが細分化されました。 名称が grunt-xxx となるものが非常に多くなりましたね。 また、細分化された分 Gruntfile.js でロードするプラグインの数が多くなっています。 packege.json にこのような記述があったとしましょう。 { "name": "grunt-plugin-auto-load", "version": "0.1.0", "Dependencies": {}, "devDependencies": { "grunt": "~0.4.0", "grunt-contrib-connect"

  • kamiyam
    kamiyam
grunt

Yeomanを使ってSass/LESSをもっと簡単スピーディに 〜導入編〜

概要 解説編でも書きましたが、Yeomanはビルドツールです。 ファイルの変更を監視してブラウザのリロードをかけたり、Sass LESSのコンパイルを行い、最終的に実行ファイル(プレーンなHTMLやCSSファイル)を出力したりする機能があります。 今回は Yeoman1.0 (beta) のインストールについて書きます。 (※ 2013/02/21時点で安定版 はv0.9.6、v1.0.0は beta の開発版です) Yeoman インストール Yeoman を利用するために、以下3つをインストールします。 $ npm install -g yo grunt-cli bower yo Yeoman本体です。 v0.9まで yeomanコマンド ですべて実行していたのですが、yoコマンドに変更されました。 grunt-cli

  • kamiyam
    kamiyam
grunt

grunt-cli (grunt.js v0.4.x)で LiveReload を試してみた

GRUNTのバージョンがv0.4.0になり、記述・利用方法が一新されました。 Grunt 0.4.0 released 主な変更点と言えば、 grunt-cli をグローバルインストール gruntを各プロジェクトごとにローカルインストール プラグイン(contrib-xxxなど)は細かく細分化された (プラグインはpackage.json に記述し npm install でインストール) Yeomanも1.0から grunt-cli をインストールする形になっています。 手順 今回はLiveReloadを試してみたいと思います。 grunt-contrib-livereload Sass,lessの自動コンパイルなどは無しで。 ファイル一式(gist)https://gist.github.com/kamiyam/4996713 □□□□□□□□□□□ grunt をインストールして作業用のフォルダを作成する もし、0.

  • kamiyam
    kamiyam