今更ですが、gulpインストールと作業に関して。
less使ってたんですが、コンパイルをずっとatomのエディタで行っていたんですが、一般的にはgulpで実行する方のほうが多いでしょう。
別件でgulpを使うことがあったんで、gulpのインストールと実際のタスクを。
Contents
gulpの紹介とインストール
タスクランナーといわれ、様々な作業を自動化するツールです。様々なjsのライブラリの読み込みやcssやjs等のファイルのコンパイルやビルドなどを行います。
|
1 |
npm install -D gulp |
node_modulesというディレクトリが作られ、その中にgulpのファイルができているのがわかると思います。
タスクの記述と実行
gulpfile.jsというファイルを作成し、ここに作業を記述していきます。
|
1 2 3 4 5 |
var gulp = require('gulp'); gulp.task('default', function() { console.log('テスト表示です'); }); |
実際にコマンドを実行する際は
|
1 |
./node_modules/.bin/gulp |
というコマンドを打てばdefaultの中の作業が実行されます。
|
1 2 3 4 5 6 7 8 9 |
$ ./node_modules/.bin/gulp > css@1.0.0 gulp /var/www/html/css > gulp [12:48:09] Using gulpfile /var/www/html/css/gulpfile.js [12:48:09] Starting 'default'... テスト表示です [12:48:09] Finished 'default' after 124 μs |
まずコマンドが長いので、package.jsonの中に以下の記述を追加します。
|
1 2 3 |
"scripts": { "gulp": "gulp" } |
これで
|
1 |
npm run gulp |
というコマンドで実行できるようになります。
またたとえばlessファイルのコンパイルのタスクは下記のように書きます。
|
1 2 3 4 5 6 7 8 |
var gulp = require('gulp'); var less = require('gulp-less'); gulp.task('less',function(){ return gulp.src(['less/css/top.less']) .pipe(less()) .pipe(gulp.dest('less/css')); }); |
srcという部分は読み込むファイル、pipeというのは作業のつなぎ(チェーンのイメージ)、gulp.destというのはコンパイルするファイルの吐き出し先になります。
上記のように記述した場合、下記コマンドで実行されます。
|
1 |
npm run gulp less |
もっと実践的なgulpのタスクは下記はリンクを参照。
