Bootstrap4のGruntタスクランナーにbrowserSyncを追加して自動リロードさせる #bootstrap4

Bootstrap4-alphaの設置

ソースコードをダウンロード

パッケージインストールする

今回はgrunt-browser-syncを使いたいので、package.jsonにパッケージを追加する。

"grunt-browser-sync": "^2.2.0",

他、必要なパッケージはpachage.jsonにかかれているので、そのままインストールなのですが

npm install

lodashのインストールでエラーがでるので、

npm WARN deprecated lodash@0.9.2: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm WARN deprecated lodash@1.0.2: lodash@<2.0.0 is no longer maintained. Upgrade to lodash@^3.0.0
npm ERR! Darwin 15.2.0

先に最新をインストールしておき、そのあと他のパッケージをインストールしてください。

% npm install lodash                                                                                          [8:09:28]
bootstrap@4.0.0-alpha.2 /Users/ashibuya/SourceTree/sasaya_jp/grunt_jp4
└── lodash@3.10.1  extraneous

動作確認

grunt

実行で正常に動作することを確認する。

browserSyncを導入する

インストール

npm install grunt-browser-sync --save-dev

Gruntfile.jsに追記する

browserSyncを追加、watchにタスク追加

   watch: {
      src: {
        files: '<%= jscs.core.src %>',
        tasks: ['babel:dev']
      },
      sass: {
        files: 'scss/**/*.scss',
        tasks: ['dist-css', 'docs']
      },
      docs: {
        files: 'docs/assets/scss/**/*.scss',
        tasks: ['dist-css', 'docs']
      },
      tasks: ['browserSync']
    },

   browserSync: {
      bsFiles: {
        src: ['dist/css/*.css', 'dist/js/*.js', 'dist/*.html']
      },
      options: {
        watchTask: true,
        server: {
          baseDir: 'dist/'
        }
      }
    },

Full distributionとDefault taskに追加する

  // Default task.
  grunt.loadNpmTasks('grunt-browser-sync');
  grunt.registerTask('default', ['dist','browserSync','watch']);

動作確認

grunt

ブラウザが起動して、htmlやsassやjsファイルの更新が自動反映されることを確認する

clenタスクに注意

clean:distタスクは、dist直下のディレクトリをすべて消してしまうので
ここにindex.htmlなどを置く場合は、clean:distの内容を変える必要がある。

cssとjsのディレクトリだけ削除するように変更

    // Task configuration.
    clean: {
      dist: ['dist/css','dist/js'],
      docs: 'docs/dist'
    },

こうしておけば、dist配下にファイルを配置しても消されることはない。

jscsのチェックにひっかかる

Gruntfile.js編集時には、インデントなど適当にしてしまうとjscsのチェックに引っかかるので
引っかかったら、その都度エラーを見て修正しましょう。

grunt jscs is grunt plugin for javascript code linting of all the javascript files for coding conventions. The jscs has got over 60 code validation rules coveringn wide range of options like indentation, maximum line length, maximum function block length, maximum file length, line breaks. curly braces, spaces before functions, array declaration etc.

Running "jscs:grunt" (jscs) task
validateQuoteMarks: Invalid quote mark found at Gruntfile.js :
   396 |      options: {
   397 |        server: {
   398 |          baseDir: "dist/"
---------------------------^
   399 |        }
   400 |      }
>> 1 code style errors found!
Warning: Task "jscs:grunt" failed. Use --force to continue.

Aborted due to warnings.

ほんとは
gulpでやりたいんですけど・・。

bootstrap4にはTetherが必要なもよう

bootstrapを起動すると以下のようなエラーが出力されてしまう。

Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)

こちらのサイトからzipを落としてきて、インクルードするようにするとなおります。

(おまけ)東洋経済オンラインでIT漫画連載してます

エンジニア夫婦のあるある日記 | 東洋経済オンライン | 新世代リーダーのためのビジネスサイト
http://toyokeizai.net/category/diary