August 15, 2013

GruntでCoffeeScriptとSCSSのファイルを監視して自動コンパイルしてみる

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%; }

No comments:

Post a Comment