WebStormでGruntを使うファストガイド

goto_jp 526views 更新:2014年6月20日

前提

下記のフォルダ構成を前提とします。

project
├img
├js
├css
└sass

 手順

  1. node.jsのインストール
    http://nodejs.org/
  2. コマンドプロンプトで下記コマンド実行 (Grunt基本パッケージのインストール)
    npm install -g grunt-cli
  3. WebStormを起動し、プロジェクトフォルダを開く
  4. 画面下の「Terminal」を開き、下記コマンドを打つ
    npm init
  5. ターミナルからの対話を下記のように進める
    name: {プロジェクト名}
    version: (Enterで飛ばす)
    description: (Enterで飛ばす)
    entry point: Gruntfile.js
    test command: (Enterで飛ばす)
    git repository: (Enterで飛ばす)
    keywords: (Enterで飛ばす)
    author: (Enterで飛ばす)
    license: (Enterで飛ばす)
    Is this ok? (EnterでOK)
  6. ターミナルで下記コマンドを打つ (GruntモジュールのDL)
    npm install grunt --save-dev
  7. ターミナルで下記コマンドを打つ (GruntプラグインのDL)
    npm install grunt-contrib --save-dev
  8. プラグインパッケージのインストールはやや長いので待つ
  9. プロジェクトフォルダに下記内容でGruntfile.jsを作成
    module.exports = function(grunt) {
        var pkg = grunt.file.readJSON('package.json');
        grunt.initConfig({
            compass: {
                dist: {
                    options: {
                        config: 'config.rb'
                    }
                }
            },
            cssmin: {
                compress: {
                    files: {
                        './css/*-min.css':['css/*.css']
                    }
                }
            },
            watch: {
                sass: {
                    files: ['sass/*.scss'],
                    tasks: ['compass']
                }
            }
        });
        var taskName;
        for(taskName in pkg.devDependencies) {
            if(taskName.substring(0, 6) == 'grunt-') {
                grunt.loadNpmTasks(taskName);
            }
        }
        grunt.registerTask('default', ['watch']);
    };
  10. プロジェクトフォルダに下記内容でconfig.rbを作成
    http_path = "/"
    css_dir = "css"
    sass_dir = "sass"
    images_dir = "img"
    javascripts_dir = "js"
    output_style = :compressed
    relative_assets = true
    line_comments = false
  11. WebStorm画面下の「Grunt」を開く
  12. 「Gruntfile.js」下の「default」の実行で自動処理の監視が始まる

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません