06. 設定

frontplate-cliのビルドはfrp.config.jsに設定を書くことでコントロールすることができます。

指定した設定は上書きされるので注意してください。初期の設定は次のURLにあるので初めてカスタマイズする際にはこちらを参考に変更を加えてみてください。

https://github.com/frontainer/frontplate-cli/tree/master/config

基本構成テンプレート

'use strict';
module.exports = function(production) {
    global.FRP_SRC = global.FRP_SRC || 'src'; // ↑ v2.0.0
    global.FRP_DEST = global.FRP_DEST || 'public';
    return {
        clean: {},
        html: {},
        style: production ? {} : {},
        script: production ? {} : {},
        server: {},
        copy: {},
        sprite: [],
        test: {}
    }
};

設定例

'use strict';
// production:Booleanで-pフラグがついているかどうかを判定して設定を振り分けることができます。
module.exports = function(production) {
    global.FRP_DEST = global.FRP_DEST || 'public';  // ビルドしたファイルを出力するディレクトリ
    return {
        // クリーン
        clean: {
            src: FRP_DEST // ビルド時に余分なファイルを削除します。基本的にはFRP_DESTと同じディレクトリを指定します。
        },
        // HTML生成
        html: {
            src: 'src/view/**/*.ejs',   // 読み込むビューファイル。EJSの詳しい使い方は http://ejs.co/ で
            dest: FRP_DEST,  // HTMLファイルの出力先
            params: {        // EJSで使うグローバル変数。ここで記述したものはHTMLで呼び出すことができます
                title: 'title'
            },
            // １つのテンプレートで複数のHTMLを作成するときに使用します
            pages: [
                {
                    name: 'filename',    // 出力するファイル名です。.htmlは省略します。
                    src: 'src/view/tmpl/_template.ejs',  // テンプレートとなるEJSファイルを指定します。
                    params: { // ページに渡す変数です。
                        title: 'page title'
                    }
                }
            ],
            // htmlhintルールを定義できます。詳しくは https://github.com/yaniswang/HTMLHint/wiki/Rules で
            rules: {
                "tagname-lowercase": true,
                "attr-lowercase": false,
                "attr-value-double-quotes": true,
                "attr-value-not-empty": true,
                "attr-no-duplication": true,
                "doctype-first": false,
                "tag-pair": true,
                "tag-self-close": false,
                "spec-char-escape": true,
                "id-unique": true,
                "src-not-empty": true,
                "head-script-disabled": true,
                "img-alt-require": true,
                "doctype-html5": true,
                "id-class-value": false,
                "style-disabled": false,
                "space-tab-mixed-disabled": true,
                "id-class-ad-disabled": true,
                "href-abs-or-rel": false,
                "attr-unsafe-chars": true
            }
        },
        // CSS生成
        style: {
            src: 'src/sass/**/*.scss',  // 読み込むscssファイルです。globパターンで指定できます。
            dest: FRP_DEST + '/assets/css',  // CSSの出力先です
            outputStyle: 'compact',          // SASSの出力形式です
            sourceMap: true,                 // SourceMap出力の有無です
            plugins: [  // postcssプラグイン     // postcssのプラグインです。デフォルトではautoprefixerのみ指定されています。
                require('autoprefixer')({
                    // autoprefixer(https://github.com/postcss/autoprefixer)
                    // サポートするブラウザを指定します
                    browsers: [
                        'last 3 version',
                        'ie >= 9',
                        'Android >= 4.0'
                    ]
                })
            ],
            // スタイルガイドの設定
            styleguide: {
                title: 'StyleGuide', // スタイルガイドのタイトル
                verbose: false,      // スタイルガイド生成の詳細表示有無
                clean: true,         // 生成時にスタイルガイドを一度削除するかどうか
                params: {},          // スタイルガイドに渡したいグローバル変数です
                css: '../' + FRP_DEST + '/assets/css/style.css',    // スタイルガイドで呼び出すCSSまでのパスを指定します
                script: '../public/assets/js/app.js',               // スタイルガイドで呼び出すJSまでのパスを指定します
            }
        },
        // JavaScript
        script: {
            // webpackのconfigと同じものが指定できます。 http://webpack.github.io/docs/configuration.html 
            // https://github.com/webpack/webpack/tree/v2.1.0-beta.25 ※ version2が使われています
        },
        // BrowserSync
        server: {
            // BrowserSyncのconfigと同じものが指定できます。 https://www.browsersync.io/docs/options
        },
        // ファイルコピー
        copy: {
            // 'path/from': '/path/to' という形でファイルを複製します。
            'src/lib/**/*': FRP_DEST + '/assets/lib',
            'src/images/**/*': FRP_DEST + '/assets/images'
        },
        // スプライト画像
        sprite: [ // 複数のスプライト画像を生成することができます。
            {
                src: 'src/sprites/icon/*.{png,gif,jpg}',    // 読み込む画像
                destImage: 'src/images/icon.png',           // 画像出力先
                destCSS: 'src/sass/sprites/_icon.scss',     // CSS出力先
                imgPath: '../images/icon.png',              // CSS内での画像パス
                padding: 2                                  // 画像の間隔
            }
        ],
        // ユニットテスト
        test: {
            // karmaのconfigと同じものが指定できます。 http://karma-runner.github.io/1.0/config/configuration-file.html
        }
    }
};