關於node.js和gulp配置環境問題

關於node.js和gulp配置環境問題

前段時間接觸ajax的時候發現筆記本的配置環境出了問題,很不方便。用apache配置略繁瑣,考慮到不是大型項目,用node.js配置就夠了。查找資料後研究了好久,總是安裝好了,記錄一下步驟,記憶不好以防日後需要。

  • 1.安裝node.j
    在node.js官網根據情況下載(Windows 系統 (.msi) 64位),選擇安裝路徑後一直next下去 ,最後點擊 Finish完成。

  • 2.打開cmd
    開始 》輸入“cmd” ,打開。輸入“path” 查看環境變量是否已安裝了node.js。 然後輸入”node –version”、”npm -version” 查看node.js版本
    這裏寫圖片描述

  • 3.新建存放文件
    先在E盤(任意盤)新建一個“webserver”(任意命名)的文件,然後在裏面新建一個src文件。再src裏面新建5個文件並命名。
    將gulp配置文件package.json、gulpfile.js 等文件下載後放到“webserver”下面。
    gulpfile.js配置文件下載
    這裏寫圖片描述
    然後在cmd輸入“npm install gulp -g” 回車安裝插件。
    這裏寫圖片描述
    安裝之後再輸入npm install回車。
    這裏寫圖片描述
    安裝後,再看下webserver文件裏面會多出一個‘’node_modules”文件,總算安裝成功。
    這裏寫圖片描述

  • 4.打開webserver gulpfile.js文件修改
    先在E盤(任意盤)新建一個“webserver”(任意命名)的文件,然後在裏面新建一個src文件。再src裏面新建5個文件並命名。
    把這個位置的代碼刪掉,改成:

server: {baseDir: './'},//根目錄啓動服務器

看到一個前端博客寫如果沒有打開iis服務器的話就要修改…..emm..沒安裝 跟着貼過去好了

這裏寫圖片描述

5.打開Node.js command prompt
這裏寫圖片描述

輸入 gulp+回車,瀏覽器自動彈出。

這裏寫圖片描述

這時“webserver”下多了一個”dist”文件。

這裏寫圖片描述

配置環境成功。把項目放在src裏面看下

這裏寫圖片描述
總結

1.之前配置環境失敗原因大概就是cmd路徑填寫錯誤和缺失配置文件導致,還有在最後一步輸入gulp的時候把cmd關了導致。

2.關於webserver下關於新建src文件的問題。一開始沒新建 ,項目放在“webserver”下也可以在本地服務器查看到。但如果修改文件後保存,瀏覽器不能自動預覽。 src文件用來放置項目後,修改代碼保存後瀏覽器自動預覽,自動合併壓縮文件放到dist文件下。

發佈了30 篇原創文章 · 獲贊 27 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章