改めて、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;
}
と背景色が変更されていることが確認できました。
めでたしめでたし^^
〜関連ページ〜
改めて、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の入手から参ります。
- githubのページ「twbs/bootstrap · GitHub」からbootstrapをダウンロードします。
(もちろんgitコマンドでcloneしてもイイですよ^^)
bootstrap-masterフォルダの中にファイルがいっぱい。 - ターミナルで「cd」コマンドを使い、bootstrap-masterフォルダまで移動します。
- 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
を参考に行けるとこまでいってみよう!
〜関連ページ〜
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のインストールも無駄じゃなかったね^^
〜関連ページ〜
Monaca に挑戦!
ではでは、今日から「Monaca」に挑戦してみたいと思います。
以下のチュートリアルを参考にそのまま作業していきます。
初心者のためのクイックチュートリアル - Monacaドキュメント
- [アカウント作成]をクリックして、メールアドレスとパスワードを登録。
- プロジェクトを作成して、メモ帳アプリを作る。
- デバッガーを登録して、自分のスマフォで動作確認。
おおー!楽勝!!
チュートリアル以外にもサンプルや Tipas が用意されているのでとても分かりやすいです。
いままで見てきた中で一番取っ付きやすいですね。
お手軽と申しましょうか・・
とりあえずサンプルとか手当り次第に写経していくといろいろ見えてきそうです。
Yeomanインストール(ついでに) Compass をインストール
Yeomanのインストールには、Node.js と Git は必須で
Compassを使うなら、 Ruby と Compass をインストールしておく必要があるみたいです。
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
無事インストール完了です!
ーーーーーーーーーー
<参考サイト>