日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
前端工程師：我用gulp4.0搭建一個(gè)前端腳手架

本文將會(huì)介紹如何使用gulp4來搭建項(xiàng)目腳手架，如果您還在使用gulp3或更老的版本，您也以通過本文的一些思想將之前的項(xiàng)目進(jìn)行完善，更新。如果gulp不是你們團(tuán)隊(duì)的重點(diǎn)，也可以移步我的Webpack4.0搭建文章.

專業(yè)網(wǎng)站制作公司,專做排名好的好網(wǎng)站,排在同行前面,為您帶來客戶和效益!成都創(chuàng)新互聯(lián)公司為您提供品質(zhì)好成都網(wǎng)站建設(shè),五站合一網(wǎng)站設(shè)計(jì)制作,服務(wù)好的網(wǎng)站設(shè)計(jì)公司,負(fù)責(zé)任的成都網(wǎng)站制作公司!

前言

由于本文重點(diǎn)是介紹gulp4.0搭建腳手架的思路，相關(guān)插件的用法以及項(xiàng)目結(jié)構(gòu)的設(shè)計(jì)，由于gulp的基本用法很簡(jiǎn)單，如果不熟悉可以移步官網(wǎng)自行研究學(xué)習(xí)。該腳手架的設(shè)計(jì)思路和功能如下：

 

同時(shí)為了提高開發(fā)環(huán)境的效率，這里我們參考webpack的配置，區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境，在接下來將會(huì)具體介紹。

腳手架用到的第三方插件介紹

  • gulp-jshint ——js語法檢測(cè)
  • gulp-util ——終端控制臺(tái)打印自定義錯(cuò)誤信息
  • http-proxy-middleware ——設(shè)置代理，配合gulp-connect使用
  • gulp-less ——將less編譯成css
  • gulp-file-include ——用于文件模塊化導(dǎo)入，如用include的方式導(dǎo)入公共部分
  • gulp-connect ——用于啟動(dòng)本地服務(wù)器
  • gulp-clean ——清理目錄
  • gulp-uglify --壓縮js
  • gulp-minify-css ——壓縮css
  • gulp-autoprefixer ——自動(dòng)添加瀏覽器前綴
  • imagemin-pngquant ——png圖片壓縮
  • gulp-imagemin ——圖壓縮
  • gulp-cache ——設(shè)置gulp打包的緩存，一般用于img
  • gulp-md5-plus ——將文件名進(jìn)行md5處理便于打包更新

當(dāng)然gulp還有很多常用的插件可以更好的為我們的項(xiàng)目服務(wù)，大家也可以整合自己的插件讓項(xiàng)目更加完善。

項(xiàng)目目錄設(shè)計(jì)

1.src目錄，即我們開發(fā)項(xiàng)目時(shí)的源目錄，具體結(jié)構(gòu)如下：

我們定義views是我們視圖層，即頁面文件的目錄，js目錄為業(yè)務(wù)邏輯的腳本文件，lib存放第三方框架，include目錄為公共部分的存放目錄，我們可以用gulp-file-include來導(dǎo)入到html中，images和css大家都比較清楚，分別時(shí)存放image和css文件的目錄。

2. dist目錄，即輸出的目錄，具體結(jié)構(gòu)如下：

可以看到我們會(huì)看到src打包后的目錄對(duì)應(yīng)static目錄，為什么我們會(huì)加一層static呢?我的設(shè)計(jì)是如果項(xiàng)目使用node等服務(wù)層框架，我們可以用gulp一并打包放入dist下，這樣dist就是一個(gè)完整的包括前后端服務(wù)的項(xiàng)目目錄了，當(dāng)然大家也可以直接將src打包后的文件和文件夾直接放到dist下，根具業(yè)務(wù)需求靈活設(shè)計(jì)吧。

在這里我要說一點(diǎn)，由于筆者親測(cè)gulp-md5-plus有時(shí)候打包不穩(wěn)定，可能不會(huì)給html自動(dòng)添加對(duì)應(yīng)的md5后綴，所以筆者在這塊做了特殊的處理，如果大家在工作中有更好的方案，可以及時(shí)和筆者溝通交流。

