New Generation Build System「Fly」

JSオジサン#6 2日目@deepblue_will

自己紹介

Goodpatch, Inc. 杉原碧志(あおし)

@deepblue_will

• Prottのフロントエンド担当

• Java(SWT) → Ruby(Ruby on Rails) → JavaScript(AngularJS)

• 外部のイベントでLTするのは初めてです

新しいビルドツール「Fly」

の話をします

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

ES6(2015) で記述

ES6(2015)で記述

• Generators

• Promises

• (async/await)

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

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

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

• Gulpと同じく「設定よりもコード」という思想

• Gulpと比べて、よりコードを書くように設定ファイルを作れる

gulpfileとflyfile

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

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

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('');}

関数名 = タスク名

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なし

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の必要がない

その他

• clear, concatなど、便利なのが標準である

• gulp-concat, delいらない

• watch中にエラーでオチない

• gulp-plumberいらない　

• 並列処理と直列処理が選べる • run-sequenceいらない

Fly良さそう

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

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

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

GulpとFlyのプラグインの数

• Fly: 50個ぐらい

• https://www.npmjs.com/browse/keyword/fly

• Gulp: 2000個以上！

• https://www.npmjs.com/browse/keyword/gulp

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

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

'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行

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行

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

fly-markdown2html

• markdownをhtmlに変換

• 需要はまったくないと思う

• plugin作り方を把握するためにとりあえず簡単なものを作ってみたかっただけです。

• https://github.com/deepblue-will/fly-markdown2html

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

fly-markdown2html

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を返却する

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

まとめ

まとめ①

• 設定ファイルが簡潔になる

• 関数名 = タスク名

• pipeいらない

• requireいらない

まとめ②

• プラグインが少ない

• でも簡単に作れる

• 作るなら今！

https://github.com/deepblue-will/fly-template

(途中で挫折した)

Goodpatchでは I can fly!なエンジニアを絶賛募集中です！

https://www.wantedly.com/companies/goodpatch/projects

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