止まらないフロントエンド、プロセスの自動化

プロセスプロセスは、プロジェクトの開始からパブリッシュまでのプロセスです.フロントエンドでは通常私たちは何をしますか?

切図、すなわち設計原稿から必要な素材を取得し、すべてのフロントエンド開発が切図を要求されるわけではないし、すべてのフロントエンド開発が切図するわけではないが、新しい知識を学ぶ過程を楽しんでください.

テンプレート(html、jade、haml)、スクリプト(javascript、coffeescript)、スタイル(css、less、sass、stylus)ファイルを作成し、基礎となるプロジェクトスケルトンを構築します.

ファイル(jade、coffeescript、less、sass...)コンパイル

実行試験例

コード検出

デバッグコード

を削除

静的リソースの統合と最適化

静的リソースhash計算による指紋化

導入テスト環境

階調公開現網

各プロセスのプロセス単位をツール化し,タスクとして抽象化する.JavaScriptコード圧縮プロセスをツール化し、UglifyJSはタスクを具体的に実行するツールであり、CSSコード圧縮器CleanCSSはタスクを具体的に実行するツールである.ツール文化はほとんど大プラットフォームのインターネット会社が共有している特質であり、ツール文化がGoogleやFacebookのようなインターネット会社の急速な発展を駆動しているのか、それとも急速な発展の必要性を含めてツール文化を普及させているのかは確定できないが、ツール文化は少なくないことが明らかになった.Facebookの2番目の中国籍エンジニアの王淮さんの本にも言及されています.当時、彼をFacebookの総監黄易山に招聘したのは、内部ツールに対する最も有力な提唱者でした.彼は、会社が最高の人材をツール開発の1つに置くことを極度に提案しました.ツールができたので、仕事の半分の効果を達成することができ、すべての人の効率が向上することができます.エンジニアだけではありません
テンセントでは、ツール文化は明確に指摘されていないが、大プラットフォーム会社のツール化に対する堅持は一致している.テクノロジー製品もDon't make me thinkの方法でベストプラクティスを普及させる必要があります.要するに、経験ではなくツールに頼る.自動化プロセスタスクツール化は自動化プロセスの基礎であり、タスクドライバGruntを聞いたことがあると思います.Gruntは開発者がタスクユニットを接続することを助け、例えばコードコンパイルTaskが実行した後に検出Taskを実行し、Taskが実行した後に圧縮Taskを実行する.GruntはNodeに基づいているが.jsプラットフォームですが、その位置づけは汎用タスクマネージャであり、汎用はより高い学習と実施コストを意味することが多いです.Web開発分野に専念しているテンセントはMod.jsはフロントエンド自動化を実施する、Mod.jsはWeb開発自動化プロセスの実施コストを効果的に簡素化する.Modを実施する.js 　　Mod.jsは単純なタスクドライバではなく、Webフロントエンド開発でよく使われるツールセットを内蔵し、フロントエンドの使用シーンの80%をカバーし、さらに20%はModを通過することができる.jsのプラグインメカニズムを拡張します.出会いjsはNPMによって最新バージョンをインストールすることができ、[Node.js]のプログラミング世界に来たときにNPM、現在のModが同時に付属しています.jsの最新バージョン0.4.x要求Node.js要件>=0.8.0:

$ npm install modjs -g

-gパラメータは、Mod.jsはグローバルにインストールされ、modコマンドはsystem path内にあり、どのディレクトリでもModを起動するのに便利です.jsタスク.知り合い.jsはModfileを通過する.jsファイル駆動タスク実行、手動でModfileを作成できます.jsファイルは、テンプレートからModfileを初期化することもできます.jsファイル:

$ mod init modfile

Modfile.jsはPlain Node Moduleであり、Runnerオブジェクトによってタスクの具体的な実行手順を記述します.

//   Runner  module.exports = {}

非同期構成の場合は、コールバックモードでRunnerオブジェクトを渡すことができます.

module.exports = function(options, done){
    setTimeout( function(){
        //   Runner  
        var runner = {};
        done(runner);
    }, 1000)
} 

通常Runnerオブジェクトの全体像を見ると、

module.exports = {
    version: ">=0.4.3",
    plugins: {
        pngcompressor : "mod-png-compressor",
        compress      : "grunt-contrib-compress"
    },
    tasks: {
        asset: "asset",
        online: "online_dist",
        offline: "offline_dist",
        offlinePackage: "{{offline}}/package.zip",
        rm: {
            online: {
                dest: "{{online}}"
            },
            offline: {
                dest: "{{offline}}"
            }
        },
        replace: {
            src: './js/**/*.js',
            search: "@VERSION",
            replace: require('./package.json').version
        },
        build: {
            options: {
                src: ["*.html"]
            },
            online: {
                dest: "{{online}}",
                rev: true
            },
            offline: {
                dest: "{{offline}}",
                rev: false
            }
        },
        cp: {
            options: {
                src: ["./img/**"]
            },
            online: {
                dest: "{{online}}/img/",
                rev: true
            },
            offline: {
                dest: "{{offline}}/img/",
                rev: false
            }
        },
        pngcompressor: {
            src: "./img/**/*.png"
        },
        compress: {
            dist: {
                options: {
                    archive: '{{offlinePackage}}'
                },
                // includes files in path
                files: [
                    {
                        expand: true,
                        cwd: '{{online}}/',
                        src: ['*.html'],
                        dest: 'qq.com/web'
                    },
                    {
                        expand: true,
                        cwd: '{{online}}/img',
                        src: ['**'],
                        dest: 'cdn.qq.com/img'

                    }
                ]
            }
        }
    },
    targets: {
        default: ["rm", "pngcompressor", "replace", "build", "cp"],
        offline: ["default", "compress:dist"]
    }
} 