3. gulpfile文件配置

由于我們要區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境，所以這里我們使用兩個(gè)不同的配置文件，根據(jù)NODE_ENV來區(qū)分用哪個(gè)文件。

我們將配置文件統(tǒng)一放到build目錄下，config為公共配置文件，gulp.dev.js和gulp.prod.js分別為開發(fā)和生產(chǎn)環(huán)境配置文件。我們整體的目錄結(jié)構(gòu)如下：

腳手架完整源碼(部分插件和配置會(huì)給出詳細(xì)注釋)

1 config.js

 
 
 
 
    
  
  
  
  
  1. module.exports = { 
    2. 
  
  
  
  
  2.     dist: './dist/static',  // 配置構(gòu)建目錄 
    3. 
  
  
  
  
  3. } 
    4.

2 gulp.dev.js

 
 
 
 
    
  
  
  
  
  1. const gulp = require('gulp'); 
    2. 
  
  
  
  
  2. // js 
    3. 
  
  
  
  
  3. const Jshint = require("gulp-jshint");          //js檢查 
    4. 
  
  
  
  
  4. const Gutil = require('gulp-util'); 
    5. 
  
  
  
  
  5. const Proxy = require('http-proxy-middleware'); 
    6. 
  
  
  
  
  6. // const Webpack = require('webpack'); 
    7. 
  
  
  
  
  7. // const WebpackConfig = require('./webpack.config.js'); 
    8. 
  
  
  
  
  8.  
    9. 
  
  
  
  
  9. // css 
    10. 
  
  
  
  
  10. const Less = require('gulp-less');              // 編譯less 
    11. 
  
  
  
  
  11.  
    12. 
  
  
  
  
  12. // html 
    13. 
  
  
  
  
  13. const FileInclude = require('gulp-file-include'); // 文件模塊化 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. // server 
    16. 
  
  
  
  
  16. const Connect = require('gulp-connect');        //引入gulp-connect模塊  
    17. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18. const Clean = require('gulp-clean');            // 清理目錄 
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20. // 配置文件 
    21. 
  
  
  
  
  21. const config = require('./config'); 
    22. 
  
  
  
  
  22. const { dist } = config; 
    23. 
  
  
  
  
  23.  
    24. 
  
  
  
  
  24. // html 
    25. 
  
  
  
  
  25. async function html() { 
    26. 
  
  
  
  
  26.     return gulp.src('src/views/*.html') 
    27. 
  
  
  
  
  27.         .pipe(FileInclude({ // HTML模板替換，具體用法見下文 
    28. 
  
  
  
  
  28.             prefix: '##', 
    29. 
  
  
  
  
  29.             basepath: '@file' 
    30. 
  
  
  
  
  30.         })).on('error', function(err) { 
    31. 
  
  
  
  
  31.             console.error('Task:copy-html,', err.message); 
    32. 
  
  
  
  
  32.             this.end(); 
    33. 
  
  
  
  
  33.         }) 
    34. 
  
  
  
  
  34.         .pipe(gulp.dest(dist)) // 拷貝  
    35. 
  
  
  
  
  35.         .pipe(Connect.reload()) 
    36. 
  
  
  
  
  36. } 
    37. 
  
  
  
  
  37.  
    38. 
  
  
  
  
  38. // css 
    39. 
  
  
  
  
  39. async function css() { 
    40. 
  
  
  
  
  40.     return await gulp.src('src/css/*.less') 
    41. 
  
  
  
  
  41.     .pipe(Less())       //編譯less 
    42. 
  
  
  
  
  42.     .pipe(gulp.dest(dist + '/css')) //當(dāng)前對(duì)應(yīng)css文件 
    43. 
  
  
  
  
  43.     .pipe(Connect.reload());//更新 
    44. 
  
  
  
  
  44. } 
    45. 
  
  
  
  
  45.  
    46. 
  
  
  
  
  46. // js 
    47. 
  
  
  
  
  47. // const compilerJS = Webpack(WebpackConfig); 
    48. 
  
  
  
  
  48.  
    49. 
  
  
  
  
  49. async function js() { 
    50. 
  
  
  
  
  50.     return await gulp.src('src/js/**') 
    51. 
  
  
  
  
  51.     .pipe(Jshint())//檢查代碼 
    52. 
  
  
  
  
  52.     // .pipe(Babel({ 
    53. 
  
  
  
  
  53.     //     presets: ['es2015'] 
    54. 
  
  
  
  
  54.     // })) 
    55. 
  
  
  
  
  55.     .on('error', function(err) { 
    56. 
  
  
  
  
  56.         Gutil.log(Gutil.colors.red('[Error]'), err.toString()); 
    57. 
  
  
  
  
  57.     }) 
    58. 
  
  
  
  
  58.     .pipe(gulp.dest(dist + '/js')) // 拷貝 
    59. 
  
  
  
  
  59.     .pipe(Connect.reload()); //更新 
    60. 
  
  
  
  
  60.      
    61. 
  
  
  
  
  61.     // 使用es6+可以單獨(dú)配置 
    62. 
  
  
  
  
  62.     // compilerJS.run(function(err, stats) { 
    63. 
  
  
  
  
  63.     //     if(err) throw new Gutil.PluginError("webpack:js", err); 
    64. 
  
  
  
  
  64.     //     Gutil.log("[webpack]", stats.toString({ 
    65. 
  
  
  
  
  65.     //         colors: true 
    66. 
  
  
  
  
  66.     //     })); 
    67. 
  
  
  
  
  67.     //     cb() 
    68. 
  
  
  
  
  68.     // }); 
    69. 
  
  
  
  
  69. } 
    70. 
  
  
  
  
  70.  
    71. 
  
  
  
  
  71. // image 
    72. 
  
  
  
  
  72. async function image() { 
    73. 
  
  
  
  
  73.     return await gulp.src('src/images/*') 
    74. 
  
  
  
  
  74.     .pipe(gulp.dest(dist + '/images')); 
    75. 
  
  
  
  
  75. } 
    76. 
  
  
  
  
  76.  
    77. 
  
  
  
  
  77. // clean dir 
    78. 
  
  
  
  
  78. async function clean() { 
    79. 
  
  
  
  
  79.     // 不設(shè)置allowEmpty: true會(huì)報(bào)File not found with singular glob 
    80. 
  
  
  
  
  80.     return await gulp.src(dist, {allowEmpty: true}).pipe(Clean()); 
    81. 
  
  
  
  
  81. } 
    82. 
  
  
  
  
  82.  
    83. 
  
  
  
  
  83. // 服務(wù)器函數(shù) 
    84. 
  
  
  
  
  84. async function server() { 
    85. 
  
  
  
  
  85.     Connect.server({ 
    86. 
  
  
  
  
  86.         root:dist, //根目錄 
    87. 
  
  
  
  
  87.         // ip:'192.168.11.62',//默認(rèn)localhost:8080 
    88. 
  
  
  
  
  88.         livereload:true, //自動(dòng)更新 
    89. 
  
  
  
  
  89.         port:9909, //端口 
    90. 
  
  
  
  
  90.         middleware: function(connect, opt) { 
    91. 
  
  
  
  
  91.             return [ 
    92. 
  
  
  
  
  92.                 Proxy('/api', { 
    93. 
  
  
  
  
  93.                     target: 'http://localhost:8080', 
    94. 
  
  
  
  
  94.                     changeOrigin:true 
    95. 
  
  
  
  
  95.                 }), 
    96. 
  
  
  
  
  96.                 Proxy('/otherServer', { 
    97. 
  
  
  
  
  97.                     target: 'http://IP:Port', 
    98. 
  
  
  
  
  98.                     changeOrigin:true 
    99. 
  
  
  
  
  99.                 }) 
    100. 
  
  
  
  
  100.             ] 
    101. 
  
  
  
  
  101.         } 
    102. 
  
  
  
  
  102.     }) 
    103. 
  
  
  
  
  103. } 
    104. 
  
  
  
  
  104.  
    105. 
  
  
  
  
  105. module.exports = { 
    106. 
  
  
  
  
  106.     html, 
    107. 
  
  
  
  
  107.     css, 
    108. 
  
  
  
  
  108.     js, 
    109. 
  
  
  
  
  109.     image, 
    110. 
  
  
  
  
  110.     clean, 
    111. 
  
  
  
  
  111.     server 
    112. 
  
  
  
  
  112. } 
    113.

