new generation build system "fly"
TRANSCRIPT
![Page 1: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/1.jpg)
New Generation Build System「Fly」
JSオジサン#6 2日目@deepblue_will
![Page 2: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/2.jpg)
自己紹介
Goodpatch, Inc. 杉原碧志(あおし)
@deepblue_will
• Prottのフロントエンド担当
• Java(SWT) → Ruby(Ruby on Rails) → JavaScript(AngularJS)
• 外部のイベントでLTするのは初めてです
![Page 3: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/3.jpg)
![Page 4: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/4.jpg)
![Page 5: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/5.jpg)
新しいビルドツール「Fly」
の話をします
![Page 6: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/6.jpg)
Flyの特徴は?Gulpとの違いは?
![Page 7: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/7.jpg)
ES6(2015) で記述
![Page 8: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/8.jpg)
ES6(2015)で記述
• Generators
• Promises
• (async/await)
![Page 9: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/9.jpg)
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
![Page 10: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/10.jpg)
コードに近い設定ファイル
![Page 11: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/11.jpg)
コードに近い設定ファイル
• Gulpと同じく「設定よりもコード」という思想
• Gulpと比べて、よりコードを書くように設定ファイルを作れる
![Page 12: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/12.jpg)
gulpfileとflyfile
![Page 13: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/13.jpg)
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
![Page 14: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/14.jpg)
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
![Page 15: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/15.jpg)
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('');}
関数名 = タスク名
![Page 16: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/16.jpg)
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なし
![Page 17: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/17.jpg)
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の必要がない
![Page 18: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/18.jpg)
その他
• clear, concatなど、便利なのが標準である
• gulp-concat, delいらない
• watch中にエラーでオチない
• gulp-plumberいらない
• 並列処理と直列処理が選べる • run-sequenceいらない
![Page 19: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/19.jpg)
Fly良さそう
![Page 20: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/20.jpg)
Flyでビルド環境構築 してみよう!
![Page 21: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/21.jpg)
I can’t fly.. \(^o^)/
![Page 22: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/22.jpg)
プラグインが少なすぎてやりたいことできない問題
![Page 23: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/23.jpg)
GulpとFlyのプラグインの数
• Fly: 50個ぐらい
• https://www.npmjs.com/browse/keyword/fly
• Gulp: 2000個以上!
• https://www.npmjs.com/browse/keyword/gulp
![Page 24: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/24.jpg)
ならプラグイン 作ってみよう
![Page 25: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/25.jpg)
Flyプラグインは簡単に作れる
![Page 26: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/26.jpg)
'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行
![Page 27: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/27.jpg)
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行
![Page 28: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/28.jpg)
ためしに簡単なものを 作ってみた
![Page 29: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/29.jpg)
fly-markdown2html
• markdownをhtmlに変換
• 需要はまったくないと思う
• plugin作り方を把握するためにとりあえず簡単なものを作ってみたかっただけです。
• https://github.com/deepblue-will/fly-markdown2html
![Page 30: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/30.jpg)
export default function () { this.filter("markdown2html", (data, options) => { return { code: require("markdown-it")(options).render(data.toString()), ext: ".html" } })}
fly-markdown2html
![Page 31: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/31.jpg)
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を返却する
![Page 32: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/32.jpg)
とこんな感じに簡単に プラグインが作れちゃいます!
![Page 33: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/33.jpg)
まとめ
![Page 34: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/34.jpg)
まとめ①
• 設定ファイルが簡潔になる
• 関数名 = タスク名
• pipeいらない
• requireいらない
![Page 35: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/35.jpg)
まとめ②
• プラグインが少ない
• でも簡単に作れる
• 作るなら今!
![Page 36: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/36.jpg)
https://github.com/deepblue-will/fly-template
(途中で挫折した)
![Page 37: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/37.jpg)
Goodpatchでは I can fly!なエンジニアを絶賛募集中です!
https://www.wantedly.com/companies/goodpatch/projects
![Page 38: New Generation Build System "Fly"](https://reader034.vdocuments.mx/reader034/viewer/2022042907/58732ae11a28ab596c8b58af/html5/thumbnails/38.jpg)
ご静聴ありがとう ございました!