「みんなの翻訳」は、世界中の文書をみんなで協力して翻訳するサイトです。

みんなの翻訳ロゴ
ブクタブ
翻訳サイト

カテゴリ一覧

このサイトについて 新規登録はこちら お試し翻訳

一覧

2017/07/28

メンテナンス終了のお知らせ

2017/7/25-2017/7/28に実施したメンテナンスは、2017/7/28/14:20に終了いたしました。 ご協力をいただき、ありが…

List

Hnoss

English⇒Japanese

shikimi

English⇒Japanese

sysInfo

English⇒Japanese

tkkobe

English⇒Japanese

ホーム > 翻訳記事

翻訳記事

Brunch - 超速 HTML5 ビルドツール

 まとめページで見る(みんなの本棚)

 

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

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

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

 コンフィグを軽量化

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

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

 コマンドだって簡単:

  • 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"

   }

}




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

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

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

 

インストール方法

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

npm install -g brunch

と入力してください

[映像]クイック・デモ

 

[制作者]

Paul Miller
Elan Shanker
Nik GrafNik
Thomas Schranz
 

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

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

ロゴの制作者:Michael Hellein

 

 

PDF
更新日:2017-08-14 23:33:06 Hnoss 1  del.icio.usに追加   はてなブックマークに追加   twitterに投稿   facebookでshare
[ 原文 ] http://brunch.io/ Creative Commons License この作品は、クリエイティブ・コモンズ・ライセンスの下でライセンスされています。
クリエイティブ・コモンズ・ライセンス
翻訳者ページをみる

この記事の翻訳者

Hnoss さんの翻訳記事

【GitLab Pages 公式 を訳してみた】GitLab Pages 説明書 

GitLab Documentation > User documentation > Projects >GitLab Pages 説明書  GitLabには「GitLab Pages」という機能があります。  GitLab…2017-09-23 12:10:55

SSGを知る②:最近の静的サイト・ジェネレータ事情 | from about GitLab.com

 引き続き、静的サイト・ジェネレータ特集です。  前回は、「静的サイトとは何か」というような内容で終わってしまいましたが、いよいよ本題です。  静的サイト・ジェネレータって…2017-09-23 11:58:35

SSGを知る①:静的 vs 動的 ウェブサイト | about GitLab.com

 ウェブサイトは静的なものと、動的なもの2つに分かれますが、それらにはどのような違いがあって、どのような長所があるのでしょう。  GitLab Pagesで扱えるのはどっちだろう?  静…2017-09-23 11:23:00

【GitLab Pages 公式 を訳してみた】GitLab Pages のこと全部教えます!①

GitLab Documentation > User documentation > Projects > GitLab Pages 説明書 >GitLab Pages のこと全部教えます!① 記事の 種類 : 取扱説明書 || 対象 : 初心者 || …2017-09-23 11:17:34