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

gulp-easy github

一、簡介

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

• 支持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.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修復

三、 約定的目錄

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文件

四、功能配置文件

根目錄下的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'
      }
    }
  }
}

五、功能配置項詳解

如不須要使用某個配置項目，直接將其註釋便可

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.1 Deom-0 見src目錄

使用html,css,js構建項目

6.2 Deom-1 見src-1目錄

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

七、其餘

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