フロントエンドプロジェクトの自動テンプレート

男は私たちのためにほとんどの反復的なタスクを実行するコンピューターを発明しました。 これにより、多くの時間を節約し、最大限の利益を得ることができます。 また、この記事はフロントエンド開発に関するものであるため、この領域には、cssおよびjsプリプロセッサのコンパイル、スプライトアセンブリ、画像の最適化、ファイルの縮小など、多くのタスクがあります。





prepros 、 codekit 、 grunt 、 gulpなどのツールがこれらのタスクの自動化に役立ちます。

リストされている4つのそれぞれの経験がありましたが、次の理由で一息つきました。

• Gulpは、GUIプログラムよりもシステムリソースに対する要求が少なくなります。
• 彼はとても速いです。 一口に比べて、うなり声は遅いです。 とても遅いので、エディターからブラウザーに切り替えてページを更新しましたが、新しいスタイルはまだコンパイルされていませんでした。 Gulpの方がはるかに優れています。
• gulpでタスクを記述する方法は、私にとっては簡単に思えました。

新しいプロジェクトの開始時には、同じ仕事をしなければなりませんでした。gulpと必要なモジュールをインストールし、タスクを書き、プロジェクトのファイル構造を整理し、必要な初期ファイルを作成します。 各プロジェクトで、以前使用したソリューションを適用しました。 したがって、ほとんどの日常的なタスクを自動化し、開発に専念できるまともなセットを集めました。



ある時点で、開発のデータベースを作成し、それに基づいて新しいプロジェクトに作業を迅速に展開することにしました。 そして、 このテンプレートをあなたと共有したいと思います。



このテンプレートは万能薬ではありません。 それぞれに独自のニーズがあり、おそらく最大のメリットを得るには、自分で構成する必要があります。

フードの下には何がありますか？

自動化されたタスク

• スタイラスの編集。
• コンパイルCoffeeScript ;
• Jadeテンプレートのコンパイル。
• スプライトを構築し、それらのスタイルを生成します（以前にこれに関する記事を公開しました ）。
• ベンダープレフィックスをプロパティに追加します。
• cssおよびjsの縮小。
• 画像の最適化。

ファイル構造

プロジェクトの最初のレベルは、 builder



、 src



およびbuilt



フォルダーです。



builder



- gulpfile



タスクと一緒にあるフォルダー。 node



モジュールが置かれ、コンソールのすべてのコマンドを開始する場所。



src



フォルダーにはすべてのプロジェクトソースファイルが含まれ、gulpコマンドが実行されると、 built



フォルダーが自動的に作成および変更されます。

src



フォルダーの内容

• assets
  
  
  
  
  
  
  
  
  • styles
    
    
    
    -プロジェクトのスタイル
  • images
    
    
    
    
    
    
    • design
      
      
      
      -ウェブサイトのデザイン用にデザインされた画像
    • content
      
      
      
      -ページコンテンツで使用される画像
    
    
    
  • scripts
    
    
    
    
    
    
    • local-このプロジェクトの一部として書かれたスクリプト
    • vendor
      
      
      
      -サードパーティライブラリ
    
    
    
  
  
  
• templates
  
  
  
  
  
  
  
  
  • pages
    
    
    
    -ページテンプレート
  • blocks
    
    
    
    -ページが収集されるブロック
  
  
  

どのように機能しますか？

gulpfile.coffee



は、特定のジョブを実行するタスクを記述します。 タスクは、個別にまたはグループで呼び出すことができます。 グループ呼び出しは、最も一般的なユーザーケースです。



すべてのgulpプラグインは、 gulp-load-plugins



プラグインを使用してpackage.json



から自動的にロードされます。 これにより、 gulpfile.coffee



のボリュームがgulpfile.coffee



ます。



ファイルとフォルダーへのすべてのパスは変数に配置され、 config.yml



ファイルに記述されます。

タスク

• sprite
  
  
  
  - config.paths.src.sprites.images.all
  
  
  
  フォルダーにある画像に基づくsprite
  
  
  
  生成。
  
  
• .offee



local
  
  
  
  フォルダーから.offee
  
  
  
  をコンパイルします。
  
  
• vendor
  
  
  
  - vendor
  
  
  
  フォルダーからbuilt
  
  
  
  スクリプトを転送します。
  
  
• stylus
  
  
  
  -編集.styl
  
  
  
  ;
  
  
• images
  
  
  
  - built
  
  
  
  フォルダに写真を転送します。
• jade
  
  
  
  - .jade
  
  
  
  テンプレートのコンパイル。
• autoprefixer
  
  
  
  ベンダープレフィックスを追加します（デフォルト設定）。
• scripts:min
  
  
  
  min-スクリプトの縮小。
• styles:min
  
  
  
  min-スタイルの縮小。
• images:min
  
  
  
  画像の最適化;
• watch
  
  
  
  ファイルの変更を追跡し、必要なタスクを起動します。

タスクグループ

• default
  
  
  
  -テンプレート、スクリプト、スタイルをコンパイルし、スプライトを収集します。
• dev



default
  
  
  
  およびwatch
  
  
  
  タスクが含まれdefault
  
  
  
  。
• minify
  
  
  
  ファイルを圧縮し、 default
  
  
  
  作業後に作成されたイメージを最適化しdefault
  
  
  
  。
• prod
  
  
  
  サーバー上で、またはサーバーにアップロードする前に実行されるタスク。 default
  
  
  
  グループを実行してから、 minify
  
  
  
  実行しdefault
  
  
  
  。

システム要件

• node.js;
• gulp;
• coffee-script-gulpfile.coffeeを実行します。 必要に応じて、 .coffee
  
  
  
  を.js
  
  
  
  変換できます。
  
  

設置

1. node.jsがインストールされていない場合は、 ダウンロードしてインストールします。 node.jsとともに、 npm
   
   
   
   パッケージマネージャーをインストールします。
2. 次に、コンソールにコマンドを入力してcoffee-script
   
   
   
   とgulp
   
   
   
   インストールします（管理者権限が必要です）

    npm i -g coffee-script gulp
         
         
   
           
           
           
         
   
       
           
           
           
         
         
   
           
           
           
         
   
       
        

   
   
   

これらの手順の後、プロジェクト自体の初期化を開始できます。

1. テンプレートを使用してアーカイブをダウンロードして解凍します。
2. コンソールで、 builder
   
   
   
   フォルダーを開き、 npm i
   
   
   
   と入力します。 package.json
   
   
   
   リストされているすべてのモジュールをダウンロードしてインストールするプロセスpackage.json
   
   
   
   進みます。
   
   

インストールが完了すると、コンソールにgulp



と安全に入力でき、 default



タスクグループが機能します。

問題

gulp



起動時にgulp



システムがcoffee-script/register



モジュールが見つからなかったというエラーを表示した場合、NODE_PATH変数を設定する必要があります。これにより、グローバルモジュールがあるシステムに対して明確になります。



ソリューションへのリンク：

• http://stackoverflow.com/questions/9587665/nodejs-cannot-find-installed-module-on-windows
• http://stackoverflow.com/questions/12594541/npm-global-install-cannot-find-module

おわりに

テンプレートは常に更新されます。 近い将来、次の機能を追加する予定です。

• スタイラス用のミックスインキット。
• JSHint;
• jsの連結。
• バウアー。

同様の機能を備えた単調なバージョンを準備する計画もあります。

クイックリンク

• テンプレートリポジトリ-https://github.com/Krekotun/fabium
  
  
• node.js
• ガルプ
• スタイラス
• CoffeeScript
• ヒスイ