cre8cre8
AskMe♥

less.jsでCSSを爆速で組むためgulp watchを使う

やぁ、アンチSass派の同士よ!
自称less.jsを普及させたい委員会の委員長たくみです。
less.jsは<script>タグで読み込むだけで、手軽に導入できる反面、
cssに変換して保存するにはsassと一緒でコンパイルが必要になります。

なので、gulpを導入して自動でcssにコンパイルされるようにして爆速開発していきましょう。
当記事はnodejsを導入している前提で解説しています。

gulpと必要なパッケージのインストール

少しの間、黒い画面での作業が続きます。
npm initコマンド実行後はエンターキー連打でOKです。
([Enter]と記述している箇所はエンターキー連打するところです)

shell
1 % mkdir iloveless
2 % cd iloveless
3 % npm init
4This utility will walk you through creating a package.json file.
5It only covers the most common items, and tries to guess sensible defaults.
6
7See `npm help json` for definitive documentation on these fields
8and exactly what they do.
9
10Use `npm install <pkg> --save` afterwards to install a package and
11save it as a dependency in the package.json file.
12
13Press ^C at any time to quit.
14name: (iloveless) [Enter]
15version: (1.0.0) [Enter]
16description: [Enter]
17entry point: (index.js) [Enter]
18test command: [Enter]
19git repository: [Enter]
20keywords: [Enter]
21author: [Enter]
22license: (ISC) [Enter]
23About to write to /Users/nishimura/iwork/iloveless/package.json: [Enter]
24
25{
26  "name": "iloveless",
27  "version": "1.0.0",
28  "description": "",
29  "main": "index.js",
30  "scripts": {
31    "test": "echo \"Error: no test specified\" && exit 1"
32  },
33  "author": "",
34  "license": "ISC"
35}
36
37
38Is this ok? (yes) [Enter]
39
40 % npm install -g gulp
41 % npm install --save-dev gulp gulp-less

上記でgulpとless.jsをコンパイルするための必要なパッケージのインストールは完了です。

gulpの設定ファイルを作成

ここからgulpfile.jsにJavaScriptを記述するので少し難しくなります。
ですが、ぶっちゃけコピペでOKですので、コピペしてください。

gulpfile.js
1var gulp = require('gulp');
2var less = require('gulp-less');
3
4gulp.task('less', function() {
5    return gulp.src('./*.less')
6               .pipe(less())
7               .pipe(gulp.dest('./'));
8});
9
10gulp.task('watch', function() {
11    return gulp.watch('./*.less', ['less']);
12});

1行目と2行目でgulpとlessをコンパイルするためのgulp-lessというプログラムを読み込んでます。
gulp.task('less',...と記述している箇所でlessをcssにコンパイルする処理を記述しています。
最後に自動でcssにコンパイルするため、gulp.task('watch',...に、コンパイル対象のlessファイルと実行するタスクを記述しています。

lessをcssにコンパイルする

それではlessをcssにコンパイルしてみましょう。
今回はサンプルに下記のlessを用意します。

style.less
1html,body {
2  background: black;
3}

まずは手動でlessをcssに変換する方法です。

shell
1 % gulp less

そして自動でlessファイルを保存するたびにcssに変換する方法です。

shell
1 % gulp watch
gulp watchを実行した後に、style.lessを下記のように編集して保存してみてください。

style.less
1html,body {
2  background: black;
3  p {
4    color: #f00;
5  }
6}

ターミナルになにやら怪しい文字がたくさん表示されましたね(笑)
そして、style.cssを見てみましょう。
先ほど追加したlessがcssにコンパイルされて保存されています。

あとはこのCSSを煮るなり焼くなり好きにしてください!
いかがでしたでしょうか??
gulp watchを使えば今までより格段にCSSの開発スピードが上がるので、
ぜひぜひチャレンジしてみてくださいね。

≪ 前の記事
さっくりとgemを公開してみる
次の記事 ≫
高さが決まっていなくてもCSS3で中央寄せする方法

いいねやコメントを送っていただけると中の人がしっぽ振って大喜びします♪

あなたへのおすすめの記事