versionは依存するModを記述する.jsバージョン

pluginsは依存するプラグインを記述し、Modをサポートする.jsプラグインとGruntプラグイン

tasksは、異なるカテゴリのタスクの実行

を記述する.

targetsは、タスクを実行する必要があるセット

をターゲットとする異なる組合せのターゲットを記述する.
Mod.jsのコンフィギュレーション項目の追及は極めて簡単で、JavaScript構文が分からなくてもコンフィギュレーションと修正コンフィギュレーションを理解することができます.modコマンドを実行するとき、Mod.jsは現在のディレクトリの下にModfileが存在するかどうかを検索する.jsファイル.Modfileが見つかったらjsファイルの場合、Mod.jsはModfileを読み込む.js内の構成情報は、構成Modがあることを認識する.jsプラグインは、インストールされていないプラグインが自動的にインストールされ、プラグインはNPMにパブリッシュされたパッケージだけでなく、ローカルのカスタムタスクであってもよい.　　Mod.jsがプラグインをロードする方法は、Nodeのrequireメカニズムを介して、露出したexportsを実行する.run、これはMod.js内蔵タスクの全く同じメカニズム.コマンドラインでは、通常modを実行する際にModfileを指定する必要があります.jsの特定のターゲットがありますが、defaultという名前のターゲットまたは構成に独立したターゲットが1つしかない場合、ターゲットの指定はオプションです.Mod.jsは、一意の存在またはdefaultのターゲットを自動的に識別します.

targets: {
    dist: ["rm", "cp"]
} 

     mod dist$ mod

defaultターゲットが設定されているシーン:

targets: {
    default: ["rm", "cp"],
    other: ["compress"]
} 

     mod default$ mod

詳細タスクは、構成例から説明する特定の実行カテゴリです.

tasks: {
    min: {
        src: "./js/*.js"
    }
} 

以上、圧縮が必要なファイル:jsディレクトリのすべてのjsファイルを記述するファイル圧縮のminカテゴリタスクを構成しました.srcはunix glob構文をサポートして入力ファイルセットを記述し、そのマッチング規則は以下の通りである:マッチング:

"*"は、0文字以上の

文字に一致します.

“?” 1文字に一致する

“!” それ以外の文字

に一致

"[]は、指定範囲の文字に一致します.たとえば、[0-9]は0-9[a-z]のアルファベットa-z

に一致します.

"{x,y}"は、a{d,c,b}eがade ace abe

に一致するように、指定されたグループの項目に一致する.
例:

c/ab.min.js =>  c/ab.min.js
*.js        =>  a.js b.js c.js
c/a*.js     =>  c/a.js  c/ab.js c/ab.min.js
c/[a-z].js  =>  c/a.js c/b.js c/c.js
c/[!abe].js =>  c/c.js c/d.js
c/a?.js     =>  c/ab.js c/ac.js
c/ab???.js  =>  c/abdef.js c/abccc.js
c/[bdz].js  =>  c/b.js c/d.js c/z.js
{a,b,c}.js  =>  a.js b.js c.js
a{b,c{d,e}}x{y,z}.js  => abxy.js abxz.js  acdxy.js acdxz.js acexy.js acexz.js 

タスクがdestを構成していない場合、デフォルトでは入力ファイルの兄弟ディレクトリの下で出力されます.min接尾辞のファイル:

uglifyjs Minifying ./js/unminify.js -> js/unminify.min.js
uglifyjs Original size: 1,393. Minified size: 449. Savings: 944 (210.24%)

内蔵のminタスクは、JavaScript、CSS、HTMLの3つのファイルカテゴリの圧縮をサポートし、uglifyjs、cleancss、htmlminfierタスクのエージェントです.minはファイル接尾辞を識別することによって具体的なタスクの配布を行う.したがってminタスクのsrcオプションは、具体的な接尾辞を指定する必要があります.通常、各カテゴリのタスクはsrcとdestをサポートし、Mod.jsは実際のプロジェクトでよく見られるシーンと結びつけて、destは往々にしてオプションであり、上述のminタスクのデフォルトのdestは現在のディレクトリの下で出力される.min接尾辞のファイルであり、接尾辞名は通常のsuffixオプション構成をサポートします.不可欠なプラグインメカニズムMod.jsは2種類の生態系のプラグインをサポートする:Mod.jsとGrunt.プラグインの構成は、Runnerオブジェクトの下にあります.

plugins: {
    // Mod.js NPM   
    sprite: "mod-stylus",
    // Mod.js     
    mytask: "./tasks/mytask"
    // Grunt NPM   
    compress: "grunt-contrib-compress"
} 

サービス化Modの実施方法を理解した.jsが自動化する場合、ツールのレベルにとどまるだけで、どのようにしてさらに向上させますか?サービスがツールより優れているという事実を理解します.それをサービスにカプセル化する方法は、ユーザーがModをインストールする必要はありません.jsは、コマンドを実行する必要はなく、コードをコミットするだけで、中間のプロセスに注目する必要はなく、最終的に継続的に構築された結果をユーザーにフィードバックします.これは次のステップで改善し、アクセスメカニズムを確立し、ツールをサービスの形式でプロセスに完全に溶け込ませる必要があります.
学习の先端の学友は注意しました!!!学習過程で何か問題があったり、学習資源を手に入れたい場合は、フロントエンド学習交流群461593224に参加して、一緒にフロントエンドを勉強しましょう.