New Generation Build System "Fly"
-
Upload
deepblue-will -
Category
Engineering
-
view
2.367 -
download
5
Transcript of New Generation Build System "Fly"
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
ご静聴ありがとう ございました!