改めて、GruntでLESSをコンパイルしてBootstrapをカスタマイズ

Gruntのことを少しだけ理解できたところで、改めてGithubからダウンロードしてきたフォルダの中身を見てみると、「package.json」も「Gruntfile.js」も用意されていました!!

 

それでは、bootstrap-master(作業フォルダ)に移動して、$ npm install をコマンド。

先ほどとは比べ物にならないくらいたくさんのファイルがインストールされています。

そして、たくさんのエラーが・・・><

大丈夫なのかな??

$ grunt watch

とすれば、見事

$ grunt watch

>> Local Npm module "grunt-contrib-connect" not found. Is it installed?
>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?
>> Local Npm module "grunt-csscomb" not found. Is it installed?
>> Local Npm module "grunt-html-validation" not found. Is it installed?
>> Local Npm module "grunt-jscs-checker" not found. Is it installed?
>> Local Npm module "grunt-saucelabs" not found. Is it installed?

Running "watch" task
Waiting...

 Waiting...とはなっています。(なんかいろいろ足りないと言っているようですが。)

 

「variables.less」の30行目付近

@body-bg:               #fff;

@body-bg:               #cff;

に変更してみると、

>> File "less/variables.less" changed.

>> Local Npm module "grunt-contrib-connect" not found. Is it installed?
>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?
>> Local Npm module "grunt-csscomb" not found. Is it installed?
>> Local Npm module "grunt-html-validation" not found. Is it installed?
>> Local Npm module "grunt-jscs-checker" not found. Is it installed?
>> Local Npm module "grunt-saucelabs" not found. Is it installed?

Running "less:compile" (less) task
File dist/css/bootstrap.css created.
File dist/css/bootstrap-theme.css created.

Running "less:minify" (less) task
File dist/css/bootstrap.min.css created.
Original: 122759 bytes.
Minified: 100636 bytes.
File dist/css/bootstrap-theme.min.css created.
Original: 14438 bytes.
Minified: 13015 bytes.

Done, without errors.
Completed in 4.923s at Thu Dec 12 2013 21:03:23 GMT+0900 (JST) - Waiting...
OK
>> File "less/variables.less" changed.

>> Local Npm module "grunt-contrib-connect" not found. Is it installed?
>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?
>> Local Npm module "grunt-csscomb" not found. Is it installed?
>> Local Npm module "grunt-html-validation" not found. Is it installed?
>> Local Npm module "grunt-jscs-checker" not found. Is it installed?
>> Local Npm module "grunt-saucelabs" not found. Is it installed?

Running "less:compile" (less) task
File dist/css/bootstrap.css created.
File dist/css/bootstrap-theme.css created.

Running "less:minify" (less) task
File dist/css/bootstrap.min.css created.
Original: 122759 bytes.
Minified: 100636 bytes.
File dist/css/bootstrap-theme.min.css created.
Original: 14438 bytes.
Minified: 13015 bytes.

Done, without errors.
Completed in 4.460s at Thu Dec 12 2013 21:03:41 GMT+0900 (JST) - Waiting...

 となり、bootstrap.cssの257行目付近

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ccffff;
}

と背景色が変更されていることが確認できました。

 

めでたしめでたし^^

 

 〜関連ページ〜

  1. Bootstrapでスマフォサイト制作 - 女心と秋の空。気の向くままに。。
  2. GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。
  3. 改めて、GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。
  4. 〜まとめ〜 GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。

改めて、Grunt.jsをインストール

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

を参考に、Grunt.jsをインストールしてみたいと思います。

 

今の私の状況は、Node.jsとgrunt-cliのインストールは出来ていますので、下準備が整った状態となるようです。

 

「Grunt.jsを使ってみる」の項からスタートです。

Grunt.js v0.4にはまず基本となるファイル、package.json と Gruntfile.js(Gruntfile.coffee)が必要になります。

 で、それは各プロジェクトごとに必要なのかな?

 

とりあえず、「testProject」という作業フォルダを作って、ターミナルで作業フォルダまで移動します。$ npm init とコマンドします。

$ 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: (testProject) testProject
version: (0.0.0) 0.0.0
description: test
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (BSD-2-Clause)
About to write to /Users/testProject/package.json:

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


