Skip to content

開発環境構築

konifar edited this page Nov 6, 2013 · 4 revisions

gruntの導入

1. Gruntのインストール

npmのインストールが必須なので、インストールしていない場合は[こちら](http://www.masaplabs.com/grunt-v0-4-0-install/)を参考にインストールしてください。 npm install -g grunt-cliでインストールできますが、古いgruntがインストールしてある場合(/usr/local/lib/node_modules/gruntフォルダがある場合)はnpm uninstall -g gruntでアンインストールしてください。

Konifar-MacBookAir:padule konifar$ npm install -g grunt-cli
npm http GET https://registry.npmjs.org/grunt-cli
・・・
npm http 200 https://registry.npmjs.org/lru-cache/-/lru-cache-2.3.1.tgz
/usr/local/share/npm/bin/grunt -> /usr/local/share/npm/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.10 /usr/local/share/npm/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.4)
└── findup-sync@0.1.2 (lodash@1.0.1, glob@3.1.21)

2. package.json ファイルの作成

npm initコマンドで対話式に答えていくと作成できます。

Konifar-MacBookAir:padule konifar$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (padule) 
version: (0.0.0) 1.0.0
description: padule
entry point: (Gruntfile.js) 
test command: grunt watch
git repository: (git://github.com/padule/padule.git) 
keywords: padule
author: konifar
license: (BSD-2-Clause) 
About to write to /Applications/MAMP/htdocs/padule/package.json:

{
  "name": "padule",
  "version": "1.0.0",
  "description": "padule",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "grunt watch"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/padule/padule.git"
  },
  "keywords": [
    "padule"
  ],
  "author": "konifar",
  "license": "BSD-2-Clause",
  "bugs": {
    "url": "https://github.com/padule/padule/issues"
  }
}


Is this ok? (yes) yes

3. 必要なパッケージのインストール

gruntでJSを自動ビルドするのに必要なパッケージをインストールします。

Konifar-MacBookAir:padule konifar$ sudo npm install grunt --save-dev
Password:
npm http GET https://registry.npmjs.org/grunt
・・・
npm http 200 https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz
grunt@0.4.1 node_modules/grunt
├── which@1.0.5
├── dateformat@1.0.2-1.2.3
├── eventemitter2@0.4.13
├── colors@0.6.2
├── hooker@0.2.3
├── async@0.1.22
├── lodash@0.9.2
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── findup-sync@0.1.2 (lodash@1.0.1)
├── iconv-lite@0.2.11
├── nopt@1.0.10 (abbrev@1.0.4)
├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.1)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── rimraf@2.0.3 (graceful-fs@1.1.14)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)
Konifar-MacBookAir:padule konifar$ sudo npm install grunt-contrib-watch --save-dev
npm http GET https://registry.npmjs.org/grunt-contrib-watch
・・・
npm http 304 https://registry.npmjs.org/abbrev
grunt-contrib-watch@0.5.3 node_modules/grunt-contrib-watch
├── gaze@0.4.3 (globule@0.1.0)
└── tiny-lr@0.0.4 (debug@0.7.3, faye-websocket@0.4.4, qs@0.5.6, noptify@0.0.3)
Konifar-MacBookAir:padule konifar$ sudo npm install grunt-contrib-coffee --save-dev
npm http GET https://registry.npmjs.org/grunt-contrib-coffee
・・・
npm http 200 https://registry.npmjs.org/coffee-script/-/coffee-script-1.6.3.tgz
grunt-contrib-coffee@0.7.0 node_modules/grunt-contrib-coffee
└── coffee-script@1.6.3

4. Gruntfile.jsの作成

Konifar-MacBookAir:padule konifar$ vim Gruntfile.js 

module.exports = function(grunt){
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            files: ['coffee/**/*.coffee'],
            tasks: 'coffee'
        },
        coffee: {
            compile: {
                files: [
                    {
                        expand: true,
                        cwd: 'coffee/',
                        src: ['**/*.coffee'],
                        dest: 'Resources/',
                        ext: '.js'
                    }
                ]
            },
        }
    });
     
    grunt.loadNpmTasks('grunt-contrib-coffee');
    grunt.loadNpmTasks('grunt-contrib-watch');
     
    grunt.registerTask('default', ['watch']); 
}

5. .bashrcまたは.bash_profileにPATHを通す

gruntコマンドを使うためにPATHを通します。

Konifar-MacBookAir:padule konifar$ vim ~/.bashrc 


PATH=PATH=/usr/local/share/npm/lib/node_modules/grunt-cli/bin:$PATH

6. sassのコンパイル

Konifar-MacBookAir:padule konifar$ npm install grunt-sass --save-dev
npm http GET https://registry.npmjs.org/grunt-sass
・・・
npm http 304 https://registry.npmjs.org/lru-cache

> node-sass@0.7.0 install /Applications/MAMP/htdocs/padule/node_modules/grunt-sass/node_modules/node-sass
> node build.js

`darwin-x64-v8-3.14` exists; testing


  16 passing (30ms)

Binary is fine; exiting
grunt-sass@0.8.0 node_modules/grunt-sass
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
└── node-sass@0.7.0 (node-watch@0.3.4, colors@0.6.0-1, mkdirp@0.3.5, optimist@0.6.0, mocha@1.13.0)
Konifar-MacBookAir:padule konifar$ npm install grunt-compass --save-dev
npm http GET https://registry.npmjs.org/grunt-compass
・・・
npm http 200 https://registry.npmjs.org/grunt-compass/-/grunt-compass-0.3.9.tgz
grunt-compass@0.3.9 node_modules/grunt-compass

[参考]

PhpStormとGrunt.jsで作るCakePHP快適開発環境

GruntでCoffeeScriptを自動コンパイルするコピペ

『GRUNT』でプリプロセッサの自動化

Clone this wiki locally
You can’t perform that action at this time.