3 gulp.prod.js

 
 
 
 
    
  
  
  
  
  1. const gulp = require('gulp'); 
    2. 
  
  
  
  
  2. // const Rename = require('gulp-rename');          // 重命名 
    3. 
  
  
  
  
  3. // js 
    4. 
  
  
  
  
  4. const Uglify = require('gulp-uglify');          // 壓縮js 
    5. 
  
  
  
  
  5. // const Babel = require('gulp-babel'); 
    6. 
  
  
  
  
  6. // css 
    7. 
  
  
  
  
  7. const Minifycss = require('gulp-minify-css');   // 壓縮css 
    8. 
  
  
  
  
  8. const Less = require('gulp-less');              // 編譯less 
    9. 
  
  
  
  
  9. const Autoprefixer = require('gulp-autoprefixer');  // 瀏覽器前綴 
    10. 
  
  
  
  
  10. // html 
    11. 
  
  
  
  
  11. const MinifyHtml = require("gulp-minify-html"); //壓縮html 
    12. 
  
  
  
  
  12. const FileInclude = require('gulp-file-include'); // 文件模塊化 
    13. 
  
  
  
  
  13. // image 
    14. 
  
  
  
  
  14. const Imagemin = require('gulp-imagemin'); 
    15. 
  
  
  
  
  15. const Pngquant = require('imagemin-pngquant');  //png圖片壓縮插件 
    16. 
  
  
  
  
  16. const Cache = require('gulp-cache');  
    17. 
  
  
  
  
  17.  
    18. 
  
  
  
  
  18. const Clean = require('gulp-clean');            // 清理目錄 
    19. 
  
  
  
  
  19.  
    20. 
  
  
  
  
  20. // md5 發(fā)版本的時(shí)候?yàn)榱吮苊鉃g覽器讀取了舊的緩存文件，需要為其添加md5戳 
    21. 
  
  
  
  
  21. const md5 = require("gulp-md5-plus"); 
    22. 
  
  
  
  
  22.  
    23. 
  
  
  
  
  23. const config = require('./config'); 
    24. 
  
  
  
  
  24. const { dist } = config; 
    25. 
  
  
  
  
  25. // html 
    26. 
  
  
  
  
  26. async function html() { 
    27. 
  
  
  
  
  27.     return gulp.src('src/views/*.html') 
    28. 
  
  
  
  
  28.         .pipe(FileInclude({ // HTML模板替換，具體用法見下文 
    29. 
  
  
  
  
  29.             prefix: '##', 
    30. 
  
  
  
  
  30.             basepath: '@file' 
    31. 
  
  
  
  
  31.         })) 
    32. 
  
  
  
  
  32.         // .pipe(MinifyHtml()) 
    33. 
  
  
  
  
  33.         .on('error', function(err) { 
    34. 
  
  
  
  
  34.             console.error('Task:copy-html,', err.message); 
    35. 
  
  
  
  
  35.             this.end(); 
    36. 
  
  
  
  
  36.         }) 
    37. 
  
  
  
  
  37.         .pipe(gulp.dest(dist)) // 拷貝  
    38. 
  
  
  
  
  38. } 
    39. 
  
  
  
  
  39.  
    40. 
  
  
  
  
  40. // css 
    41. 
  
  
  
  
  41. async function css() { 
    42. 
  
  
  
  
  42.     return await gulp.src('src/css/**') 
    43. 
  
  
  
  
  43.     .pipe(Less())       //編譯less 
    44. 
  
  
  
  
  44.     .pipe(Autoprefixer({ 
    45. 
  
  
  
  
  45.         cascade: true, //是否美化屬性值 默認(rèn)：true 像這樣： 
    46. 
  
  
  
  
  46.         //-webkit-transform: rotate(45deg); 
    47. 
  
  
  
  
  47.         //        transform: rotate(45deg); 
    48. 
  
  
  
  
  48.         remove: true //是否去掉不必要的前綴 默認(rèn)：true 
    49. 
  
  
  
  
  49.     })) 
    50. 
  
  
  
  
  50.     .pipe(Minifycss({   // 壓縮css 
    51. 
  
  
  
  
  51.         //類型：Boolean 默認(rèn)：true [是否開啟高級(jí)優(yōu)化（合并選擇器等）] 
    52. 
  
  
  
  
  52.         advanced: true, 
    53. 
  
  
  
  
  53.         //保留ie7及以下兼容寫法 類型：String 默認(rèn)：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式] 
    54. 
  
  
  
  
  54.         compatibility: '', 
    55. 
  
  
  
  
  55.         //類型：Boolean 默認(rèn)：false [是否保留換行] 
    56. 
  
  
  
  
  56.         keepBreaks: false, 
    57. 
  
  
  
  
  57.         //保留所有特殊前綴 當(dāng)你用autoprefixer生成的瀏覽器前綴，如果不加這個(gè)參數(shù)，有可能將會(huì)刪除你的部分前綴         
    58. 
  
  
  
  
  58.         keepSpecialComments: '*' 
    59. 
  
  
  
  
  59.     })) 
    60. 
  
  
  
  
  60.     .pipe(gulp.dest(dist + '/css')) 
    61. 
  
  
  
  
  61.     .pipe(md5(10, dist + '/*.html', { 
    62. 
  
  
  
  
  62.         mappingFile: 'manifest.json', 
    63. 
  
  
  
  
  63.         connector: '.' // 文件名和hash的連接符 
    64. 
  
  
  
  
  64.     })) 
    65. 
  
  
  
  
  65.     .pipe(gulp.dest(dist + '/css')) //當(dāng)前對(duì)應(yīng)css文件 
    66. 
  
  
  
  
  66. } 
    67. 
  
  
  
  
  67.  
    68. 
  
  
  
  
  68. // js 
    69. 
  
  
  
  
  69. async function js() { 
    70. 
  
  
  
  
  70.     return await gulp.src('src/js/**') 
    71. 
  
  
  
  
  71.     // .pipe(Babel({ 
    72. 
  
  
  
  
  72.     //     presets: ['es2015'] 
    73. 
  
  
  
  
  73.     // })) 
    74. 
  
  
  
  
  74.     .pipe(Uglify()) // 壓縮js 
    75. 
  
  
  
  
  75.     .pipe(gulp.dest(dist + '/js')) 
    76. 
  
  
  
  
  76.     .pipe(md5(10, dist + '/*.html', { 
    77. 
  
  
  
  
  77.         mappingFile: 'manifest.json', 
    78. 
  
  
  
  
  78.         connector: '.' 
    79. 
  
  
  
  
  79.     })) 
    80. 
  
  
  
  
  80.     .pipe(gulp.dest(dist + '/js')) // 拷貝 
    81. 
  
  
  
  
  81. } 
    82. 
  
  
  
  
  82.  
    83. 
  
  
  
  
  83. // image 
    84. 
  
  
  
  
  84. async function image() { 
    85. 
  
  
  
  
  85.     return await gulp.src('src/images/*') 
    86. 
  
  
  
  
  86.     .pipe(Cache(Imagemin({ 
    87. 
  
  
  
  
  87.         optimizationLevel: 5, //類型：Number  默認(rèn)：3  取值范圍：0-7（優(yōu)化等級(jí)） 
    88. 
  
  
  
  
  88.         progressive: true, //類型：Boolean 默認(rèn)：false 無損壓縮jpg圖片 
    89. 
  
  
  
  
  89.         interlaced: true, //類型：Boolean 默認(rèn)：false 隔行掃描gif進(jìn)行渲染 
    90. 
  
  
  
  
  90.         multipass: true, //類型：Boolean 默認(rèn)：false 多次優(yōu)化svg直到完全優(yōu)化 
    91. 
  
  
  
  
  91.         svgoPlugins: [{removeViewBox: false}],//不要移除svg的viewbox屬性 
    92. 
  
  
  
  
  92.         use: [Pngquant()] //使用pngquant深度壓縮png圖片的imagemin插件 
    93. 
  
  
  
  
  93.     }))) 
    94. 
  
  
  
  
  94.     .pipe(gulp.dest(dist + '/images')); 
    95. 
  
  
  
  
  95. } 
    96. 
  
  
  
  
  96.  
    97. 
  
  
  
  
  97.  
    98. 
  
  
  
  
  98. // clean dir 
    99. 
  
  
  
  
  99. async function clean() { 
    100. 
  
  
  
  
  100.     // 不設(shè)置allowEmpty: true會(huì)報(bào)File not found with singular glob 
    101. 
  
  
  
  
  101.     return await gulp.src(dist, {allowEmpty: true}).pipe(Clean()); 
    102. 
  
  
  
  
  102. } 
    103. 
  
  
  
  
  103.  
    104. 
  
  
  
  
  104.  
    105. 
  
  
  
  
  105.  
    106. 
  
  
  
  
  106. module.exports = { 
    107. 
  
  
  
  
  107.     html, 
    108. 
  
  
  
  
  108.     css, 
    109. 
  
  
  
  
  109.     js, 
    110. 
  
  
  
  
  110.     image, 
    111. 
  
  
  
  
  111.     clean 
    112. 
  
  
  
  
  112. } 
    113.

