Grunt公式:
http://gruntjs.com/
1. grunt-cliのインストール
$ npm install -g grunt-cli
2. 作業ディレクトリの作成
$ mkdir grunt_test
$ cd grunt_test
3. package.jsonの作成
vim package.json
4. package.json
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
}
}
5. gruntと必要なプラグインのインストール
$ npm install grunt grunt-contrib-watch grunt-contrib-coffee grunt-contrib-sass --save-dev
* --save-devオプションをつけるとpackage.jsonの"devDependencies"を上書きしてくれるみたいです。
* "description"とか書いてないので警告が出ます。
* grunt-contrib-watch: https://github.com/gruntjs/grunt-contrib-watch
* grunt-contrib-coffee: https://github.com/gruntjs/grunt-contrib-coffee
* grunt-contrib-sass: https://github.com/gruntjs/grunt-contrib-sass
6. Gruntfile.jsの作成
$ vim Gruntfile.js
7. Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
coffee: {
compile: {
expand: true,
flatten: true,
src: ['coffee/*.coffee'],
dest: 'js',
ext: '.js'
}
},
sass: {
compile: {
expand: true,
flatten: true,
src: ['scss/*.scss'],
dest: 'css',
ext: '.css'
}
},
watch: {
coffee: {
files: ['coffee/*.coffee'],
tasks: ['coffee']
},
sass: {
files: ['scss/*.scss'],
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ['coffee', 'sass']);
};
8. 監視開始
$ mkdir coffee
$ touch coffee/hello.coffee
$ mkdir scss
$ touch scss/test.scss
$ grunt watch
Running "watch" task
Waiting...
9. coffee/hello.coffeeを編集
console.log 'hello'
10. コンパイルされたファイルを確認
$ more js/hello.js
(function() {
console.log('hello');
}).call(this);
11. scss/test.scssを編集
#main {
h1{ margin: 10px }
p{ font-size: 90% }
}
12. コンパイルされたファイルを確認
$ more css/test.css
#main h1 {
margin: 10px; }
#main p {
font-size: 90%; }
