nodejsインストール環境構築--gulpインストール

译文:3 w.ydcss.co*m/archives/18〓lesson 6
1.nodejsのインストールパッケージをダウンロードする
nodejsのウェブサイトに行ってソフトウェアをダウンロードします.https://nodejs.org
2.Nodejsをインストールする
Window:直接に次のステップにインストールします.インストールした後WIN+R入力cmdでDOSウィンドウを呼び出して、nodeを入力してインタラクションがあるかどうかを見て、もしないならばシステム変数Pathを調べて、pathを配置します.  Linux:今は実戦がないです.
3.テスト
テストファイルの作成:test.js

var http = require("http"); 
http.createServer(function(request, response) { 
response.writeHead(200, {"Content-Type": "text/plain"}); 
response.write("test nodjs"); 
response.end(); 
}).listen(8899); 
console.log("nodejs start listen 8899 port!"); 

1

,

4

5

,

,

cmdコマンドウィンドウに入り、test.jsファイルの位置node test.jsに入ります.  情報が正常に出力されているかどうか、ブラウザ127.1.0.1:8899正常に印刷されているかどうかを確認してください.  全部あったら、セットアップが成功したと説明します.
4.npmのグローバルパスを設定する
Windows下のNodejs npmパスはappdataです.私たちが希望する経路ではないかもしれません.私たちが指定した経路に変えて管理しやすいです.  cmdで以下のコマンドを実行します.  npm config set cache「D:odejsodeucache」  npm config set prefix「D:odejsodegulobal」  コマンドが無効なら、nodejsのインストールディレクトリに行ってnode_を見つけられます.modulespmpmrcファイルは、このファイルはnpmのuserconfig構成を保存します.  次のように修正すればいいです.  prefix=D:odejsode_global  cache=D:odejs\node_cache
5.グローバルインストールgulp
Node.js command promptを開く  入力コマンド:npm install–g ggggulp  その後、gulp-vを入力し、プロンプトが内部または外部コマンドではない場合は、システム変数pathが配置されていないと説明し、手動でpasthを設定します.アドレスはprefixのアドレスです.
6.ローカルにgulpをインストールする
プロジェクトを設立し、Gulpfile.jsとpackage.jsonファイルを作成します.コマンドnpm install glp–save-devを実行して、ローカルgulpをインストールします.
7.gulpの実施と使用
作業ディレクトリの作成と配布ディレクトリ  作業ディレクトリ:圧縮合併などの処理を経ていないファイル保存ディレクトリです.  配布ディレクトリ:プロジェクトリリースで参照したファイルディレクトリのアドレスです.ここのファイルはgulp圧縮合併などの処理を経て生成されたファイルです.処理後の名前はカスタマイズできます.処理しないでも大丈夫です.未処理ファイル名と同じです.
8.gpl依存パッケージの取り付け
 
 
必要な開発キットをインストールします.

gulp:ストリームベースの自動化構築ツール

glp-browserify:フロントエンドモジュール及び依存管理

glp-concat:ファイル合併プラグイン

glp-react:JSX構文変換ツール

glp-connect:ローカル開発Webサーバ

を構築する.

lodash:一致インターフェース、モジュール化、高性能などの特性を持つJavaScriptライブラリ

reactify:Reactコンパイラ

npm install gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify--save-dev
 
 
生産環境依存パッケージの設置

react:メインフレーム

react-dom:ReactのDOM操作クラス

bootstrap:bootstrapスタイル

 
 

npm install --save react react-dom

bower install --save bootstrap

 
 
gulpプロファイルを書き込むgulpfile.js
 
npmのウェブサイトで対応するプラグインのgulp設定の書き方を見つけられます.私が配置したglpfile.js 129
開発

は、対応するモジュール

を切り分ける.

は、UIコンポーネントとコンテナコンポーネント

を識別する.

は、コンポーネント間の通信方法を学ぶ

.

作文規範と開発細部に注意する.
生産を配置する
product分岐に切り替えてください.
gulpfileファイルを変更します.
 

//  copy  
gulp.task('copy',function(){
    gulp.src('./app/css/*')
    .pipe(gulp.dest('./dist/css'));

    gulp.src('./bower_components/**/*')
    .pipe(gulp.dest('./dist/libs'));

    gulp.src('./*.html')
    .pipe(gulp.dest('./dist'));
});

//     
gulp.task('connect-pro',function(){
    connect.server({
        root:'./dist',
        port:port,
        livereload:true,
    })
});

//  build  
gulp.task('build',['browserify','copy']);

//           
gulp.task('server-pro',['build','connect-pro','watch']);

インデックスを変更する
 

"stylesheet" href="./libs/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="./css/index.css">

<script src="./js/main.js">script>

glp-gh-pagesを使ってgithub pagesに展開する.
glp-gh-pagesプラグインをダウンロードします.
 

npm install --save-dev gulp-gh-pages

glpfileファイルにプロファイルglp-gh-pagesコードを追加します.
 

var ghPages = require('gulp-gh-pages');

gulp.task('deploy', function() {
  return gulp.src('./dist/**/*')
    .pipe(ghPages());
});

 
 
初期化npm bower
 
 

npm init  //  enter，    

bower init //    enter

 
 
git clonehttps://github.com/tsrot/react-zhihu.git
cd react-zhihu
npm install
bower install
gulp server-pro(これはgulpfile.jsで宣言されたサービスです.)
//ブラウザでlocal hostを開く:5000