ビルドにブートストラップ旅行-css・ソース環境

この記事では：
-ダウンロードブートストラップのソース
-ディレクトリ構造に精通している
-あなた自身のスペースプロジェクト作成
イサキのソースコードに抜粋少ないブートストラップコンパイルされたコードを-

ソースコードをダウンロードしてブートストラップ

githubの上でホストされているオープンソース、。そして、githubのダウンロード聖歌を行きます！

git clone https://github.com/twbs/bootstrap.git

ディレクトリ構造に精通

公式サイトからのブートストラップ

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

これは、ソースコードのディレクトリ構造です。

以下：スタイルファイルソース
ソーススクリプトファイル：JS
フォント：ファイルディレクトリのアイコン
ドキュメント：ヘルプの目次文書は、ジキル、レジャーを使用することを実行している、あなたはそれを自分で行うことができます
DIST：コンパイルされたコードの圧縮、生産上のここでの必要性のすべて

以下は、^ _ ^ディレクトリDISTの顕微鏡図です。

dist/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

また、ブートストラップの公式サイトから（私は、著作権のために大きな敬意を持っている場合、それらはどのように行うに:-)私を苦しめ）

あなた自身の空のプロジェクトを作成します。

空のディレクトリ、ディレクトリへのコマンドラインのCDを作成します。そして、実行

## mkdir mybootstrap
## cd mybootstrap
npm init -y

そのプロジェクトをビルドするためにうなり声を使用してブートストラップ。私たちは、ガルプの独自のセットを記述する必要はありませんでした、これは自分のものを見つけることではないでしょうか？誰かの好きはWebPACKのを使用する場合は、先に行く（喜喜）。
そこでの作男のことができるようにするために、我々はその後、地元のイサキをインストールし、グローバルな作男-CLIをインストールする必要があります。

npm install -g grunt-cli
npm install --save-dev grunt

次は、すべてのことが複雑後に問題が変更されない場合は、まず、それを行う上で、我々が必要とするあまりコンパイルされた設定ファイルでGruntfile.jsブートストラップのソースコードからのファイル、およびその他をコピー！！

module.exports = function(grunt){
  'use strict';

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    less:{
      compileCore:{
        options:{
          strictMath: true,
          sourceMap: true,
          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
        },
        src:'less/bootstrap.less',
        dest:'dist/css/<%= pkg.name %>.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-less');

  grunt.registerTask('default',['less:compileCore']);  
}

この抜粋はGruntfile.jsブートストラップファイルから、法律の違反がそれを知られていないという希望を修正するために少しポイントを行う、です。
我々は作男-contribのレスレスコンパイルするには、このプラグインファイルへの必要性を見ることができる場合は、インストールパッケージの聖歌を何も言うことはありません

npm i --save-dev grunt-contrib-less

ここでは、1つ、2つ、または3年の最初の時間Iの鋸イサキを挿入し、この素晴らしいツールを感じます。これは、年以上ゴクゴクとされ、今イサキを見て。常にそれはそう大声で大きな音の何かinitConfigを感じましたか？私は非常に多くの物事は、あなたがツールを使用することに持ち込まれ、やって他の人を制御する方法を自分自身を見つける、それは十分にはできません。

Zhefanの思考の後、また私に作男-contribのレスとみなさNPMは装着しました。偉大な中国は本当にNPM使用するネットワークは、忍耐のテストです。幸いなことに、伝説のcnpmがあります！

そして、最後の事はやっている、とbootstrap.lessを作成するには以下のディレクトリとファイルを作成します。私はbootstrap.lessファイル名が変更することはできませんでした理由を聞かないでください？変更が、最初私たちは上記のコードイサキを変更することができ、私は、変更、使用bootstrap.lessほとんどのエントリファイルにはしたくありません。

mkdir less
cd less
echo body{} > bootstrap.less #多么希望有个touch命令能创建文件呀

あなたはその後、コンパイルあまり面倒実行するためのコマンドラインを実行することができ、ていることを確認し、コマンドラインプロジェクトのルート！！
コマンドが完了した後、CSSの下に、ディレクトリのdistディレクトリよりも多くのを発見しました。次に、CSSファイルと対応するsourcemapファイルがあります。。最初からブートストラップソースの旅。。。

突然、私は、コンテンツの多くのように、それを忘れて、最終的に私は1つを失っていない、資料の冒頭に4節を書いたことがわかりました。違いを書くことは少し私にハング^^

nothing_more_than

公開された55元の記事・ウォン称賛39 ・ビュー80000 +

プライベートの手紙の懸念