Is this ok? (yes)  yes

こんな感じです。

 対話形式で質問されるのですが、「entry point: (index.js) 」から何を答えればいいのか分からなくなって、とりあえずenterキーを押していきました。

最後は「yes」で。

すると、作業フォルダに「package.json」が出来ていました!

 

次に、

$ npm install grunt --save-dev

 で、gruntをインストールします。

・・・・なんか、npmでいっぱいインストールされたっぽいです。

作業フォルダを覗いてみると

testProject
├node_modules
│└grunt(この中に数えきれないくらいたくさんのファイルとフォルダが・・)
└package.json

こんなんでいいのか?不安に駆られながら、、とりあえず進もう!

 

以下の2つをインストールします。

ファイルが更新された自動感知して処理を実行する grunt-contrib-watch
cssファイルの改行やコメントを削除してファイルサイズを少なくする grunt-contrib-cssmin

$ npm install grunt-contrib-watch grunt-contrib-cssmin --save-dev

これまた、たくさんインストールされました。

 

で、作業フォルダを覗いてみると、、ほうほう

testProject
├node_modules
│├grunt(この中に数えきれないくらいたくさんのファイルとフォルダが・・)
│├grunt-contrib-cssmin(この中に数えきれないくらいたくさんのファイルとフォルダが・・)
│└grunt-contrib-watch(この中に数えきれないくらいたくさんのファイルとフォルダが・・)
└package.json

となっています。

なるほど!

で、この「node_modulesフォルダ」を削除しても、「package.json」があれば、$ npm installで同じ環境をインストールすることができる!というすぐれものらしい。

もちろん、新しいプロジェクトを作成する時は、この「package.json」を作業フォルダにコピーして、$ npm installで準備完了ってわけですね。すばらしい!

 

お次は「Gruntfile.js」。

作業フォルダに「Gruntfile.js」ファイルを作成して、

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');grunt.registerTask('default', ['cssmin', 'watch']);
};

と入力。

これでいいのかな??

 

作業フォルダで、$ gruntをコマンドしてみたら

$ grunt
Running "cssmin:compress" (cssmin) task
>> Destination not written because minified CSS was empty.

Running "watch" task
Waiting...

となってます!

Running "watch" task
Waiting...

ってことは成功ですよね?

GruntでLESSをコンパイルしてBootstrapをカスタマイズ

Bootstrap3 LESSのカスタマイズ -環境設定編 | ajike switch

を参考に作業を進めてみます。

 

以前のYeomanインストールでGruntの環境は出来上がっているので、bootstrapの入手から参ります。

  1. githubのページ「twbs/bootstrap · GitHub」からbootstrapをダウンロードします。
    (もちろんgitコマンドでcloneしてもイイですよ^^)
    bootstrap-masterフォルダの中にファイルがいっぱい。
  2. ターミナルで「cd」コマンドを使い、bootstrap-masterフォルダまで移動します。
  3. Grunt実行のコマンド入力します。
    $ grunt watch
    を入力するだけで、Gruntの監視がはじまります。

 のはずだったのですが・・・結果は

$ grunt watch
grunt-cli: The grunt command line interface. (v0.1.11)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

 grontが見付からないよってことかな?

http://gruntjs.com/getting-started

をみても、なんとなくしか分からない...orz

 

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

を参考に行けるとこまでいってみよう!

 

 〜関連ページ〜

  1. Bootstrapでスマフォサイト制作 - 女心と秋の空。気の向くままに。。
  2. GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。
  3. 改めて、GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。
  4. 〜まとめ〜 GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。

Bootstrapでスマフォサイト制作

のんびり悠長に構えていると、スマフォサイトのコーディング依頼が舞い込みそうな雰囲気に。

慌ててスマフォサイトの作り方を勉強してます(汗)

 

とりあえず、Bootstrapでコーディングさせていただけるようにお願いはしているのですが。。

Bootstrap3になってから全くもって触ったことが無く・・それ以前にBootstrap2の使い方も怪しい状態です(泣)

 

とにもかくにも、Bootstrapをカスタマイズして利用するためには、LESSを利用する必要があります。

