使用gulp搭建一個傳統的多頁面前端項目的開發環境

alighters 發布于2019-08-22 18:47 / 2922人閱讀

摘要：簡介使用搭建一個傳統的多頁面前端項目的開發環境支持編譯支持支持開發環境和打包生成支持文件變動自動刷新瀏覽器，是熱更新改動無需刷新瀏覽器即可更新支持新增文件沒無需重啟，即可改動自動刷新瀏覽器支持命令生成雪碧圖和對應支持，使用的插件是支持

gulp-easy github 1、簡介

支持pug scss es6編譯支持

支持開發環境和打包生成sourceMap

支持文件變動自動刷新瀏覽器，css是熱更新（css改動無需刷新瀏覽器即可更新）

支持新增文件沒無需重啟gulp，即可改動自動刷新瀏覽器

支持命令生成雪碧圖和對應css

支持eslint，使用的eslint插件是eslint-config-alloy

支持打包html，css，js圖片壓縮，css中小圖片轉base64

支持css，js文件版本hash值，文件無變動則版本hash不會改變，更好利用緩存

支持html中的css，js，img路徑添加cdn域名前綴，css中的圖片鏈接建議使用相對路徑

支持代理，便于跨域調試

2、如何使用 2.1 下載項目

（1） git clone https://github.com/lfyfly/gulp-easy.git或者下載 zip包

（2）刪除項目下的因此目錄.git文件夾，這是我的commit記錄，所以刪除

（3）npm install 安裝依賴

（4）npm run dev

2.2 命令 npm run dev

進入開發模式

npm run build

打包命令

npm run start

打包并且以dist為根目錄開啟服務器查看效果

npm run sp

把根目錄下的sprites文件夾下的子目錄內的所有文件夾中的png和jpg的圖片，以子文件夾目錄為單位生產雪碧圖，文件名為子目錄名

npm run lint

eslint檢測

npm run fix

eslint修復

3、約定的目錄

src是源碼目錄，可以通過config.srcPath進行配置，以下src只目錄只是個例子，代表源碼目錄

3.1 src/static

靜態文件目錄

3.2 src/static/_vendor

第三方js，css，iconfont等

3.3 src/_scss

scss模塊目錄，里面的.scss文件不會被多帶帶編譯成css文件

3.4src/_pug

pug模塊目錄，里面的.pug文件不會被多帶帶編譯成html文件

4.5 src/_modules

該目錄里面的.pug,.scss文件不會被多帶帶編譯成html文件

4、功能配置文件

根目錄下的config.js

module.exports = {
  srcPath: "src",
  pug: true,
  scss: true,
  babel: true,
  tmpPath: "node_modules/__tmp__",
  build: {
    htmlmin: true,
    cssmin: true,
    jsmin: true,
    base64: 10 * 1024, // (bytes) 使用css中圖片使用相對路徑，否者無效
    cssSourcemap: true,
    jsSourcemap: true,
    cdn: "http://your/cdn/url/",
    versionHash: true, // 版本hash
  },
  proxyTable: {
    "/api": "http://localhost:3000",
    "/hehe": {
      target: "http://localhost:3000",
      pathRewrite: {
        // 地址重寫
        "^/hehe": "/api"
      }
    }
  }
}

5、功能配置項詳解

如不需要使用某個配置項目，直接將其注釋即可

srcPath

配置目錄源文件目錄，默認為"src"

pug

值為true時，會開啟對src目錄內所有的.pug文件（除src/_pug/外）編譯成html

src/_pug作為pug的模塊目錄，不會被多帶帶編譯為html文件

scss

值為true時，會開啟對src內所有的.scss,.sass文件（除src/_scss外）編譯成scss

src/_scss/作為scss的模塊目錄，不會被多帶帶編譯為css文件

babel

值為true時，會開啟對src目錄內所有的.js文件（除src/static/vendor/外）編譯成es5

babel配置文件，根目錄下.babelrc文件

tmpPath

默認值為 "node_modules/__tmp__"

npm run dev作為.pug，.scss，.js文件編譯的臨時文件目錄，和src同為靜態文件目錄，且優先級高于src目錄

browserSync.init({
    server: {
      baseDir: [config.tmpPath, "src"],
    },
    middleware,
    port: 9000,
    online: false
  })

編譯后文件訪問：src/static/public/public.scss在html的訪問路徑為/static/public/public.css

每次運行npm run dev config.tmpPath都會被清理

打包配置項

config.build	描述
htmlmin	值為true時開啟html壓縮
cssmin	值為true時開啟css壓縮
jsmin	值為true時開啟js壓縮
base64	Number類型，單位（bytes），當css圖片大小小于該值時將轉base64 css中圖片地址必須為相對路徑才會生效
cssSourcemap	值為true時，生成cssSourcemap文件
jsSourcemap	值為true時，生成jsSourcemap文件
cdn	值為你的cdn地址
versionHash	值為true時，生成css js文件版本hash值
proxyTable	代理配置，http-proxy-middleware

proxyTable配置實例

  proxyTable: {
    "/api": "http://localhost:3000",
    "/hehe": {
      target: "http://localhost:3000",
      pathRewrite: {
        // 地址重寫
        "^/hehe": "/api"
      }
    }
  }

6、項目目錄構建示例 6.1 Deom-0 見src目錄

使用html,css,js構建項目

6.2 Deom-1 見src-1目錄

使用pug(可選用),scss,js構建項目
將config.srcPath值設為src-1即可切換到該項目

7、其他 7.1 模塊化？

推薦使用sea.js或require.js進行模塊管理

7.2 為什么不在gulp中配置eslint？

推薦使用瀏覽器插件進行提示，還可以配置保存時自動修復eslint

7.3 js中如何判斷是否為開發模式

// 當前環境為開發環境
var isDev = !!document.getElementById("__bs_script__")

注意： isDev只能在body標簽內的js中這樣獲取，或者在DOMContenLoaded或load事件回調中初始化 isDev

云服務器 GPU云服務器前端開發環境搭建 java開發環境的搭建 php開發環境的搭建 java 開發環境的搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96203.html

從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

call_me_R 2019-08-23 13:43 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

wzyplus 2019-08-02 12:08 評論0 收藏0
從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目

摘要：從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后，需要一個版本控制系統來管理源代碼。從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種：選擇現成的項目模板、自己搭建項目骨架。 ...

aristark 2019-08-29 17:24 評論0 收藏0
使用gulp搭建前端構建工具

摘要：今天跟大家分享的是關于目前自己的公司的項目優化中所使用到的構建工具。在進行基礎鞏固的基礎上，使用構建工具可以在開發的過程中進行部分自動化構建，如對頁面的監聽，對樣式的編譯，對代碼的壓縮與打包。在使用之前，要先對所需要的依賴進行安裝。 Why？今天跟大家分享的是關于目前自己的公司的項目優化中所使用到的gulp構建工具。目前公司對產品的優化決定采用VueJs來進行單頁面開發，無疑這種新的...

_Zhao 2019-08-20 15:45 評論0 收藏0