sublimeの構成、nodejsは静的なサーバを構築します.

6344 ワード
前書き:最近はwebstormは本当にメモリを食べ過ぎたと思います.毎回開けても遅く、パソコンの熱もよくないので、sublimeを捨てる決心をしました.しかしsublimeの配置の順調さを本当に一時半会のことではないです.これからは私の配置過程を記録します.主に三歩に分けてsublimeを手に入れることができます.
  • テーマとプラグインをインストールします.ここでまず最初にすることは、パッケージマネージャをインストールすることです.あれば、私たちは簡単に様々なプラグインとテーマをダウンロードしてインストールすることができます.私はsublime text 3を使っています.2の学生は自分で公式サイトでコードを調べてください.ctrl+shift+pを使ってコンソールウィンドウを開けて、下記のコードを
    import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
    に貼り付けて車に戻ります.後でsublimeを消して再起動したら、ctrl+shift+pを使ってコントロールパネルを開けて、packageを入力します.
    Package controlのインストールに成功しました.
    まずテーマをインストールしてもいいです.デフォルトのテーマもいいですが、コードの小さい怪人としてはどうしてこの配色が満足できますか?だからテーマを変えて、まずホームページで自分の好きなテーマを探して、名前を書いて、sublimeに戻りますか?それともctrl+shift+pとコントロールパネルを開けて、pcipを入力します.英語が上手な学生はカバンを取り付けるという意味が分かります.回車は確定します.後でパチンコをして、先ほど書いたテーマを入力してください.回車してください.後でパチンコの中にこのようなコードがあります.
    "color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme",
