gulp+nginx-フロントエンド自動構築ツール

codeEasyとは?

codeEasyはGulpベースのフロントエンド自動化構築ツールで、フロントエンド開発者がコードをより速く編集し、gulpの監視機能により、ファイルの変化をリアルタイムで監視し、更新することができます.现在codeEasyはhtml圧縮、css圧縮、sass、CSSに接頭辞、精霊図、js圧縮を自動的に追加しています.

準備作業

まず、このマシンにnodeをインストールする必要があります.js(https://nodejs.org/en/download/)、インストールに成功したらgithubに行って本プロジェクトをクローンすることができます(https://github.com/yangzhennupt/codeEasy).プロジェクトclone完了後、プロジェクトルートディレクトリでCMDを開き、npmを淘宝ミラーに変換し、以下のコマンドを入力します.npm install -g cnpm --registry=https://registry.npm.taobao.org
後でnpmコマンドの代わりにcnpmを使えばよい.

本番

プロジェクトルートディレクトリでcmdを開き、cnpm installを入力すると、本プロジェクトの依存を自動的にインストールできます.
インストールに成功したら、gulp devを入力して構築を開始します.ルートディレクトリがbuildディレクトリを生成していることがわかります.その後、nginxを使用してローカル開発サービスを行うことをお勧めします.
nginxダウンロードアドレスhttp://nginx.org/en/download.html
ダウンロード後、ディスクに解凍し、/nginx/conf/nginxを開きます.conf、以下のnginx構成の変更を行います
location/{root D:codeEasybuild;//buildディレクトリindex index.html index.html.html
修正が完了したらnginxをダブルクリックします.exeインタフェースが点滅していることに気づき、ブラウザを開きlocalhost/demoを入力します.html、ハロー、codeEasyを見たら、おめでとうございます.構成に成功しました.

いくつかの注意点:

1.ディレクトリ构造:プロジェクトコードはsrcの下に、htmlはviewの中に、アイコンはimagesの中に置いて、マルチレベルのディレクトリをサポートして、引用する时buildの経路を书くことに注意して、仕事のプロジェクトの中に入れてbuildディレクトリの中のコードを入れるだけでいいです.
2.gulpはsrc/images/の下にある画像を自動的に検出し、精霊図を生成するとともに、精霊図に関するスタイルsprite.cssは/assets/images/ディレクトリの下にあり、例えば「subBtn」と命名されたアイコンがあれば、そのcssクラスは「である.icon-subBtn’は、自動的に生成されるクラスがアイコンの幅を定義しています.行内の要素を使用する場合は、ブロックまたはinline-blockにするには、クラスを追加するだけです.(具体的にはdemo.htmlを参照)
3.生成するjsファイルは圧縮され、元のものに接尾辞を付ける.min’は、jsを引用する際に注意が必要です.
4.メーカーの接頭辞を書く必要はありません.中にはすでにプラグインが入っています.
5.新しい機能を追加する必要がある場合は、/gulp/tasks/ダウンロードで自分でタスクを作成し、watch.js,develop.jsに対応するタスクを追加すればいいです.
6.gulp cleanコマンドは、buildディレクトリの削除を支援します.
プロジェクトのパス:https://github.com/yangzhennupt/codeEasyようこそstar