Grunt, Gulpに続く新しいビルドツール「Fly」の紹介です。

1. New Generation
Build System
「Fly」
JSオジサン#6 2日目
@deepblue_will

2. 自己紹介
Goodpatch, Inc.
杉原碧志(あおし)
@deepblue_will
• Prottのフロントエンド担当
• Java(SWT) →
Ruby(Ruby on Rails) →
JavaScript(AngularJS)
• 外部のイベントでLTするの
は初めてです

5. 新しいビルドツール
「Fly」
の話をします

6. Flyの特徴は？
Gulpとの違いは？

7. ES6(2015)
で記述

8. ES6(2015)で記述
• Generators
• Promises
• (async/await)

9. export default function* () {
yield this.watch("src/**/*.js", ["build"])
}
export function* build () {
yield this.clear("dist")
yield this
.source("src/**/*.js")
.babel({ presets: ["es2015"], sourceMaps: true })
.concat("foobar.js")
.target("dist")
}
flyfile.js

10. コードに近い設定ファイル

11. コードに近い設定ファイル
• Gulpと同じく「設定よりもコード」という思
想
• Gulpと比べて、よりコードを書くように設定
ファイルを作れる

12. gulpfileとflyfile

13. var gulp = require('gulp');
var $ = require('gulp-load-plugins')();
gulp.task('sass', function () {
gulp.src('src/styles/**/*.scss')
.pipe($.sass({
outputStyle: "expanded",
sourceMap: true
}))
.pipe($.postcss([
require('autoprefixer')({browsers: ['> 5%']}),
require('css-mqpacker')()
]))
.pipe(gulp.dest('dist'));
});
gulpfile.js

14. export function* sass() {
yield this
.source('src/styles/**/*.scss')
.sass({
outputStyle: 'expanded',
sourceMap: true
})
.postcss({
processors: [
require('autoprefixer')({browsers: ['> 5%']}),
require('css-mqpacker')()
]
})
.target("dist");
}
flyfile.js

15. var gulp = require('gulp');
var $ = require('...')();
gulp.task('sass', function () {
gulp.src('')
.pipe($.sass())
.pipe($.postcss())
.pipe(gulp.dest(''));
});
export function* sass() {
yield this
.source('')
.sass()
.postcss()
.target('');
}
関数名 = タスク名

16. var gulp = require('gulp');
var $ = require('...')();
gulp.task('sass', function () {
gulp.src('')
.pipe($.sass())
.pipe($.postcss())
.pipe(gulp.dest(''));
});
export function* sass() {
yield this
.source('')
.sass()
.postcss()
.target('');
}
pipeなし

17. var gulp = require('gulp');
var $ = require('...')();
gulp.task('sass', function () {
gulp.src('')
.pipe($.sass())
.pipe($.postcss())
.pipe(gulp.dest(''));
});
export function* sass() {
yield this
.source('')
.sass()
.postcss()
.target('');
}
requireの必要がない

18. その他
• clear, concatなど、便利なのが標準である
• gulp-concat, delいらない
• watch中にエラーでオチない
• gulp-plumberいらない
• 並列処理と直列処理が選べる
• run-sequenceいらない

19. Fly良さそう

20. Flyでビルド環境構築
してみよう！

21. I can’t fly.. ＼(^o^)／

22. プラグインが少なすぎて
やりたいことできない問題

23. GulpとFlyのプラグインの数
• Fly: 50個ぐらい
• https://www.npmjs.com/browse/keyword/fly
• Gulp: 2000個以上！
• https://www.npmjs.com/browse/keyword/gulp

24. ならプラグイン
作ってみよう

25. Flyプラグインは簡単に作れる