"theme": "Spacegray Eighties.sublime-theme"
    トップメニューバーのpreference-Stetting-userを開いて、先ほどコピーしたコードを貼り付けて保存します.ここでは例を挙げるだけです.私が使っているのはThe me-DarkMaterialです.とても科学的な感じがします.フルスクリーンの後はこうです.
    materialインターフェース
    インストール方法は上と同じです.好きならインストールしてみてもいいです.次にプラグインをインストールすることができます.以下はいくつかの常用プラグインです.安転テーマと似ています.配置ファイルを修正する必要があります.必要ではないものもあります.ここで詳しく説明しないでください.列に並べば、みんな自分でpackage controlでインストールをダウンロードしてください.
  • AdvincdNewFile:快速新規作成ファイル
  • sidebar Enbancements:サイドバーを強化する
  • sublimelinter:シンタックスチェック
  • emmet:快速作成html/css
  • git:バージョン制御
  • BracketHighlighter:符号高亮
  • ColorPicker:スポイトを使って色を変える
  • markdown edingとmarkdown previewの作成とプレビューMD
    • を実現しました.
  • AutoFileName:ファイルパス自動提示
  • Terminal:sublime textでコマンドライン
    • を直接開きます.
  • csscomb:css属性並べ替え
  • Html-css-js prettify:html/css/jsコードフォーマット
    • もちろん以上は大容量のプラグインの中の一部です.一人は自分の必要に応じてプラグインをインストールします.
  • プラグインをインストールしたらすっきりしますか?まだできません.sublimeで開けます.ファイルをブラウザでプレビューすると、ajaxから受信できないということです.webstormと違って、ポートを開けました.ですから、静的なだけでなく、構成が必要です.ここでは、静的なファイルのワークライブラリをローカルサーバの下に置く考えを提供します.sublimeの中にプレビューを配置してパスを開けばいいです.ここでnodejsを使ってデモンストレーションを行います.
  • まずもちろんnodejsをダウンロードしました.どのようにwindowsでダウンロードしてnodejsをインストールしますか?ここをクリックして配置をインストールしてください.その後、あなたのワークショップの中に新しいフォルダを作ってserverといいます.Eディスクをワークライブラリとして使っていますので、直接に新しいフォルダE:/server(このserverフォルダはすでにgithubにアップロードしました.みんなは修正をダウンロードして使ってもいいです.中には後述のbatプログラムも含まれています.)を作成して、三つのjsファイルap.jsを作成します.サーバーを作成し、8000ポートを待ち受けます.http要求経路及びrequest要求、reponse返信をroute.js(処理ルート)route.js 
      var http = require("http");
  var url = require("url");
  var router = require("./router").router;
  var port = 8000;

  var server = http.createServer(function(request,response){
      var pathname = url.parse(request.url).pathname;
      router(pathname,request,response);
  });

  server.listen(port);

  console.log("Server running at :localhost://"+port);
    に伝達し、ここでルーティングするのは、要求経路がローカルに存在するかどうかを主に判断し、存在しない場合は404 not foundに戻る.ここでヘッダ情報を返すためにファイルタイプを提供しますので、mime.jsマップテーブルを追加します.Eディスク全体を作業ライブラリとして使用していますので、realPath=pathnameをE:/workspace/下に置くなら、realpath="workspace"を確定した後、cmdを開いてserverフォルダを開いて、node apを入力して実行します.コンソール出力の場合、Server running at:localhost://8000;プログラムの実行が成功したということです.E:ディスクの下にindex.ファイルを置いて、ブラウザに住所local hostを入力してください.8000/車を返すと、このページがブラウザに表示されます.これまでローカルの静的サーバーはすでに構築されました.nodejsのより複雑な機能については、あなたと一緒に探しに行きます.
  • 最後のステップは、sublimeファイルショートカットキーを設定してブラウザのプレビューを開きます.まず、前述のプラグインのサイドバー強調ツールプラグイン「SideBarEnhancments」をインストールしたことを確認します.インストールが完了したら、デフォルトでブラウザを開いて「Preference-」Package Settings-->Side Bar->Settings Userを開きます.開いているファイルに
    • を追加します.
      var path = require("path");
  var fs = require("fs");
  var mime = require("./mime").types;

  function router (pathname, request, response) {
      if(pathname == "/"||pathname.substring(0,6) == "/index"){
          pathname = "/index.html";
      }
      var realPath = pathname; //            
      fs.exists(realPath, function(exists) {
          if(!exists) {
              response.writeHead(404, {"Content-Type":"text/plain"});
              response.write("404 not found");
              response.end();
          }
          else {
              fs.readFile(realPath, "binary", function(err, file) {
                  if(err) {
                      response.writeHead(500, {"Content-Type":"text/plain"});
                      response.end(err);
                  }       
                  else {
                      var ext = path.extname(realPath);
                      ext = ext ? ext.slice(1):'unknown';
                      var contentType = mime[ext]||"text/plain";
                      response.writeHead(200,{"Content-Type":contentType});
                      response.write(file,"binary");
                      response.end();
                  }
              })
          }
      })
  };
  exports.router = router;
    デフォルトのブラウザはリストのいずれかであってもよい.ここで私が選んだのはchromeの次のステップであり、sidebarenhancmentsにデフォルトのlocalhostディレクトリを追加します.サイドバーの任意のドキュメントでマウスの右ボタンをクリックして、「project-edit prew urls」を選択します.弾き出したファイルに以下の内容を追加します.
      {
      "default_browser": "chrome" //       : firefox, aurora,    chrome, canary, chromium, opera, safari
  }
    ここの外の「E:/」はあなたのプロジェクトのディスク中のパスです.私のプロジェクトはすべて直接Eディスクの下に置いていますので、直接E:/です.最後のステップは、ブラウザに熱キーを結びつけるために、sulimeで「reference-」というPackage Settings-->Side Bar-->key Bindings-Userを開いたファイルに下記の内容を追加します.
    {
    "E:/":{
        "url_testing": "http://localhost:8000/",
        "url_production": "http://115.159.55.211:8000/"
          }
}
    ここで、私達の静的なサーバーとsublimeはもう配置済みです.新しいプログラミングの旅を始めましょう.
    nodejsが同じサーバに配置して同時に二つ以上のサービスを実行している場合、一つのサービスユーザーが登録したらもう一人のユーザーを押しつぶす問題があります.