4 gulpfile.js

 
 
 
 
    
  
  
  
  
  1. const gulp = require('gulp'); 
    2. 
  
  
  
  
  2.  
    3. 
  
  
  
  
  3. // 根據(jù)環(huán)境引入不同的配置文件 
    4. 
  
  
  
  
  4. let buildConfig; 
    5. 
  
  
  
  
  5. if(process.env.NODE_ENV === 'dev') { 
    6. 
  
  
  
  
  6.     buildConfig = require('./build/gulp.dev'); 
    7. 
  
  
  
  
  7.     gulp.task('server', buildConfig.server);  // 本地服務(wù) 
    8. 
  
  
  
  
  8.      
    9. 
  
  
  
  
  9. } else { 
    10. 
  
  
  
  
  10.     buildConfig = require('./build/gulp.prod'); 
    11. 
  
  
  
  
  11.     // gulp.task('md5', gulp.series(buildConfig.md5Css, buildConfig.md5Js)); 
    12. 
  
  
  
  
  12.     gulp.task('clean', buildConfig.clean);    // 清理目錄    
    13. 
  
  
  
  
  13. } 
    14. 
  
  
  
  
  14.  
    15. 
  
  
  
  
  15. gulp.task('html', buildConfig.html);      // 打包html 
    16. 
  
  
  
  
  16. gulp.task('js', buildConfig.js);          // 打包js 
    17. 
  
  
  
  
  17. gulp.task('css', buildConfig.css);        // 打包c(diǎn)ss 
    18. 
  
  
  
  
  18. gulp.task('images', buildConfig.image);   // 打包image 
    19. 
  
  
  
  
  19. gulp.task('sources', gulp.series('html', gulp.parallel('js', 'css', 'images'))); 
    20. 
  
  
  
  
  20.  
    21. 
  
  
  
  
  21.  
    22. 
  
  
  
  
  22. // 監(jiān)聽文件變化 
    23. 
  
  
  
  
  23. gulp.task('watch', async () => { 
    24. 
  
  
  
  
  24.     gulp.watch('src/views/*', gulp.series('html')); // 監(jiān)聽HTML變化 
    25. 
  
  
  
  
  25.     gulp.watch('src/js/**', gulp.series('js')); // 監(jiān)聽js變化 
    26. 
  
  
  
  
  26.     gulp.watch('src/css/*', gulp.series('css')); // 監(jiān)聽css變化 
    27. 
  
  
  
  
  27.     gulp.watch('src/images/*', gulp.series('images')); // 監(jiān)聽image變化 
    28. 
  
  
  
  
  28. }); 
    29. 
  
  
  
  
  29.  
    30. 
  
  
  
  
  30. // build 
    31. 
  
  
  
  
  31. if(process.env.NODE_ENV === 'dev') { 
    32. 
  
  
  
  
  32.     gulp.task('dev', gulp.series('sources', 'server', 'watch')); 
    33. 
  
  
  
  
  33. } else { 
    34. 
  
  
  
  
  34.     gulp.task('build', gulp.series('sources')); 
    35. 
  
  
  
  
  35. } 
    36.

