➡まとめページで見る（みんなの本棚）

ビルドツールでお悩みなら、

Brunchを使ってみてください！

Brunchは、つぎはぎでゴチャゴチャなHTMLを、きれいにまとめる最高のツールです。

　コンフィグを軽量化

　独自のビルドパイプラインで、スムーズで快適なウェブ表示。コンフィグファイルが嘘みたいに小さくなります。

　３つのシンプルなコマンド

　コマンドだって簡単：

• brunch new 　で新規作成
• brunch build 　でビルド
• brunch watch　でコンパイル

　まだまだある便利機能

• NPM対応
• 型破りなソース・マップ
• 最低限のビルドで高速
• 追加ビルド

　　など、ほかにもあるよ

　こちらをご覧ください

　[Gulpで作成したコンフィグ・ファイル]

var app, base, concat, directory, gulp, gutil, hostname, path, refresh, sass, uglify, del, connect, autoprefixer, babel;

var autoPrefixBrowserList = ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'];

gulp = require('gulp');

gutil = require('gulp-util');

concat = require('gulp-concat');

uglify = require('gulp-uglify');

sass = require('gulp-sass');

connect = require('gulp-connect');

del = require('del');

autoprefixer = require('gulp-autoprefixer');

babel = require('gulp-babel');

gulp.task('connect', function() {

connect.server({

root: 'app',

livereload: true

});

});

gulp.task('images-deploy', function() {

gulp.src(['app/images/**/*'])

.pipe(gulp.dest('dist/images'));

});

gulp.task('scripts', function() {

//this is where our dev JS scripts are

return gulp.src('app/scripts/src/**/*.js')

.pipe(babel({ presets: ['es2015', 'react'] })

.pipe(concat('app.js'))

.on('error', gutil.log)

.pipe(uglify())

.pipe(gulp.dest('app/scripts'))

.pipe(connect.reload());

});

gulp.task('scripts-deploy', function() {

return gulp.src('app/scripts/src/**/*.js')

.pipe(concat('app.js'))

.pipe(uglify())

.pipe(gulp.dest('dist/scripts'));

});

gulp.task('styles', function() {

return gulp.src('app/styles/scss/init.scss')

.pipe(sass({

errLogToConsole: true,

includePaths: [

'app/styles/scss/'

]

}))

.pipe(autoprefixer({

browsers: autoPrefixBrowserList,

cascade: true

}))
.on('error', gutil.log)

.pipe(concat('styles.css'))

.pipe(gulp.dest('app/styles'))

.pipe(connect.reload());

});

gulp.task('styles-deploy', function() {

return gulp.src('app/styles/scss/init.scss')

.pipe(sass({

includePaths: [

'app/styles/scss',

]

}))

.pipe(autoprefixer({

browsers: autoPrefixBrowserList,

cascade: true

}))

.pipe(concat('styles.css'))

.pipe(gulp.dest('dist/styles'));

});

gulp.task('html', function() {

return gulp.src('app/*.html')

.pipe(connect.reload())

.on('error', gutil.log);

});

gulp.task('html-deploy', function() {

gulp.src('app/*')

.pipe(gulp.dest('dist'));

gulp.src('app/.*')

.pipe(gulp.dest('dist'));

gulp.src('app/fonts/**/*')

.pipe(gulp.dest('dist/fonts'));

gulp.src(['app/styles/*.css', '!app/styles/styles.css'])

.pipe(gulp.dest('dist/styles'));

});

gulp.task('clean', function() {

del('dist');

});

//this is our master task when you run `gulp` in CLI / Terminal

//this is the main watcher to use when in active development

// this will:

// startup the web server,

// start up livereload

// compress all scripts and SCSS files

gulp.task('default', ['connect', 'scripts', 'styles'], function() {

gulp.watch('app/scripts/src/**', ['scripts']);

gulp.watch('app/styles/scss/**', ['styles']);

gulp.watch('app/*.html', ['html']);

});

gulp.task('deploy', ['clean'], function () {

gulp.start('scripts-deploy', 'styles-deploy', 'html-deploy', 'images-deploy');

});

　　[Brunchで作成した普通のコンフィグファイル]

exports.files = {

javascripts: {

joinTo: {

'vendor.js': /^(?!app)/,

'app.js': /^app/

}

},

stylesheets: {joinTo: 'app.css'}

};

exports.plugins = {

babel: {presets: ['latest', 'react']},

postcss: {processors: [require('autoprefixer')]}

};

　　[.jsonパッケージ版コンフィグファイル]

{

"devDependencies": {

"brunch": "^2",

"babel-brunch": "^6",

"postcss-brunch": "^2",

"sass-brunch": "^2",

"uglify-js-brunch": "^2",

"autoprefixer": "^6",

"babel-preset-react": "^6",

"babel-preset-latest": "^6"

}

}

実は、この３つのコンフィグファイルは、全部同じページを表しています。

コンフィグファイルの方式からしてダントツに違う。

Brunchについてもっと知りたい方は、こちらのドキュメンタリーをご覧ください。

インストール方法

インストールは、オンラインでnode.jsを手に入れてから、コンソールにて：

npm install -g brunch

と入力してください

[映像]クイック・デモ

[制作者]

Paul Miller
Elan Shanker
Nik GrafNik
Thomas Schranz

このウェブサイトは、制作にGitHubを使っています。

このウェブサイトのコンテンツはCC BY 3.0.のもとライセンスされています。

ロゴの制作者：Michael Hellein