26. 'use strict';
var gutil = require('gulp-util');
var through = require('through2');
var assign = require('object-assign');
var path = require('path');
var applySourceMap = require('vinyl-sourcemaps-apply');
var PLUGIN_NAME = 'gulp-sass';
//////////////////////////////
// Main Gulp Sass function
//////////////////////////////
var gulpSass = function gulpSass(options, sync) {
return through.obj(function (file, enc, cb) {
var opts,
filePush,
errorM,
callback,
result;
if (file.isNull()) {
return cb(null, file);
}
if (file.isStream()) {
return cb(new gutil.PluginError(PLUGIN_NAME, 'Streaming not supported'));
}
if (path.basename(file.path).indexOf('_') === 0) {
return cb();
}
if (!file.contents.length) {
file.path = gutil.replaceExtension(file.path, '.css');
return cb(null, file);
}
opts = assign({}, options);
opts.data = file.contents.toString();
// Ensure `indentedSyntax` is true if a `.sass` file
if (path.extname(file.path) === '.sass') {
opts.indentedSyntax = true;
}
// Ensure file's parent directory in the include path
if (opts.includePaths) {
if (typeof opts.includePaths === 'string') {
opts.includePaths = [opts.includePaths];
}
}
else {
opts.includePaths = [];
}
opts.includePaths.unshift(path.dirname(file.path));
// Generate Source Maps if plugin source-map present
if (file.sourceMap) {
opts.sourceMap = file.path;
opts.omitSourceMapUrl = true;
opts.sourceMapContents = true;
}
//////////////////////////////
// Handles returning the file to the stream
//////////////////////////////
filePush = function filePush(sassObj) {
var sassMap,
sassMapFile,
sassFileSrc,
sassFileSrcPath,
sourceFileIndex,
filteredSources;
// Build Source Maps!
if (sassObj.map) {
// Transform map into JSON
sassMap = JSON.parse(sassObj.map.toString());
// Grab the stdout and transform it into stdin
sassMapFile = sassMap.file.replace('stdout', 'stdin');
// Grab the base file name that's being worked on
sassFileSrc = file.relative;
// Grab the path portion of the file that's being worked on
sassFileSrcPath = path.dirname(sassFileSrc);
if (sassFileSrcPath) {
//Prepend the path to all files in the sources array except the file that's being worked on
gulp-sass → 185行

27. const sass = require("node-sass").render;
const assign = require("object-assign");
module.exports = function (debug) {
this.filter("sass", (data, options) => {
return this.defer(sass)(assign({data: data.toString()}, assign({
outFile: options.sourceMap ? "." : "",
file: options.filename
}, options))).then((result) => assign({ext: ".css"}, result))
})
};
fly-sass→ 11行

28. ためしに簡単なものを
作ってみた

29. fly-markdown2html
• markdownをhtmlに変換
• 需要はまったくないと思う
• plugin作り方を把握するためにとりあえず簡単なものを作ってみたかった
だけです。
• https://github.com/deepblue-will/fly-
markdown2html

30. export default function () {
this.filter("markdown2html", (data, options) => {
return {
code: require("markdown-it")(options).render(data.toString()),
ext: ".html"
}
})
}
fly-markdown2html

31. flyのプラグイン作り
• yo fly
• プラグインを作るためのGeneratorがある
• https://github.com/bucaran/generator-fly
• Fly.prototype.filter (name, (data, option) => {})
• name: プラグイン名
• data: Buffer
• option: プラグインを呼ぶ時に指定したoption
• {code: 変換結果(String), ext: 拡張子}かPromiseを返却する

32. とこんな感じに簡単に
プラグインが作れちゃいます！

33. まとめ

34. まとめ①
• 設定ファイルが簡潔になる
• 関数名 = タスク名
• pipeいらない
• requireいらない

35. まとめ②
• プラグインが少ない
• でも簡単に作れる
• 作るなら今！

36. https://github.com/
deepblue-will/fly-template
(途中で挫折した)

37. Goodpatchでは
I can fly!なエンジニアを絶賛募集中です！
https://www.wantedly.com/companies/
goodpatch/projects

38. ご静聴ありがとう
ございました！