作男学習戦闘（1）

イサキの私は書いていない基礎、およびで直接見て公式サイトその上に。チュートリアルの公式ウェブサイトは非常にはっきりしていました。

自分自身でそれをしようとするつもり、それについて読んだ後、それは会社のプロジェクトの現在のニーズに応じている、あなたの手の要件を実践するために持っ以下のとおりです。

プロジェクト構造

gruntProjectルートディレクトリは、htmlページ、少ないドキュメントフォルダ、jssrcのドキュメントフォルダがあります。
以下のドキュメントフォルダの下に、のようないくつかのあまり一般的でない文書があるglobal.less、mixins.less、はvariables.less。

インデックスと同じように、これらの大規模なページを購入し、各セクションの内側に入れ、ドキュメントフォルダが存在します以下の文書、index.lessルートディレクトリに書かれた、少ないし、フォルダ内のドキュメントのインデックス文書を導入しています。

jssrcより外側の層、ここで検討する必要はありません、ドキュメントフォルダの下の各ページが導入され、JS、JQや他のフレームワークとして、それがルートディレクトリにありません。

私たちの需要は、ある404.less、buy.less、index.less、これらのページは、CSS、およびルートディレクトリに圧縮され、圧縮された出力にコンパイルする必要はあまり直接参照必要がcssあまり一般的ながら、加えて、コンパイルする必要がない、ファイルフォルダの下に、文書はそれぞれ、以下のドキュメントでは以下のフォルダだけでなく、コンパイルして出力する必要はありません。それは、CSSを紹介するページを意味し、他の文書としてはあまり依存性が導入されている文書の下で、あなたがコンパイルする必要はありませんフォルダ。とJS文書私たちは、圧縮後のファイルのjsフォルダに出力を圧縮する必要があります。

このように4つのプラグインの合計を使用する必要があります。

以下のプラグインをコンパイルします兵卒-contribのレス
圧縮JSプラグイン：兵卒-contribの-uglify
プラグインのリアルタイム監視：兵卒-contribの-ウォッチ
すべてのプラグインプラグインをロードします。ロード・グラント、タスクを

まず、作成しpackage.jsonた文書を：INIT NPM

その後、プラグインをインストールします。

安装作男-CLI：sudoのNPM -g作男-CLIをインストール
安装作男：NPM -save-devの作男をインストール
安装負荷作男-タスク：NPM -save-devの負荷作男・タスクをインストール
いくつかの他のプラグインがインストール、それらを繰り返しません

そして、書き込みを開始Gruntfile.js：

'use strict';

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt)

    
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            files:['jssrc/*.js','less/**/*.less'],
            tasks:['default']
        },
        uglify: {
            build: {
                expand: true,
                cwd: 'jssrc/',
                src: '*.js',
                dest: 'js/',
                ext: '.min.js',
                extDot: 'last'
            }
        },
        less: {
            options: {
                compress:true
            },
            build: {
                expand: true,
                cwd: 'less/',
                src: ['*.less','!global.less','!mixins.less','!variables.less'],
                dest: 'css/',
                ext: '.min.css',
                extDot: 'last'
            }
        }
    });

    
    grunt.registerTask('default', ['uglify','less']);

};

文書の分析次のとおりです。

1.基本的なフォーマットは：

'use strict';

module.exports = function(grunt) {

    ...

};

2.負荷package.jsondevDependenciesプラグイン：

('load-grunt-tasks')(grunt)

3.構成タスク：

grunt.initConfig({

    ...

})

4.取得package.json（未満この例では）内のパラメータを：

pkg: grunt.file.readJSON('package.json'),

5.設定uglifyタスク：

uglify: {
    build: {
        expand: true,
        cwd: 'jssrc/',
        src: '*.js',
        dest: 'js/',
        ext: '.min.js',
        extDot: 'last'
    }
}

ここで使用するには、ある動的構成つまり、少なくない文書のために、方法が、一致するすべての文書。

拡大：trueに開始動的構成
CWD：パスが下にあるSRC相対パス
SRC：に対する文書、圧縮する必要がCWDのパスを、.jsファイルを表し CWDは、すべてのルートディレクトリにファイルをJS。*（ドキュメントの下にサブjsのフォルダを含みません）
DEST：圧縮jsがパスが相対的にではありません入力されたCWDああ、それはプロジェクトのルートディレクトリからの相対です。
EXT：圧縮後のサフィックスの文書を交換してください。
extDot：。ここで定義された最初のいくつかの期間中にドキュメント名を置き換える開始する最終。、最後の期間の初めからそのように交換すると言うa.b.c.js、である、最後のピリオドを置き換えるために始めた.js交換した部品EXTを。

これの利点は、多くの場合、設定ファイルを変更するのではなく、文書が非常に大きく、開いたときにwatchタスクを、コンピュータのパフォーマンスが大きな課題です。

6.設定lessタスク：

less: {
    options: {
        compress:true
    },
    build: {
        expand: true,
        cwd: 'less/',
        src: ['*.less','!global.less','!mixins.less','!variables.less'],
        dest: 'css/',
        ext: '.min.css',
        extDot: 'last'
    }
}

オプション以下のタスクがセットに圧縮属性をtrueに、それはコンパイル後の圧縮の必要性を表明しました。

同様に、以下の動的構成タスクは、それを使用してuglifyタスクを設定少し異なります。

SRCは除外されたglobal.lee、mixins.less、variables.less、これらのグローバルではなく、文書をコンパイルする必要があります。

7.設定watchタスク：

watch: {
    files:['jssrc/*.js','less/**/*.less'],
    tasks:['default']
}

ファイルの文書の変更を監視するために必要なプロパティ設定、タスク設定ファイルの変更を実行する必要が後タスクプロパティ。

ここでも非常に重要なポイントの知識を使用：/ .jsファイル、すべてのJSファイルのディレクトリを表し含まないドキュメントディレクトリの下のjsサブディレクトリ。 /**/*.Less*を含む、すべての少ないドキュメントディレクトリを表しドキュメントディレクトリの下に以下のサブディレクトリ。

8.登録defaultタスク：

grunt.registerTask('default', ['uglify','less']);

デフォルト定義するために実行されるタスクuglifyタスクとlessタスクを。

そして何うなり声は、文書がより良い圧縮コンパイルされたことを、あなたが見ることができます：

圧縮をコンパイルします

リアルタイム監視モード開き：うなり声ウォッチ、および変更以下JS、リアルタイム圧縮をコンパイルします。

ソースを表示

オリジナル：ビッグボックスイサキ学習戦闘（1）

おすすめ