gulp 初期構築メモ

gulpでsassを使うまで

前提条件

nodeJSが使えること。

gulp

gulpのインストール

npm i gulp -g
# iはinstallのエイリアス

package.jsonを作る

npm init

sass

sassのファイルを作る

mkdir sass && touch sass/style.scss

/*style.scss*/
h1 {
  color: red;
  &:hover {
    font-size: large;
  }
}

sassのライブラリをインストール

npm i -D gulp-sass
# -Dは--save-devのエイリアス

gulpfile.jsを作る

srcに対象ファイルでpipeで処理を繋げていきます。

touch gulpfile.js

// gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', sassFunc);

function sassFunc() {
    gulp.src('sass/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
}

実行

sassというタスク名で登録してあるので以下のように実行

gulp sass

css/style.cssが作成されます

/* style.css */
h1 {
  color: red; }
  h1:hover {
    font-size: large; }

自動化

タスクの追加

このままだと毎回手打ちとかめんどくさいのでファイルの監視を入れます
watchに監視対象ファイル、タスク名を渡すだけですね。これは簡単。

// gulpfile.js
gulp.task('default', defaultFunc);

function defaultFunc() {
    gulp.watch(['sass/**/*.scss'],['sass']);
}

実行

defaultタスクに入れたのでそのまま実行

gulp

あとは自動検知して勝手にsassタスクをおこなってくれます。