nodejs安裝環境搭建--gulp安裝
原文:3w.ydcss.co*m/archives/18#lesson6
1. 下載nodejs安裝包
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
- 2
- 3
- 4
- 5
- 6
- 7
進入cmd命令視窗,進入test.js檔案的位置node test.js
看看是否有資訊正常輸出和瀏覽器127.0.0.1:8899看是否有正常的列印。
如果都有,說明安裝配置成功。
4. 配置npm的全域性路徑
Windows下的Nodejs npm路徑是appdata,可能不是我們想要的路徑,可以改成我們指定的路徑方便管理。
在cmd下執行以下命令
npm config set cache “D:\nodejs\node_cache”
npm config set prefix “D:\nodejs\node_global”
如果命令無效,可以去nodejs的安裝目錄中找到node_modules\npm\npmrc檔案,這個檔案存放npm的userconfig配置。
修改如下即可:
prefix = D:\nodejs\node_global
cache = D:\nodejs\ node_cache
5. 全域性安裝gulp
開啟Node.js command prompt
輸入命令:npm install –g gulp
然後輸入gulp -v,如果提示不是內部或外部命令,說明沒有配置系統變數path,手動去配置pasth,地址是prefix的地址。
6. 本地安裝gulp
建立專案,建立Gulpfile.js和package.json檔案。執行命令npm install gulp –save-dev,安裝本地gulp。
7. gulp的實施與使用
建立工作目錄與釋出目錄
工作目錄:即沒有經過壓縮合並等處理的檔案存放目錄。
釋出目錄:即專案釋出所引用的檔案目錄地址,這裡的檔案是經過gulp壓縮合並等處理後生成的檔案,處理過後的名字可以自定義,也可以不處理即與未處理檔名相同。8.安裝gupl依賴包
安裝必要的開發工具包
npm install gulp gulp-browserify gulp-concat gulp-react gulp-connect lodash reactify --save-dev
- gulp :基於流的自動化構建工具
- gulp-browserify :前端模組及依賴管理
- gulp-concat :檔案合併外掛
- gulp-react :JSX語法轉化工具
- gulp-connect :構建本地開發Web伺服器
- lodash :一個具有一致介面、模組化、高效能等特性的 JavaScript 工具庫
- reactify :React 編譯器
安裝生產環境依賴包
- react :主要框架
- react-dom :React的DOM操作類
- bootstrap :bootstrap樣式
npm install --save react react-dom bower install --save bootstrap
寫入gulp配置檔案gulpfile.js
你可以在npm的網站上找到相應外掛的gulp配置寫法。我配置的gulpfile.js129
開發
- 切分相應的模組
- 分清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']);
修改index.html引用目錄
<link rel="stylesheet" href="./libs/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="./css/index.css"> <script src="./js/main.js"></script>
使用gulp-gh-pages部署到github pages
下載gulp-gh-pages外掛
npm install --save-dev gulp-gh-pages
在gulpfile檔案中新增配置gulp-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 clone https://github.com/tsrot/react-zhihu.git
cd react-zhihu
npm install
bower install
gulp server-pro (這個是在gulpfile.js中宣告的服務)
//用瀏覽器開啟 localhost:5000