LoginSignup
13
13

More than 5 years have passed since last update.

SailsのAssetsでbootstrap(3.x.x)を使う場合

Last updated at Posted at 2014-02-25

assets/linker以下のディレクトリを用意


※この投稿はSailsのv0.9.9当時のものです。肝心のsailsのバージョン書き忘れていました。現行バージョン(v0.10.x系)はAssetsまわりの実装がこの当時と異なります。現行バージョンでの対応は公式ドキュメントが充実してきたので、そちらを見ていただければわかると思います(TODO:どっかのタイミングで現行バージョン対応版を投稿しろ、俺)。


公式ドキュメントにあるとおりlinkerオプションを付けてプロジェクトを作ればlinkerディレクトリ以下が自動で用意される。もしlinkerオプションを付けずに作ったプロジェクトであれば、自分でlinkerディレクトリ含め、それ以下のディレクトリを作成する。

linkerオプション付きのプロジェクト作成は以下。

sails new <project名> --linker

作成されるディレクトリ構成

assets
 |_linker
     |_js
     |_styles
     |_templates

linkerオプションなしで作成したプロジェクトはこのディレクトリ構成を手動で作成

bootstrapのjs、cssその他を配置

jsにbootstrap.min.jsを配置。もしjqueryをローカルにファイルを持って使うならjqueryもこちらに配置。
ただし、jqueryをローカルに置く場合はassetsで自動にviewにインジェクションされる時の順番をjquery→bootstrapにしておく必要がある。その設定はGruntfile.jsで行う。

Gruntfile.jsのインジェクション指定
  /**
   * Javascript files to inject in order
   * (uses Grunt-style wildcard/glob/splat expressions)
   *
   * To use client-side CoffeeScript, TypeScript, etc., edit the 
   * `sails-linker:devJs` task below for more options.
   */

  var jsFilesToInject = [

    // Below, as a demonstration, you'll see the built-in dependencies 
    // linked in the proper order order

    // Bring in the socket.io client
    'linker/js/socket.io.js',

    // then beef it up with some convenience logic for talking to Sails.js
    'linker/js/sails.io.js',

    // A simpler boilerplate library for getting you up and running w/ an
    // automatic listener for incoming messages from Socket.io.
    'linker/js/app.js',

    // *->    put other dependencies here   <-*

    // All of the rest of your app scripts imported here
    //'linker/**/*.js'
    'linker/js/jquery-2.1.0.min.js',
    'linker/js/bootstrap.min.js'
  ];

linker/*/.jsの設定で上から順にviewへインジェクションされる。

CSSはディレクトリごとstylesの下に配置する。配置するのはminifyされたものだけでよい。あわせてフォントもfontsディレクトリごとstylesの下に配置する。

インジェクションのためのフラグコメントの記述

すべてのviewに共通で組み込むならlayout.ejs(jadeで作っている場合はlayout.jadeに)にコメントで以下を追記する。

フラグコメントの追記(ejsの場合)
<!--SCRIPTS-->
<!--SCRIPTS END-->

<!--STYLES-->
<!--STYLES END-->

Jadeで作っている場合も同じように//でコメント追加すればよい。

13
13
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
13
13