5 package.json

 
 
 
 
    
  
  
  
  
  1. { 
    2. 
  
  
  
  
  2.   "dependencies": { 
    3. 
  
  
  
  
  3.     "@babel/core": "^7.4.5", 
    4. 
  
  
  
  
  4.     "babel-preset-es2015": "^6.24.1", 
    5. 
  
  
  
  
  5.     "gulp": "^4.0.2", 
    6. 
  
  
  
  
  6.     "gulp-autoprefixer": "^6.1.0", 
    7. 
  
  
  
  
  7.     "gulp-babel": "^8.0.0", 
    8. 
  
  
  
  
  8.     "gulp-cache": "^1.1.2", 
    9. 
  
  
  
  
  9.     "gulp-clean": "^0.4.0", 
    10. 
  
  
  
  
  10.     "gulp-connect": "^5.7.0", 
    11. 
  
  
  
  
  11.     "gulp-file-include": "^2.0.1", 
    12. 
  
  
  
  
  12.     "gulp-imagemin": "^6.0.0", 
    13. 
  
  
  
  
  13.     "gulp-jshint": "^2.1.0", 
    14. 
  
  
  
  
  14.     "gulp-less": "^4.0.1", 
    15. 
  
  
  
  
  15.     "gulp-md5-plus": "^1.0.3", 
    16. 
  
  
  
  
  16.     "gulp-minify-css": "^1.2.4", 
    17. 
  
  
  
  
  17.     "gulp-minify-html": "^1.0.6", 
    18. 
  
  
  
  
  18.     "gulp-rename": "^1.4.0", 
    19. 
  
  
  
  
  19.     "gulp-uglify": "^3.0.2", 
    20. 
  
  
  
  
  20.     "gulp-util": "^3.0.8", 
    21. 
  
  
  
  
  21.     "http-proxy-middleware": "^0.19.1", 
    22. 
  
  
  
  
  22.     "http-server": "^0.11.1", 
    23. 
  
  
  
  
  23.     "imagemin-pngquant": "^8.0.0", 
    24. 
  
  
  
  
  24.     "jshint": "^2.10.2", 
    25. 
  
  
  
  
  25.     "jsonfile": "^5.0.0", 
    26. 
  
  
  
  
  26.     "webpack": "^4.35.2" 
    27. 
  
  
  
  
  27.   }, 
    28. 
  
  
  
  
  28.   "scripts": { 
    29. 
  
  
  
  
  29.     "start": "NODE_ENV=dev gulp dev", 
    30. 
  
  
  
  
  30.     "build": "NODE_ENV=prod gulp clean && gulp build", 
    31. 
  
  
  
  
  31.     "serve": "http-server dist/static -p 3000" 
    32. 
  
  
  
  
  32.   }, 
    33. 
  
  
  
  
  33.   "devDependencies": {} 
    34. 
  
  
  
  
  34. } 
    35.

要想獲取項(xiàng)目完整源碼和demo，請(qǐng)移步gulp4_multi_pages。

最后 

該腳手架任然有需要完善的地方，比如如何兼容uglify和babel,md5需要使用兩次的情況，如果更好的解決方案，歡迎隨時(shí)交流。在腳手架選型上，也不一定非要用gulp，webpack，一般的經(jīng)驗(yàn)是傳統(tǒng)型的靜態(tài)網(wǎng)站適合用gulp，由于不需要編譯es6，所以有更小的體積，當(dāng)然也可以用webpack，本文主要是給大家提供一使用gulp4搭建個(gè)腳手架的思路，希望能有所收獲。


本文標(biāo)題：前端工程師：我用gulp4.0搭建一個(gè)前端腳手架
網(wǎng)站地址：http://www.dlmjj.cn/article/cceipcg.html