riot.js + sass + gulp で開発する

#はじめに

• riot.jsでrequireを使いたい
• cssはsassを使いたい(compassもつかいたい)
• テンプレートエンジンはjadeが良い

という条件で開発環境構築してみた．
解説詳しくないしメモ程度ですが参考にしてみてください．

#フォルダ構成

frontend
   │
   ├ dest
   │  ├ css
   │  │   └ style.css
   │  ├ img
   │  ├ js
   │  ├ index.html
   │  └ main.bundle.js
   │
   ├ src
   │  ├ jade
   │  │　└ index.jade
   │  │
   │  ├ module (riotのタグを置くフォルダ)
   │  ├ scss
   │  │   └ module
   │  ├ js
   │  └ main.js
   │
   ├ gulpfile.js
   ├ config.rb
   └ package.json

こんな感じのフォルダ構成でいきます．

compassを使おうとするといろいろ面倒くさそうだったので，cssはriotのタグと分離させることにしました．src/moduleの中にriotのタグを入れて，それに合わせてsrc/scss/moduleにスタイルを書いていくことにします．

#パッケージ

package.json

{
  ~中略~

  "devDependencies": {
    "browser-sync": "^2.17.0",
    "browserify": "^13.1.0",
    "gulp": "~3.9.1",
    "gulp-compass": "~2.0.1",
    "gulp-convert-encoding": "^1.0.0",
    "gulp-jade": "^1.1.0",
    "gulp-livereload": "2.1.1",
    "gulp-plumber": "^1.1.0",
    "gulp-riot": "^0.5.5",
    "gulp-watch": "~1.1.0",
    "riotify": "^1.0.1",
    "vinyl-source-stream": "^1.1.0"
  }
}

上記のパッケージをターミナルからsudo npm install (パッケージ名) --dev-saveで各々インストール．
(コピぺして npm installでもいいけど，ひとつずつ最新版入れたほうが良いと思います)

#設定

gulpfile.js

'use strict';

var gulp            = require('gulp');
var compass         = require('gulp-compass');
var livereload      = require('gulp-livereload');
var browserify      = require('browserify');
var riotify         = require('riotify');
var source          = require('vinyl-source-stream');
var browsersync     = require("browser-sync");
var jade            = require('gulp-jade');
var convertEncoding = require('gulp-convert-encoding');
var plumber         = require('gulp-plumber');


/*
 * Compass
 */
 gulp.task('compass', function(){
     gulp.src('./src/scss/**/*.scss')
     .pipe(plumber())
     .pipe(compass({
         config_file: 'config.rb',
         comments: false,
         css: './dest/css',
         sass: './src/scss'
     }))
     .pipe(convertEncoding({to: "utf-8"}))
     .pipe(gulp.dest('./dest/css'))
     .pipe(browsersync.stream());
 });

/*
 * jade
*/
gulp.task('jade', function ()  {
    return gulp.src(['./src/jade/**/*.jade', '!./src/jade/**/_*.jade'])
        .pipe(plumber())
        .pipe(jade({
            pretty: true
        }))
        .pipe(convertEncoding({to: "utf-8"}))
        .pipe(gulp.dest('./dest/'))
        .pipe(browsersync.stream());
});

/*
 * riot
 */
gulp.task('concat', function () {
  return browserify({entries: ['./src/main.js']})
    .transform(riotify, { template: 'jade' })
    .bundle()
    .pipe(plumber({
      errorHandler: function(err) {
        console.log(err.messageFormatted);
        this.emit('end');
      }
    }))
    .pipe(source('main.bundle.js'))
    .pipe(convertEncoding({to: "utf-8"}))
    .pipe(gulp.dest('./dest/'))
    .pipe(browsersync.stream());
});

/*
 * BrowserSync
 */
gulp.task('server', function () {
 browsersync.init({
   server: {
     baseDir: 'dest'
   },
   open: false,
 });
});


/*
 * Watch
 */
gulp.task('default', ['server'], function() {
  gulp.watch("./dest/*", function() {
    browsersync.reload();
  });
  gulp.watch("./src/**/*.js", ['concat']);
  gulp.watch("./src/**/*.tag", ['concat']);
  gulp.watch("./src/**/*.scss", ['compass']);
  gulp.watch("./src/**/*.jade", ['jade']);
});

config.rb

http_path = "/"
css_dir = "./dest/css"
sass_dir = "./src/scss"
output_style = :nested
line_comments = false

requireしたいのでriotifyをつかいます．
これでfrontendフォルダでgulpコマンドを起動すれば，自動でビルドしてくれます．

#使い方
src/main.jsでriotのタグをマウントするスクリプトを記述．

main.js

var riot = require('riot');

//include tags
require('./module/tag1');
require('./module/tag1');

//mount
riot.mount('*');

あとはsrc/jade/index.jadeでmain.bundle.jsを読み込み．

main.jade

doctype html
html(lang = 'ja')
	head
		meta(charset = 'utf-8')
		link(href = "css/style.css"  media = "all" rel = "stylesheet")
	body
		tag1
		tag2
	script(src = './main.bundle.js')

最低限こんな感じでriotのタグをマウントすることができます．

#requireをつかう
src/jsフォルダ内にスクリプトを置いてタグの中でrequireするときはこんな感じ．

function1.js

module.exports = function(data){
	//なんらかの処理
}

src/module/tag1.tag

tag1
	#contents
		hogehoge

	script.
		var function1 = require('../js/function1.js');
		function1(data);

#最後に
たいしたことなんもやってないけどgulp初めてだったからここまでやるのに時間かかった．
gulp-plumberつかってるけどjsファイルにエラーが起きるとgulpが落ちます．解決策が分かる人いたらコメント下さい．