亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

使用gulp搭建一個(gè)傳統(tǒng)的多頁(yè)面前端項(xiàng)目的開(kāi)發(fā)環(huán)境

alighters / 2978人閱讀

摘要：簡(jiǎn)介使用搭建一個(gè)傳統(tǒng)的多頁(yè)面前端項(xiàng)目的開(kāi)發(fā)環(huán)境支持編譯支持支持開(kāi)發(fā)環(huán)境和打包生成支持文件變動(dòng)自動(dòng)刷新瀏覽器，是熱更新改動(dòng)無(wú)需刷新瀏覽器即可更新支持新增文件沒(méi)無(wú)需重啟，即可改動(dòng)自動(dòng)刷新瀏覽器支持命令生成雪碧圖和對(duì)應(yīng)支持，使用的插件是支持

gulp-easy github 1、簡(jiǎn)介

使用gulp搭建一個(gè)傳統(tǒng)的多頁(yè)面前端項(xiàng)目的開(kāi)發(fā)環(huán)境

支持pug scss es6編譯支持

支持開(kāi)發(fā)環(huán)境和打包生成sourceMap

支持文件變動(dòng)自動(dòng)刷新瀏覽器，css是熱更新（css改動(dòng)無(wú)需刷新瀏覽器即可更新）

支持新增文件沒(méi)無(wú)需重啟gulp，即可改動(dòng)自動(dòng)刷新瀏覽器

支持命令生成雪碧圖和對(duì)應(yīng)css

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

支持打包html，css，js圖片壓縮，css中小圖片轉(zhuǎn)base64

支持css，js文件版本hash值，文件無(wú)變動(dòng)則版本hash不會(huì)改變，更好利用緩存

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

支持代理，便于跨域調(diào)試

2、如何使用 2.1 下載項(xiàng)目

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

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

（3）npm install 安裝依賴

（4）npm run dev

2.2 命令 npm run dev

進(jìn)入開(kāi)發(fā)模式

npm run build

打包命令

npm run start

打包并且以dist為根目錄開(kāi)啟服務(wù)器查看效果

npm run sp

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

npm run lint

eslint檢測(cè)

npm run fix

eslint修復(fù)

3、 約定的目錄 
src是源碼目錄，可以通過(guò)config.srcPath進(jìn)行配置，以下src只目錄只是個(gè)例子，代表源碼目錄
3.1 src/static

靜態(tài)文件目錄

3.2 src/static/_vendor

第三方j(luò)s，css，iconfont等

3.3 src/_scss

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

3.4src/_pug

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

4.5 src/_modules

該目錄里面的.pug,.scss文件不會(huì)被多帶帶編譯成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中圖片使用相對(duì)路徑，否者無(wú)效
    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、功能配置項(xiàng)詳解 
如不需要使用某個(gè)配置項(xiàng)目，直接將其注釋即可
srcPath

配置目錄源文件目錄，默認(rèn)為"src"

pug

值為true時(shí)，會(huì)開(kāi)啟對(duì)src目錄內(nèi)所有的.pug文件（除src/_pug/外）編譯成html

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

scss

值為true時(shí)，會(huì)開(kāi)啟對(duì)src內(nèi)所有的.scss,.sass文件（除src/_scss外）編譯成scss

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

babel

值為true時(shí)，會(huì)開(kāi)啟對(duì)src目錄內(nèi)所有的.js文件（除src/static/vendor/外）編譯成es5

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

tmpPath

默認(rèn)值為 "node_modules/__tmp__"

npm run dev作為.pug，.scss，.js文件編譯的臨時(shí)文件目錄，和src同為靜態(tài)文件目錄，且優(yōu)先級(jí)高于src目錄

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

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

每次運(yùn)行npm run dev config.tmpPath都會(huì)被清理

打包配置項(xiàng)
config.build 描述
htmlmin 值為true時(shí)開(kāi)啟html壓縮
cssmin 值為true時(shí)開(kāi)啟css壓縮
jsmin 值為true時(shí)開(kāi)啟js壓縮
base64 Number類型，單位（bytes），當(dāng)css圖片大小小于該值時(shí)將轉(zhuǎn)base64
css中圖片地址必須為相對(duì)路徑才會(huì)生效
cssSourcemap 值為true時(shí)，生成cssSourcemap文件
jsSourcemap 值為true時(shí)，生成jsSourcemap文件
cdn 值為你的cdn地址
versionHash 值為true時(shí)，生成css js文件版本hash值
proxyTable 代理配置，http-proxy-middleware
proxyTable配置實(shí)例 
  proxyTable: {
    "/api": "http://localhost:3000",
    "/hehe": {
      target: "http://localhost:3000",
      pathRewrite: {
        // 地址重寫
        "^/hehe": "/api"
      }
    }
  }
6、項(xiàng)目目錄構(gòu)建示例 6.1 Deom-0 見(jiàn)src目錄

使用html,css,js構(gòu)建項(xiàng)目

6.2 Deom-1 見(jiàn)src-1目錄

使用pug(可選用),scss,js構(gòu)建項(xiàng)目
將config.srcPath值設(shè)為src-1即可切換到該項(xiàng)目

7、其他 7.1 模塊化？

推薦使用sea.js或require.js進(jìn)行模塊管理

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

推薦使用瀏覽器插件進(jìn)行提示，還可以配置保存時(shí)自動(dòng)修復(fù)eslint

7.3 js中如何判斷是否為開(kāi)發(fā)模式 
// 當(dāng)前環(huán)境為開(kāi)發(fā)環(huán)境
var isDev = !!document.getElementById("__bs_script__")

注意： isDev只能在body標(biāo)簽內(nèi)的js中這樣獲取，或者在DOMContenLoaded或load事件回調(diào)中初始化 isDev

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/96203.html

相關(guān)文章

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目

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

    call_me_R 評(píng)論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目

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

    wzyplus 評(píng)論0 收藏0

  • 從 0 到 1 再到 100, 搭建、編寫、構(gòu)建一個(gè)前端項(xiàng)目

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

    aristark 評(píng)論0 收藏0

  • 使用gulp搭建前端構(gòu)建工具

    摘要：今天跟大家分享的是關(guān)于目前自己的公司的項(xiàng)目?jī)?yōu)化中所使用到的構(gòu)建工具。在進(jìn)行基礎(chǔ)鞏固的基礎(chǔ)上，使用構(gòu)建工具可以在開(kāi)發(fā)的過(guò)程中進(jìn)行部分自動(dòng)化構(gòu)建，如對(duì)頁(yè)面的監(jiān)聽(tīng)，對(duì)樣式的編譯，對(duì)代碼的壓縮與打包。在使用之前，要先對(duì)所需要的依賴進(jìn)行安裝。 Why？ 今天跟大家分享的是關(guān)于目前自己的公司的項(xiàng)目?jī)?yōu)化中所使用到的gulp構(gòu)建工具。目前公司對(duì)產(chǎn)品的優(yōu)化決定采用VueJs來(lái)進(jìn)行單頁(yè)面開(kāi)發(fā)，無(wú)疑這種新的...

    _Zhao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<