1. 前端技術棧有哪些
前端技術棧包括：1.vuejs 2.react.js 3.node.js 4.微信公眾號 5.前端安全 6.react-native 7.工程化 8.小程序 9.自動化測試等。
react的一些相關技術棧
React：用於構建用戶界面的 JavaScript 庫。
React Native：基於 React 的移動端跨平台 UI
Ant Design： React 封裝了一套 Ant Design 的組件庫。
Zarm React：移動端 React 組件庫
Taro：Taro 是一個開放式跨端跨框架解決方案，支持使用 React/Vue/Nerv 等框架來開發 微信 / 京東 / 網路 / 支付寶 / 位元組跳動 / QQ 小程序 / H5 等應用。
2. 前端構建工具Gulp.js 你知多少..(webpack/gulp/grunt)
@ TOC
閱讀本文章之前，相信你已經對前端構建工具(webpack、gulp、grunt)有一定的認知和了解了，那麼他們之間究竟有什麼區別呢？
gulp文檔上面有這么一句話 ，也就是說 gulp是一個自動化構建工具；
gulp的一些功能如下(包括但不限於):
其實Webpack和另外兩個並沒有太多的可比性
傻瓜式起步照搬官網文檔
1.安裝
2.在項目根目錄下創建一個名為 gulpfile.js 的文件：
3.運行 gulp：
默認的名為 default 的任務（task）將會被運行，在這里，這個任務並未做任何事情。
具體詳情可以查看 gulpjs.com文檔
新建一個項目gulp-test
環境:
1.新建文件以下文件如下
其中 gulpfile.js 是我們gulp的配置文件，啟動gulp默認會找個這個文件並執行；
2.接下來安裝依賴
一直按回車Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁瑣的enter步驟)
此時我們的目錄結構是這樣了
安裝依賴
這里頁面實時刷新只講這個 gulp-connect ，其他詳情可以參照 Browsersync 和文章 gulp-livereload
安裝完依賴後配置gulpfile.js如下:
大概講解一下gulpfile.js:
gulp.task 是gulp的api 定義一個使用 Orchestrator 實現的任務（task）
如上我們定義了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任務，其中:
my-task-js 是將 符合所提供的匹配模式的js 進行檢測(gulp-jshint)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/js目錄下；
my-task-css 是將 符合所提供的匹配模式的sass進行編譯(gulp-sass)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/css目錄下；
html 是將 符合所提供的匹配模式的html進行監聽，如果有變化則connect.reload()
clean 是如果任務重新啟動時 刪除舊文件；
default gulp默認啟動的任務
watch gulp的api 監視文件，並且可以在文件發生改動時候做一些事情。它總會返回一個 EventEmitter 來發射（emit） change 事件。
server 依賴gulp-connect啟動一個伺服器
配置完gulpfile.js之後，我們給js和css及html加點東西:
首先js/helloworld.js
css/index.scss
index.html
運行gulp
瀏覽器效果:
接下來我們修改helloworld.js來看看是否能實時刷新
修改如下:
按保存之後，終端給我們報了一個錯:
查看js發現我們用了es6語法的聲明語句 但當前gulp無法處理es6語法，有問題解決問題，es6=>es5
解決方案:
安裝gulp-babel babel-core babel-preset-es2015
gulpfile.js修改如下:
運行
依然報上面的錯；找了一些原因發現，雖然安裝了相關依賴，卻沒有配置.babelrc文件，即babel還沒轉化es6
根目錄添加.babelrc文件
重新運行:
查看dist下的js文件
改變helloworld.js檢查頁面是否刷新
保存，頁面的天空藍換成你們喜歡的yellow顏色
修改index.scss 查看是否會刷新頁面
最後修改index.html 查看是否會刷新頁面
今天主要學習了gulp的簡單項目搭建及實時更新配置；其實gulp類似於grunt的弱化版，但更簡單好用，只是插件會少一些，目前主流的項目搭建工具主要是webpack，但依然有不少項目還用著gulp或者grunt
擴展:
下面還有一些樓主的學習筆記:
有興趣的可以多多交流@ 樓主博客
3. 常使用的庫有哪些常用的前端開發工具開發過什麼應用或組件
很多呀。VB，JAVA，.NET 都是資料庫開發的！沒資料庫的程序都是些小的小程序。玩玩而已！
4. 前端構建工具和打包工具有啥區別
Webpack是一個前端模塊化方案，更側重模塊打包。我們可以把開發中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（載入器）和plugins（插件）對資源進行處理，打包成符合生產環境部署的前端資源。
Webpack就是需要通過其配置文件（Webpack.config.js）中 entry 配置的一個入口文件（JS文件），然後在解析過程中，發現其他的模塊，如scss等文件，再調用配置的loader或者插件對相關文件進行解析處理。
兩者區別
雖然Gulp 和 Webpack都是前端自動化構建工具，但看2者的定位就知道不是對等的。Gulp嚴格上講，模塊化不是他強調的東西，旨在規范前端開發流程。Webpack更明顯的強調模塊化開發，而那些文件壓縮合並、預處理等功能，不過是他附帶的功能。
以上就是介紹的前端構建工具 Gulp 和 Webpack，以及兩者之間的區別。如今互聯網發展迅速，Web前端人員也應該與時俱進的不斷學習。
5. nodejs：用ejs模板和gulp實現前端組件化
最近在用nodejs將公司商城的底層重寫。基於nodejs的強大，我從原本的只寫前端變成了寫全棧。
框架採用express,模板用ejs,前端用amazeui. 做完三個頁面後，設計突然說要改UI設計，我勒個去，郁悶地一個個頁面重新調整。下班之後反思一下，覺得花了太多時間在重復勞動上，是時候涉獵一下前端工程化的知識了。
用網路在互聯網暢遊了一番，總結了一下前端工程化的幾個關鍵要素：編碼規范化，結構模塊化，流程自動化。本文所述的方法屬於模塊化，但只是簡單地把dom，css,js拆分，以便更好地管理，而並非像vue框架那樣的組件化，但這種方式可能更易於理解，可以作為過渡。
這是原來的目錄結構
其中public目錄里存放的是靜態資源，按照傳統的做法，css文件夾種存放less文件和css文件，img文件夾中存放圖片資源，js中存放各頁面（views目錄中對應的頁面）的js文件。
當頁面越來越多，會遇到一些重復的部分。像圖中的側邊菜單，頂部搜索框，底部菜單，在幾個頁面都有。如果每個頁面拷貝一份樣式，js，dom,當需求方要更改樣式或者增加功能的時候，徒增工作量。
在一篇文章的啟發下（ 前端開發工程化探討 ），我將目錄結構改成如下：
為了標准化，每個組件里的文件命名都相同。以側邊工具欄為例，dom.ejs是一個模板文件：
如果不熟悉ejs模板的語法，可以網路一下。另外，此模板還支持嵌套，並傳入參數。
例如，下面是一個列表容器的dom結構，配合js可以實現上拉載入功能，但列表項的樣式可能不一樣，你可以在使用時再根據傳入的templateName參數決定用哪個模板，非常靈活。
在使用模板時，這樣嵌入頁面。
注意，應使用<%-include()%>,而非<%=include()%>。<%-%>表示內容原樣輸出，不進行運算。而<%=%>會生成運算後的內容。
然後，再來考慮js和css文件應當怎麼處理。如果在頁面中逐個引入組件的js和css文件，維護起來會非常不方便。所以我考慮將某個頁面涉及到的組件，還有頁面本身的js和css打包成一個。這樣做有個缺點，每個頁面的js和css文件會有重復的內容。如果用seajs或requirejs等模塊載入，可以解決重復的問題，但也可能增加項目的復雜度。考慮到打包後的文件只有10K大小，還是暫時使用打包的方法。有興趣的朋友也可以將js模塊化並測試一下性能。
打包涉及到gulp的應用，有許多文章談論到，而我是通過開源項目學習的。
首先我需要寫一個page-config.json文件，告訴gulp我要打包哪些資源：
將文件放在模板目錄的根目錄下面，與src,dist同級。src存放原文件，dist存放生成後的文件。
再寫一個gulpfile.js,用於自動構建。
下面是gulp文件的寫法：
在使用時，要在命令行安裝gulp，切換到gulpfile.js所在的目錄，運行gulp watch，這樣，每次在css和js更改時，會自動重新打包。當然，為了不重復操作，你可以寫一個腳本文件。