マーズナレッジ主催、OSSカフェマスターの河村さんによるgulpの勉強会、「Gulp.jsで飼いならす、最新フロントエンドツールの使い方」に参加してきました！

現在、Webの制作界隈にはエンジニア方面からデザイナー方面に向かって猛スピードでやってくる自動化の波。
GruntだったりYOMANだったり、タスクランナーとプラグインによって、自動化できるものを自動化することでワークフローも改善できるよね。

といったところで、河村さんの制作環境を中心に、gulpを紹介していただきました。

 

gulpを全力で使うと、後ろから見ている人には魔法に見える

本当にすごい。使っている他のアプリケーションによる効果も大きいのですが、エディタでいじっていると保存するそばからブラウザでの表示が変わっていく。デザインに使っているグラフィックソフトでファイルを保存するとスライスも切り直さずに表示が変わっている・・・。

これは実際デモを見ないと感覚としてわからないかもしれません。

自分が使うより、バリバリ使っている人のデモの方がインパクトありますね。。。

実際に見ていると、これは使いたい魔法だなあと思うに価するパワフルなツールです。

 

あらゆるツールを自動化する

デザイナー向きのツール

PhotoshopなりIllustratorであがってきたカンプを、寸分たがわず数日から数週間かけてコーディングをする。

コーディングをしてみると、動きの問題などで気持ち悪いところが出てくる。

それに対して修正を行うため、カンプのデータを開いて画像を編集。その後再度スライスを切る。

切り直したスライスにあわせて、cssやjs、場合によってはHTMLそのものに調整を加える。

自動化をすることによって、このあたりをかなりショートカットすることができる。

ライブ感を持って作業を行うことにより、デザインのPDCAサイクルがかなり早くなる。

特に、ブラウザ上でのサイクルを早めることは、最終的な成果物のフォーマットの中で調整をガンガンかけられる。

それによって、ブラウザ上でプレビューしながら編集するフェーズでの手数が飛躍的に向上するよね。というのはまさにデザイナーとフロントエンドの人にとって最高のツールなのです。

小さな作業を自動化することでアドバンテージを稼ぐ

たとえばブラウザをリロードすること。コンマ数秒。

retina用の画像を書き出すこと。数十秒〜数分。

頻度の高い作業を自動化することによる、時間と精神的なアドバンテージは、凄く大きいと思います。

メンテナンスしやすいファイル構成で開発できる

cssで禁忌とされる@importを自動で結合してくれるプラグインや、jsを結合してくれるプラグインなどがあるので、公開サーバにアップロードするためのディレクトリを触らずに、編集用ディレクトリを作業するだけで見通しを良くしつつ、問題ない形で公開用ファイルの作成まで全てが自動で完結できるんじゃないでしょうか。

 

実は僕、以前gulpは心が折れていたのです

実は以前使っていたのです。

使いたかったライブリロードが結構な頻度でエラーメッセージもなくブラウザを落としてくるという事態に折れてしまった経緯があります。

当時使っていたものとは別のプラグインなども出ているので、また試してみよう！と思う次第であります！

と、いうわけで勉強会以降育てているgulpfileを晒しておきます。動かなかったらすみません！

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync');
var compass = require('gulp-compass');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var uglify = require('gulp-uglify');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
// var sketch = require("gulp-sketch");

// BrowserSync
gulp.task('browser-sync', function(){
  browserSync.init(null,{
    server : {
      baseDir : './dist'
    }
  });
});

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

// html
gulp.task('html', function(){
  gulp.src('./src/**/*.html')
    .pipe(plumber())
    .pipe(gulp.dest('./dist/'))
    .pipe(browserSync.reload({stream:true, once:true}));
});

// imagemin
gulp.task('images', function(){
  var imageminOptions = {
    optimizationLevel: 7,
    progressive: true,
    interlaced: true
  }
  gulp.src('./src/assets/images/**/*.+(jpg|jpeg|png|gif)')
    .pipe(plumber())
    .pipe(imagemin(imageminOptions))
    .pipe(gulp.dest('./dist/assets/images/'))
    .pipe(browserSync.reload({stream:true, once:true}));
});

// coffeescripts
gulp.task('coffeescripts', function(){
  gulp.src('./src/assets/coffeescripts/**/*.coffee')
    .pipe(plumber())
    .pipe(coffee())
    .pipe(concat('main.min.js'))
    .pipe(gulp.dest('./dist/assets/javascripts/'))
    .pipe(browserSync.reload({stream:true, once:true}));
});

// compass
gulp.task('sass', function(){
  var sassOptions = {
    config_file: 'config.rb',
    comments: false,
    css: './dist/assets/stylesheets',
    sass: './src/assets/sass'
  }
  gulp.src('./src/assets/sass/**/*.scss')
    .pipe(plumber())
    .pipe(compass(sassOptions))
    .pipe(gulp.dest('./dist/assets/stylesheets/'))
    .pipe(browserSync.reload({stream:true, once:true}));
});

// Default task
gulp.task('default', ['browser-sync'], function(){
  gulp.watch('./src/assets/sass/**/*.scss', ['sass']);
  gulp.watch('./src/assets/images/**/*.+(jpg|jpeg|png|gif)', ['images']);
  gulp.watch('./src/assets/coffeescripts/**/*.coffee', ['coffeescripts']);
  gulp.watch('./src/**/*.html', ['html']);
});

ある程度できたら河村さんのstrawを使って、環境をもっといい感じに作れるようにしようかな！