gulp + babel + browserify + scssで、ちょっとモダンなフロントエンドの練習をした

現在、熱血高校吹奏楽部のWebをリニューアルしているので、せっかくだからモダンなフロントエンドが書きたいと思ってやってみた。

Webのちょっとしたアニメーションなので、サクッとできるかなと思ったけど、やっぱりいつもと違うと慣れなくて、けっこう戸惑った。 慣れなかった主な点は以下。

• gulpのセッティング

• ES2015のimport記法

• ES2015のクラス記法

gulpのセッティング

webpackにしなかったのは、なんとなくで出来るようにはなりたくなかったから。 雑だけど、以下のような感じ。

"use strict";

const gulp = require('gulp');

// コンパイルエラーでgulpが落ちないようにするやつ
// http://blog.webcreativepark.net/2014/05/14-112523.html
const plumber = require('gulp-plumber');

const sass = require('gulp-sass');

// レスポンシブのCSSがラクに書けるようになるやつ 
// http://qiita.com/kyaido/items/828906ffa7198e99d0b7
const combineMq = require('gulp-combine-mq');

// *.jsって書き方ができるようになるやつ
// http://qiita.com/tonkotsuboy_com/items/67d9fd4d054a45af9f34
const sassGlob = require("gulp-sass-glob");

// babel
const babelify = require('babelify');

// browserify
const browserify = require('browserify');
const source = require('vinyl-source-stream');

// ESLintがこけたらデスクトップ通知を出してくれるやつ
const notify = require('gulp-notify');

const eslint = require('gulp-eslint');


gulp.task('sass', function() {
  gulp.src('src/scss/style.scss')
  .pipe(sassGlob())
  .pipe(sass({
    outputStyle: 'expanded'
  })).on('error', sass.logError)
  .pipe(combineMq({
        beautify: true
    }))
    .pipe(gulp.dest('css'));
});

gulp.task('browserify', function () {
  return browserify('./src/js/main.js')
    .transform(babelify, {presets: ['es2015']})
    .bundle()
    .on('error', function(err){
        console.log(err.message);
        console.log(err.stack);
    })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./js/'));
});

gulp.task('lint', function(){
    return gulp.src('./src/js/*.js')
        .pipe(plumber({
            errorHandler: notify.onError('Error: <%= error.message %>')
        }))
        .pipe(eslint({useEslintrc: true}))
        .pipe(eslint.format())
        .pipe(eslint.failOnError())
        .pipe(plumber.stop());
});

gulp.task('watch', ['sass'], function () {
  gulp.watch('src/scss/**/*.scss', ['sass']);
  gulp.watch('src/js/**/*.js', ['browserify']);
});

ES2015のimport記法

requireはNode.js、importはES2015の記法なんだそうな。 http://sakamock.hatenablog.com/entry/2016/02/03/091623

ES2015でimportを書くと、babelでrequireになって、browserifyで依存解決される、ということらしい。

importとrequireでは、exportする記法も異なるので注意。 http://qiita.com/rooooomania/items/4c999d93ae745e9d8657

// slider.js

'use strict';

export default class slider {
    //hogehoge
}

// main.js
import slider from './slider.js';

new slider();

ES2015のクラス記法

中のメソッドをどう使っていくかはまだまだ勉強が必要そう。

// slide_menu.js

'use strict';

// jqueryをnpmで入れてます
import $ from 'jquery'

class slideMenu {
  constructor () {
    this.menuButton = $("#js_menu_button");
    // hogehoge
  }

  hoge () {
    // hogehoge
  }  
}

webのちょっとしたアニメーションって、文字通り「振る舞う」から、JavaScriptでオブジェクトの振る舞いを考えられるのはおもしろかった。 会社でcoffeeを書くときも、もうちょっとオブジェクトの振る舞いとか、関数で振る舞いを定義していく感覚を意識していこうと思う。