https://github.com/float1251/grunt-sample-project
とりあえず作業ログを残します。
作業ログはcoffeescriptですが、githubはtypescriptでもやってます。
業務ではプラスしてjsとcssのminimifyとかもやるようにしました。
Grunt.jsでcoffeescriptをcompileする
# grunt-cliをinstall
npm install -g grunt-cli
# sample-projectを作成する
mkdir ~/sample-grunt
# 作成したdirectoryに移動する
cd ~/sample-grunt
# package.jsonを作成する
# あとで編集できるので全部変更しないでOK
# あとで編集できるので全部変更しないでOK
npm init
#以下のコマンドを実行する
#--save-devとつけることでpackage.jsonにdevdepencyが追加される。
#そのため次からはnpm installコマンドで環境が設定できる。
npm install grunt --save-dev
npm install grunt-contrib-coffee --save-dev
# Gruntfile.jsを作成する
# URLからサンプルを持ってきて作成する.
# http://gruntjs.com/sample-gruntfile
# 今回はcoffeescriptで作成したが,jsのほうがいいかもしれない。
# json形式でのerror回避がcoffeescriptだと若干めんどくさい
# http://gruntjs.com/sample-gruntfile
# 今回はcoffeescriptで作成したが,jsのほうがいいかもしれない。
# json形式でのerror回避がcoffeescriptだと若干めんどくさい
module.exports = (grunt)->
grunt.initConfig {
pkg: grunt.file.readJSON("package.json"),
coffee:{
glob_to_multiple:{
expand:true,
cwd:"./coffee",
src:["*.coffee"],
dest:"js/",
ext:".js"
}
}
}
grunt.loadNpmTasks "grunt-contrib-coffee"
grunt.registerTask("default",["coffee"])
# testのためcoffee
mkdir coffee
echo console.log\("Hello Grunt"\); > coffee/test.coffee
# coffee以下にファイルができていることを確認
ls coffee/
>test.coffee
# 以下を実行してErrorがなければOk
grunt
ファイルが更新されたらcoffeescriptをcompiliする
# grunt-contrib-watchを試す
npm install grunt-contrib-watch --save-dev
# Gruntfileに以下を追加する
grunt.loadNpmTasks "grunt-contrib-watch"
watch:{
files:["coffee/*.cofffee"],
tasks:["coffee"]
}
# 以下を実行して watchされていることを確認
grunt
# coffee以下のファイルを修正して、jsファイルが出力されていることを確認する
※base_pathやcwdにはsrcに記載しているファイル名までのPathを記述する。
これを記述しないと
src:"src/*.coffee"
dest:"js/"
のときに
js/src/*.js
という形式になってしまう。
