1、簡介
使用gulp搭建一個傳統的多頁面前端項目的開發環境
- 支持
pugscsses6編譯支持 - 支持開發環境和打包生成
sourceMap - 支持文件變動自動刷新瀏覽器，css是熱更新（css改動無需刷新瀏覽器即可更新）
- 支持新增文件沒無需重啟gulp，即可改動自動刷新瀏覽器
- 支持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/dev-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/static/_scss
scss模塊目錄，里面的.scss文件不會被單獨編譯成css文件
3.4src/static/_pug
pug模塊目錄，里面的.pug文件不會被單獨編譯成html文件
4.5 src/static/_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 devconfig.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