Skip to content

Instantly share code, notes, and snippets.

@goldeneggg

goldeneggg/sass_for_mac.md

Last active December 25, 2015 18:39
Show Gist options
  • Save goldeneggg/7021627 to your computer and use it in GitHub Desktop.
Save goldeneggg/7021627 to your computer and use it in GitHub Desktop.
Download ZIP
MacにScss/Less環境構築
Raw
sass_for_mac.md

MacでScss（とかLessとか）

インストール

Sass

% gem install sass
% rbenv rehash
% which sass
% sass -v
Sass 3.2.10 (Media Mark)

Compass

% gem install compass
% rbenv rehash
% which compass
% compass -v
Compass 0.12.2 (Alnilam)
Copyright (c) 2008-2013 Chris Eppstein
Released under the MIT License.
Compass is charityware.
Please make a tax deductable donation for a worthy cause: http://umdf.org/compass

ビルドツール Grunt.js

参考 : Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17

Node.jsのインストール

% which node
/usr/local/bin/node
% node -v
v0.10.18

grunt-cliのインストール

% sudo 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/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
[email protected] /usr/local/lib/node_modules/grunt-cli
├── [email protected]
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected])

% which grunt
/usr/local/bin/grunt
% grunt --version
grunt-cli v0.1.9
grunt v0.4.1

Gruntで管理するプロジェクトのセットアップ

package.jsonの準備
  • package.jsonを生成
% mkdir grunt_test
% cd grunt_test
% 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: (grunt_test)
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (BSD-2-Clause)
About to write to xxxxx

{
  "name": "grunt_test",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}


Is this ok? (yes)
プロジェクト内にGruntをインストール
  • gruntをインストール＆インストール情報をpackage.jsonに追記(--save-dev)
% npm install grunt --save-dev
npm WARN package.json [email protected] No description
npm WARN package.json [email protected] No repository field.
npm WARN package.json [email protected] No README data
npm http GET https://registry.npmjs.org/grunt
npm http 200 https://registry.npmjs.org/grunt
npm http GET https://registry.npmjs.org/grunt/-/grunt-0.4.1.tgz
npm http 200 https://registry.npmjs.org/grunt/-/grunt-0.4.1.tgz
:
:
[email protected] node_modules/grunt
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected])
└── [email protected] ([email protected], [email protected])
Gruntプラグインのインストール
% view package.json

{
  "name": "grunt_test",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-cssmin": "~0.6.1",
    "grunt-contrib-watch": "~0.5.3"
  }
}
  • 一度インストールした node_modules ディレクトリを削除して、package.jsonを使ったインストールでも同じプラグインが正常にインストールされるか試してみる
    • package.jsonのdevDependenciesにプラグインなどの情報が書かれていれば、必要なプラグインを一括でインストールできる
    • 他プロジェクトでの使い回しが楽になる
% rm -fr node_modules
% npm install
[email protected] node_modules/grunt-contrib-cssmin
├── [email protected] ([email protected])
└── [email protected] ([email protected])

[email protected] node_modules/grunt-contrib-watch
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected])

[email protected] node_modules/grunt
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
└── [email protected] ([email protected], [email protected])

%  ls node_modules
grunt                   grunt-contrib-cssmin    grunt-contrib-watch
Gruntfile.js

タスクを実行するためのファイルが、Gruntfile.js。CSSの圧縮タスクを作成して試す

  • 基本形
% vi Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
  
  });
};
  • インストールしたプラグインを読み込む(loadNpmTasks)
module.exports = function(grunt) {
  grunt.initConfig({
  
  });
  
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
};
  • initConfig内にプラグインの設定を追記
module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      compress: {
        files: {
          './min.css': ['css/base.css', 'css/style.css']
        }
      }
    },
    watch: {
      files: ['css/*.css'],
      tasks: ['cssmin']
    }
  });
  
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
};
  • 圧縮元のcssを作成
% mkdir css
% vi css/base.css
:
% vi css/style.css
:
  • cssmin タスクを実行して min.css が生成されるか確認
% grunt cssmin
Running "cssmin:compress" (cssmin) task
File ./min.css created.

Done, without errors.

% vi min.css
(OK)
  • watch タスクを実行して、変更検知したらそのタイミングでcssminタスクが実行されるようにしておく
% grunt watch
Running "watch" task
Waiting...OK

% vi css/base.css
(saveして閉じる)
>> File "css/base.css" changed.

Running "cssmin:compress" (cssmin) task
File ./min.css created.

Done, without errors.
Completed in 0.376s at Thu Sep 12 2013 13:59:18 GMT+0900 (JST) - Waiting...

% vi min.css
(変更されてる)
  • grunt と打つだけで上記2タスクを順番に実行できるようにしておく(registerTask)
% vi Gruntfile.js

grunt.registerTask('default', ['cssmin','watch']);
% grunt
Running "cssmin:compress" (cssmin) task
File ./min.css created.

Running "watch" task
Waiting...
  • package.jsonを使って、gruntプラグインの自動読み込みを設定する
% vi Gruntfile.js

module.exports = function(grunt) {

    var pkg = grunt.file.readJSON('package.json'); // ★★★

    grunt.initConfig({
        cssmin: {
            compress: {
                files: {
                    './min.css': ['css/base.css','css/style.css']
                }
            }
        },
        watch: {
            files: ['css/*.css'],
            tasks: ['cssmin']
        }
    });

    var taskName;
    for (taskName in pkg.devDependencies) {  // ★★★
        if (taskName.substring(0, 6) == 'grunt-') {
            grunt.loadNpmTasks(taskName);  // ★★★
        }
    }

    grunt.registerTask('default', ['cssmin','watch']);
};
% grunt
Running "cssmin:compress" (cssmin) task
File ./min.css created.

Running "watch" task
Waiting...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment