riot gulp フロントエンド開発環境

riot gulp npm

github

toknsi/riotjs_frontend

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"
  }
}

gulpfile.js

require("./gulptask.js");

gulptask.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()
    .on('error', function (err) {
      console.log(err.toString());
      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']);
});