gulp|gulpの基本的な使い方
gulpというツールを利用すれば、less,sassのコンパイルやファイルコピーなどが簡単にできるようになります。
gulpを利用するにはnode jsをパソコンにインストールする必要があります。今回はnode jsがインストールされている前提で進めいていきます。
まずは、コマンドラインでgulpをインストールします。
$ npm install --save-dev gulp次にgulpfile.jsというファイルを用意します。このファイルにいろいろな命令をjavascriptで記載していきます。
例えば、test.txtというファイルをcopyというフォルダにコピーするには、gulpfile.jsを下記のように実装します。
var gulp = require('gulp');
gulp.task('copy', function(){
gulp.src('test.txt')
.pipe(gulp.dest('copy'));
});gulpはいろんな命令をタスク単位で管理・実行します。srcで対象のファイルを指定し、dest出力先のフォルダを指定しています。個々の処理はpipeでチェーンしていきます。
gulpのtaskはコマンドラインで実行します。gulpfile.jsのパスまで移動し。gulp タスク名という形でタスクを実行します。
上記の例ではファイルをコピーするだけでしたが、次はlessをコンパイルするタスクを実装します。
まず、gulp-lessをインストールします。
$ npm install --save-dev gulp-lesslessをコンパイルするタスクを実装します。srcからdestに出力する処理の間に、lessというコマンドを指定することにより、srcで指定したlessファイルをコンパイルしdestフォルダにcssファイルとして出力することができます。
var gulp = require('gulp');
var less = require('gulp-less'); //gulp-lessを参照します
gulp.task('less', function(){
gulp.src('test.less')
.pipe(less())
.pipe(gulp.dest('dst'));
});タスクを一度実装しておけば、あとはコマンドラインでgulp lessとすれば、lessをコンパイルすることができるようになります。