そこでまずは、LESSコンパイラ探し・・・・・。

もちろん無料で・・・・・。

 

Prepros」が良さそう!

と思いきや、macOSX10.8+ ですと。orz
当方、macOSX10.6なのです><。

 

見付けました!「Koala

日本語化もされているそうです。

Sass,LESSビルドツールKoalaが1.4でわりと進化。日本語対応。 | Sou-Lablog

を参考に。

 ・・・・・Koala2.0をダウンロードしてきましたが、エラーが出て起動できず;;

 

 

ここにきて、Gruntの登場か?!

Bootstrap3 LESSのカスタマイズ -環境設定編 | ajike switch

実はGruntでLESSが簡単にコンパイルできるらしい。

Yeomanのインストールも無駄じゃなかったね^^

 

 〜関連ページ〜

  1. Bootstrapでスマフォサイト制作 - 女心と秋の空。気の向くままに。。
  2. GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。
  3. 改めて、GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。
  4. 〜まとめ〜 GruntでLESSをコンパイルしてBootstrapをカスタマイズ - 女心と秋の空。気の向くままに。。

Monaca に挑戦!

ではでは、今日から「Monaca」に挑戦してみたいと思います。

 

以下のチュートリアルを参考にそのまま作業していきます。

初心者のためのクイックチュートリアル - Monacaドキュメント

  1. [アカウント作成]をクリックして、メールアドレスとパスワードを登録。
  2. プロジェクトを作成して、メモ帳アプリを作る。
  3. デバッガーを登録して、自分のスマフォで動作確認。

おおー!楽勝!!

 

チュートリアル以外にもサンプルや Tipas が用意されているのでとても分かりやすいです。

 

いままで見てきた中で一番取っ付きやすいですね。

お手軽と申しましょうか・・

とりあえずサンプルとか手当り次第に写経していくといろいろ見えてきそうです。

Yeomanはwebアプリのフレームワーク?

Yeomanは「webアプリのフレームワーク」みたいですが私の中では???だったのです。

ま、とりあえずインストールしてみて触ってみたら何か分かるかな?なんて軽い気持ちでここまでインストールしてみたのですが。。

 

インストールしながらいろいろ検索とかしてみて感じたことは、

Yeomanはコマンドでwebアプリに必要なファイルが自動生成されたり、面倒な作業を自動化してくれる便利なツール!

といった感じなのでしょうか?

 

なんだかとってもハイレベルな世界のお話・・・なのでは?

まだまだ勉強不足です。

 

 

つぎは、「Monaca」を試してみようかしら?

Yeomanインストール(ついでに) Compass をインストール

Yeomanのインストールには、Node.jsGit は必須で
Compassを使うなら、 RubyCompass をインストールしておく必要があるみたいです。

 

CompassとはSassを元に開発したフレームワーク。。みたいで、使ったことはないのですがあると便利そうなのでついでに入れておきましょう。

 

私のPCはmacなので、Rubyは予めインストールされています。

よってRubyのインストールは省略!

 

Install the Compass Stylesheet Authoring Framework | Compass Documentation

を参考にCompassをインストールします。

$ sudo gem update --system
Password:
Updating RubyGems
Updating rubygems-update
Successfully installed rubygems-update-2.1.11
Updating RubyGems to 2.1.11
Installing RubyGems 2.1.11
RubyGems 2.1.11 installed
・・・・・

とまぁたくさんいろいろとupdateされてます。

つづいて

$ sudo gem install compass
Fetching: sass-3.2.12.gem (100%)
Successfully installed sass-3.2.12
Fetching: chunky_png-1.2.9.gem (100%)
Successfully installed chunky_png-1.2.9
Fetching: fssm-0.2.10.gem (100%)
Successfully installed fssm-0.2.10
Fetching: compass-0.12.2.gem (100%)
Successfully installed compass-0.12.2
Installing ri documentation for chunky_png-1.2.9
・・・・・

こちらもたくさんインストールされました。

気長に待ちましょう^^

 

インストールできたか確認。

$ 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

 

無事インストール完了です!

 

ーーーーーーーーーー

<参考サイト>