Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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 servergulp 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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away