omachizura

仕事メモ、役に立ったスキルをまとめています。


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-less

lessをコンパイルするタスクを実装します。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をコンパイルすることができるようになります。