SprocketsをNode.jsのエコシステムで置き換えてRailsと組み合わせる話
Throw awaySprockets!!Tomohiro Hashidate (joker1007)
View Slide
in Japanese...Railsの片手間でJSを書く人のためのJSビルドツール入門
Self IntroductionTomohiro Hashidate(joker1007)
Skill Ratio‒Ruby/Rails: 6JavaScript: 3Scala: 1
Sprockets is notrequired nowLet's use ecosystemof JavaScript
Why JavaScriptEcosystem?Libraries version controlalt‒JS handlingMore general technique, Not specializedfor Rails
How do you update JSLibraries?
Ruby way or manual*‒rails gemgit submoduleOr Manual ?
JavaScript PackageManagernpmbower
railsassets.orgconvert from bower packages torubygems
altJS is increasingCoffeeScriptTypeScriptLiveScriptscala.jsPureScriptetc ...
*rails gem cannotfully follow them
I want to learntechnique notspecialized for Rails.
Sprockets features VSJS Ecosystem
require directive(Sprockets)//= require jquery//= require jquery_ujs//= require lodash//= require backbone
browserify, webpackenable CommonJS Style require.Command$ npm install browserify tsify jquery backbone$ browserify -p tsify bundle.ts > bundle.jsJSvar jQuery = require('jquery');var Backbone = require('backbone');TypeScriptimport jQuery = require('jquery');import Backbone = require('backbone');
Embed JS librariesand define requirefunction
Compile altJS, SassAnd minify assets(Sprockets)
(gulp or grunt) andcompiler andlivereloadnpm install coffee-script tsify gulp-ruby-sass gulp-uglifygulp.task 'browserify', ->browserify(entries: ["assets/ts/bundle.ts"]).plugin("tsify").bundle().pipe(source("bundle.js")).pipe(streamify(uglify())).pipe(gulp.dest("public/assets/bundle.js"))
gulp.task 'sass', ['glyphicon'], ->gulp.src(['frontend/assets/stylesheets/**/*.scss', 'frontend/assets/stylesheets/**.pipe(gulp.dest("public/assets/sass")).pipe(plumber()).pipe(sass(sourcemap: truesourcemapPath: "./sass"compass: truebundleExec: trueloadPath: ["./bower_components"])).pipe(gulp.dest("public/assets"))
Debugging(sprockets)
Use sourcemapbrowserify(entries: ["assets/ts/bundle.ts"], debug: true)
digest asset(Sprocets)application-1305b1f70b09d06be2d6e1a074f38a29.js
gulprev and generatemanifest.jsonrev = require("gulp-rev")manifest = require("gulp-rev-rails-manifest")browserify(....).bundle().pipe(streamify(rev())).pipe(gulp.dest("public/assets")).pipe(manifest()).pipe(gulp.dest("public/assets"))
joker1007/gulprevrailsmanifestOutput manifest.json for Rails assetshelper
testing (Sprockets)
Use Mocha, powerassertespowerify enable power‒assert onbrowserify./// /// import assert = require('power-assert');import Hello = require('../../frontend/assets/javascripts/hello');var hello = Hello.hello;var fib = Hello.fib;describe('hello', () => {it('should return "Hello, name"', () => {assert(hello("Name") == "Hello, Name");})});
Use test runnertestemkarma
I implemented sampleapplicationtypescriptbrowserifygulpgulp‒sassgulp‒revgulp‒rev‒rails‒manifest
jquerybackbone, marionettepower‒assert
joker1007/rails_browserify_sample