はじめに
こんにちは!
テンダ仙台支店webデザイナーのYHです。
前回はGulpのインストールまで行ったので、今回はプラグインのインストールと設定ファイルの作成を見ていきましょう。
引き続き、実際に使用するまでのお話です。
設定ファイルの作成
Gulpに自動化したい仕事(タスク)を任せるために設定ファイルを作成します。
gulpfile.jsと名前でファイルをappフォルダ内に作ります。
まずは一文書きましょう。
1 |
var gulp = require('gulp'); |
とりあえずGulpを使用できるようになりました。
プラグインのインストール
設定ファイルを書く前に、自動化したい処理を行うプラグインをインストールします。
今回はsassコンパイルを行ってみましょう。
例としてディレクトリを以下のようにします。
sassコンパイルには以下のプラグインをインストールします。
1 |
npm install --save-dev gulp-sass |
設定ファイルへの追記
インストールが完了したら、gulpfile.jsへ追記を行いましょう。
1 2 3 4 5 6 7 8 9 10 |
var gulp = require("gulp"); var sass = require('gulp-sass'); //sass gulp.task("sass", function () { gulp.src( 'dev/scss/*.scss' ) .pipe(gulp.dest('pub/css')); }); |
2行目はプラグインの呼び出し、5~10行目が自動化の指示(タスク)にあたります。
9行目でpub配下のcssフォルダへコンパイルしたcssを出力するように設定しています。
8行目のアスタリスクによるファイル指定は、scssフォルダ配下にあるscss全て指定するという意味です。
これでコンパイルを行う準備ができました。
実際にコンパイルしてみる
作成したら、コマンドプロンプトへ[gulp タスク名]を入力します。
1 |
gulp sass |
これでsassをコンパイルするタスクが実行されます。
他の記事
第1回「web制作が便利に!Gulpを知った気になれる記事」
第4回「Gulpを導入してみよう!その2」