CSS gulp

3分で設定完了。コピペでできるgulpでCompassのコンパイル

gulp
gulpでCompassのコンパイルを、コピペで済ますようになって、最初の設定が3分で済むようになりましたので、いつもやっている手順を紹介します。

2017/10/16 browser-sync追記

gulpやNode.jsのインストールがまだの方は、

ざっくりGulp.js入門(Mac向け) by @kazukichi3110

などを参考にインストールしてください。

(1)gulpをローカル環境にインストール

ターミナルを立ち上げ、gulpをローカル環境にインストール

cdコマンドで、作業のディレクトリに移動し、gulpをローカル環境にインストールします。

npm install --save-dev gulp

(2)package.jsonファイルを作成

npm init

Yes/Noを聞いてきますが、設定が不要ならYes(Enterキー)を教えて進んでかまいません。

(3)gulp-plumberをインストール

sassの記述にエラーがある場合、gulpが停止してしまいます。
記述ミスがあるたびに、gulpが停止してしまうのを防ぐために、「gulp-plumber」をインストールします。

npm install --save-dev gulp-plumber

(4)gulp-compassをインストール

compassを使用するために、「gulp-compass」をインストールします。

npm install --save-dev gulp-compass

(5)browser-syncをインストール

npm install --save-dev browser-sync

(6)gulpfile.jsを作成

「gulpfile.js」を作成します。


var gulp = require('gulp');
var compass = require('gulp-compass');
var plumber = require('gulp-plumber');
var browserSync =require('browser-sync');

// gulp-compass
gulp.task('compass', function() {
  gulp.src('./html/sass/**/*.scss')
  .pipe(plumber())
  .pipe(compass({
      config_file: 'config.rb',
      sass: 'sass',
      css: 'css'
  }));
});

gulp.task('browser-sync', function() {
  browserSync({
    server: {
       baseDir: "./"       //対象ディレクトリ
      ,index  : "index.html"      //インデックスファイル
    }
  });
});

gulp.task('bs-reload', function () {
  browserSync.reload();
});


// 監視する
gulp.task('watch' , ['compass' , 'browser-sync'] , function(){
  gulp.watch('./sass/**/*.scss', ['compass']);
  gulp.watch("./**/*.html", ['bs-reload']);
  gulp.watch("./css/**/*.css", ['bs-reload']);
  gulp.watch("./js/**/*.js", ['bs-reload']);
});

sass: 'sass'が.scssファイル入れているディレクトリで、css: 'css'がcssファイルが書き出されるディレクトリです。
制作環境に合わせて変更してください。

(7)config.rbの準備

「config.rb」が必要ですので、「config.rb」を作成し、適時変更して利用してください。

require 'compass/import-once/activate'
http_path = "/"
css_dir = "./"
sass_dir = "sass"
images_dir = "images/"
javascripts_dir = "js"
cache = false
output_style = :expanded
line_comments = false

(8)gulp watchでコンパイル

ターミナルに「gulp watch」と打ち込めば実行されます。

gulp watch

sassファイルを保存するたびに、cssファイルが書き出されます。

まとめ

私のようなWebデザイナーだと、タスクランナーが便利とわかっていても、設定ファイルがプログラムっぽくて二の足を踏むのですが、使い出すと便利です。
gulpは、ざっくりとしかわからないのですが、必要な時に調べて導入すると便利です。
ちょっとしたことですが、小さなことから効率化できると、複利計算のように大きくスピードアップできます。

参考サイト

-CSS, gulp
-