2014-08-25

grunt-contrib-copy のサンプル

Flattening the filepath output:

copy:
	main:
		# src に指定したフォルダーまで含めてコピーしたくなければ true
		expand: true
		# ** だとサブフォルダーの中も含めてコピー
		src: 'src/**'
		dest: 'dest/'
		# 階層的なコピーをしない
		flatten: true
		# コピーは File だけ
		filter: 'isFile'

Grunt はいろいろできるのが楽しいです。

2014-08-25

grunt のサンプル :: package.json と gruntfile.coffee

jQuery/Javascript 日記

サンプルがないと不便と言われたので。

Prod 環境だけを抜き出したサンプルだけど、たぶん動くはず。
いまよりも便利にしたいけれど、モチベーションが起きないのは効率良く使えてないからだと思う。

package.json

{
  "name": "works",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-coffee": "^0.11.1",
    "grunt-contrib-compass": "^0.9.1",
    "grunt-contrib-less": "^0.11.4",
    "grunt-contrib-watch": "^0.6.1",
    "load-grunt-tasks": "^0.6.0"
  }
}

gruntfile.coffee

#gruntfile.coffee
module.exports = (grunt) ->

	# load all grunt tasks matching the `grunt-*` pattern
	require('load-grunt-tasks')(grunt)

	grunt.initConfig
		clean:
			build:
				options:
					force: true
				src: [
					'../path/css/*'
					'!../path/css/sns.min.css'
					'../path/js/src/app.js'
				]

		less:
			prod:
				options:
					path: '../path/less'
					compress: true
				files:
					'../path/css/sample.css': '../path/less/sample.less'

		compass:
			prod:
				options:
					config: '../path/config.rb'

		coffee:
			compile:
				files:
					'../path/js/src/app.js': '../path/coffee/src/app.coffee'

		watch:
			less:
				tasks: 'less:prod'
				files: '../path/less/*.less'
			compass:
				tasks: 'compass:prod'
				files: '../path/scss/*'
			coffee:
				tasks: 'coffee:compile'
				files: '../path/coffee/*'


	grunt.registerTask 'default', [
		'clean'
		'less'
		'compass'
		'coffee'
		'watch'
	]

まだ yeoman.io を試せていないので、はやいところ当たり前のように使って楽をしたい。

2014-08-23

Linux bean を試してみた :: 日本特化(?)の軽量ディストリビューション

日記 Linux

こんばんわ。
時々、Windows が嫌いになって Linux に触りたくなる慢性の病に悩まされているボクです。

そんな発作に侵されて、Linux bean をインストールしてみました。

linuxBean (リナックスビーン) プロジェクト日本語トップページ - SourceForge.JP
舞台袖 linuxBean

あまりいうことないくらいに普通に使えるディストリビューションだと思いました。

ちょっと Linux 触りたいけど CLI だけだとやだなーとか、
Ubuntu だとちょっと重いんだよねーとか、
日本語じゃないと怖くて無理なんですーって人にはいいのかも。

軽いは正義ですよね。

2014-08-21

いまからでも余裕で間に合う Grunt の始め方 :: 短縮版

jQuery/Javascript 日記

社内の新人向けに作った。

Grunt とは

自動で決められたことをやってくれるツールです。
ビルドツールなんて呼ばれています。

Grunt: The JavaScript Task Runner

どうやって動いてるの?

node.js で動いています。

簡単な始め方

node.js が動いていることが前提なので node.js と npm が動くことを確認してからはじめましょう。

> node -v
> npm -v

もしインストールしてなかったら...

node.js

Grunt-cliをインストール

最初にコマンドラインインターフェースこと CLI をインストールしておきます。

> npm install -g grunt-cli

Grunt に必要なファイルを知ろう

package.json
- 必要な npm プラグインを記述する
gruntfile.coffee (gruntfile.js)
- 実行するタスクを記述する

package.json を作る

package.json は自分で書くのも面倒なので、自動で作りましょう。

npm init を実行すると、実行した場所に package.jsonを作成してくれますので、適当なフォルダの中で実行してみましょう。

> mkdir c:\nya
> cd c:\nya
> npm init

これで c:\nya の中に最低限の package.json を作成してくれます。

package.json の記述内容を詳しく知りたい人は...
package.json

Grunt プラグインをインストールする

package.json のある場所で、Grunt プラグインをインストールします。

プラグインはインストールをするときに --save-dev を付けると、package.json に追記してくれます。

> npm install grunt --save-dev

package.json を確認すると...

  //　略
  "devDependencies": {
    "grunt": "^0.4.5"  // ← この行が追加された
  }

gruntfile.coffee(gruntfile.js) を作る

実行したいタスクである gruntfile は、自分で書く必要がありますが一度書けばなんとかなく勘所は掴めると思います。

#gruntfile.coffe
module.exports = (grunt) ->

	# タスク '猫'を作る
	grunt.registerTask 'neko', ->
		# 文字列出すよ
		grunt.log.write "吾輩は猫だにゃー"

	# default の後ろに実行したいタスクの名前を書く
	grunt.registerTask 'default', ['neko']

Grunt を実行してみる

> grunt
>
> Running "neko" task
> 吾輩は猫だにゃー
> Done, without errors.

やりたいタスクがいっぱいあるんだけど!?

こちらのプラグイン置き場から良さそうなのを探すといいよ。

Plugins - Grunt: The JavaScript Task Runner

実際にプラグイン使うときには package.json を読み込むように gruntfile に記述したりとかもします。

#gruntfile.coffe
module.exports = (grunt) ->
	pkg = grunt.file.readJSON 'package.json'

	# 略

プラグインの使い方は別のサンプルを見たほうがよろしいかと思いますので、ばっさり割愛。

始めるまでは物凄く敷居が高く思えましたが、やってみると意外と楽でした。
最初は小さく始めるのがよろしいかと思います。

kwsktr's study log

kwsktr のおべんきょログ