gulp, less初心者が簡単に動かせるようになるまで

gulpもlessも初心者の自分が動かせるようになるまで。
（gulpじゃなくて、有料のcodekitっていうのがもっと簡単。アプリをインストールしてドラッグするだけ）

lessってなに

コードの書き方がcssより良いらしい。

CSSをシンプルに書くことができるLESS使ってみた によると、
・子のスタイルを書くときが楽
・変数使える（@window-width: 1000px とかで）
・関数使える(doubleWidth(20px) とかで20pxを2倍にする関数つくったり)
・計算ができる(@window-width + doubleWidth(20px)とか。1040px になるのかな？)

「子のスタイルを書くときが楽」というのは、

.parent .child {
  color: red;
}
.parent .child a {
  color: white;
}

が

.parent {
  .child {
    color: red;
    a {
      color: white;
    }
  }
}

で書けるということ。確かに書いてて楽。

ただ、lessを書いただけじゃブラウザは認識してくれないとのこと。
「lessの変更が反映されない！！」って悩んでる人はいないでしょう・・・。

gulpに頼る

ブラウザが認識できるcssに、lessをコンパイルしてくれるのがgulp。（他にもある）

導入方法は遅すぎたgulp実践導入 (Mac編) で丁寧に書かれてます。
（ありがとうございます！）

lessをcssにコンパイルさせるためだけにgulpを使ったので、僕のgulpfile.jsはこんな感じ。

// gulp本体のパッケージ及びタスクで使用するパッケージの呼び出し
var gulp = require("gulp"),
    less = require('gulp-less'),
    server = require('gulp-webserver');

// gulpで処理を行うファイルのパス情報
var paths = {
    less: './less/test.less',
    css_build: './css'
};

// lessコンパイル
gulp.task('less', function() {
    gulp.src(paths.less)
        .pipe(less())
        .pipe(gulp.dest(paths.css_build));
});

// Webサーバー
gulp.task('server', function() {
    gulp.src('./') // サーバのルートパス
        .pipe(server({
            livereload: true, // ライブリロード有効化
            open: true // serverタスク実行時、ルートに指定した階層をブラウザで立ち上げる
        }));
});

gulp.task('default', ['server'], function(){
    gulp.watch(paths.less,['less']);
});

gulp lessとコマンドで打てば、test.lessがコンパイルされてcssディレクトリにtest.cssが作成されます。

gulp.dest()で指定したディレクトリがなくても、勝手にmkdirしてくれて、cssファイルを出力してくれる。

すべてのlessをcssに一括でしたかったら、遅すぎたgulp実践導入 (Mac編) にあるように、

var paths = {
    less: 'less',
    ...
};

gulp.task('less', function() {
    gulp.src(paths.less+'/*.less')
    ...
});

にしたらできるのです。

gulp serverとコマンドを打てば、webサーバーが立ち上がり、http://localhost:8000 でサイトが見れるようになります。

gulp serverとgulp lessを一緒にやりたい場合は、

gulp.task('default', ['server'], function(){
    gulp.watch(paths.less,['less']);
});

と記述してあるので、gulpとコマンドを打てばOK!!!

ゴール

最終的に、ターミナルで、gulp!!!と打ってみて、このように出力されれば成功。

$ gulp
[05:01:32] Using gulpfile /usr/local/var/www/htdocs/test_project/gulpfile.js
[05:01:32] Starting 'server'...
[05:01:32] Webserver started at http://localhost:8000
[05:01:32] Finished 'server' after 16 ms
[05:01:32] Starting 'default'...
[05:01:32] Finished 'default' after 11 ms
[05:01:36] Starting 'less'...
[05:01:36] Finished 'less' after 9.38 ms