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

  • Select an option

    Learn more about clone URLs
  • Save goldeneggg/7021627 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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
grunt-cli@0.1.9 /usr/local/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)

% 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 grunt_test@0.0.0 No description
npm WARN package.json grunt_test@0.0.0 No repository field.
npm WARN package.json grunt_test@0.0.0 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
:
:
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)
Gruntプラグインのインストール

  • grunt-contribプラグイン（のいくつかを試しに）入れる

    • grunt-contrib-watch
    • grunt-contrib-cssmin
    % npm install grunt-contrib-watch grunt-contrib-cssmin --save-dev

grunt-contrib-cssmin@0.6.1 node_modules/grunt-contrib-cssmin
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
└── clean-css@1.0.12 (commander@1.3.2)

grunt-contrib-watch@0.5.3 node_modules/grunt-contrib-watch
├── gaze@0.4.1 (globule@0.1.0)
└── tiny-lr@0.0.4 (debug@0.7.2, faye-websocket@0.4.4, qs@0.5.6, noptify@0.0.3)

% 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
grunt-contrib-cssmin@0.6.1 node_modules/grunt-contrib-cssmin
├── grunt-lib-contrib@0.6.1 (zlib-browserify@0.0.1)
└── clean-css@1.0.12 (commander@1.3.2)

grunt-contrib-watch@0.5.3 node_modules/grunt-contrib-watch
├── tiny-lr@0.0.4 (debug@0.7.2, faye-websocket@0.4.4, qs@0.5.6, noptify@0.0.3)
└── gaze@0.4.1 (globule@0.1.0)

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)
├── rimraf@2.0.3 (graceful-fs@1.1.14)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── minimatch@0.2.12 (sigmund@1.0.0, lru-cache@2.3.1)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

%  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