❶ 干貨帖，Web前端開發框架有哪些
如果是純移動端的話，zepto加frozenui加seajs挺好的。感覺bootstrap的響應式不適合純移動端開發，因為太重了，對移動端載入速度影響很大，純移動端還是小快靈比較好。
如果是做H5那種活動頁，推薦用motion.js，挺好用的，效果贊贊的。
PC端的話，jq+bootstrap是個挺好的組合，或者用backbone也是挺普遍的，但是如果是開發企業管理系統那種的web頁面可以考慮extjs，現在改名叫sencha了，組件多。相反，個人感覺react就不是很適合用來開發企業管理系統。
react現在很火，發展也很快，可以先學習學習，不過react只是View這一層，是個庫，並不是一個完整的框架。而Angular可以說是個大而全的框架，但是載入速度相對比較慢，還有就是Angular 2.0和1.0有很大不同，幾乎是個推翻重做的感覺，所以現在如果用1.x的話，感覺會比較尷尬。
另外，模塊化的話，用seajs的也挺多。
還有就是可以多關注一下打包工具，grunt，gulp和網路開發的FIS。
❷ gulp+webpack怎麼實現前端模塊化
gulp是前端開發過程中對代碼進行構建的工具，是自動化項目的構建利器；她不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用她，我們不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。
gulp是基於Nodejs的自動任務運行器， 她能自動化地完成
javascript/coffee/sass/less/html/image/css
等文件的的測試、檢查、合並、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑒了Unix操作系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操作上非常簡單。通過本文，我們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。
gulp 和 grunt 非常類似，但相比於 grunt 的頻繁 IO 操作，gulp 的流操作，能更快地更便捷地完成構建工作。
webpack
Webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模塊進行代碼分隔，等到實際需要的時候再非同步載入。通過 loader 的轉換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
**當然個人還是喜歡webpack的模塊化優秀
廢話不多說現在開始gulp之旅
初始化項目(此處已經認為node環境已經安裝)
建立文件夾 名字自己隨便取 比如 gulpText，然後輸入以下命令
$ cd gulpText
$ mkdir images //建立存放圖片文件夾
$ mkdir src // 存放 js 以及css
$ mkdir index.html //主頁
$ mkdir gulpfile.js //編寫gulp 任務文件
$ mkdir mock //mock數據
然後輸入以下命令 然後一路點下去生成json文件
$npm init
打開json文件看到這樣的
1474889102536.png
全局安裝gulp以便我們運行gulp進行打包等操作
$npm install gulp -g
如果感覺npm安裝比較慢可以切換至cnpm下載，代碼如下
$npm install cnpm -g
安裝gulp包，方便我們引用gulp
$npm install gulp
成功截圖
1474889517162.png
編寫gulp任務
引入 gulp
//引入gulp
var gulp = require('gulp');
拷貝Index.html
//html
gulp.task('-index',function () {
gulp.src('./index.html')
.pipe(gulp.dest('./build'));
})
執行命令
$ gulp -index
1474890843877.png]( http://upload-images.jianshu.io/upload_images/2905209-c00d640651bde279.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )
1474890828271.png
拷貝images
// images
gulp.task('-images',function () {
gulp.src('./images**/*')
.pipe(gulp.dest('./build/'));
})
執行命令
$ gulp -iamges
1474891076408.png
1474891039689.png
css預處理
現在我們在src目錄里創建文件styles放我們的scss代碼，需要把scss代碼編譯到/build/prd/styles/下
$ cd src
$ mkdir styles
$ cd styles
$ touch app.scss
$ touch common.scss
app.scss項目代碼
@charset "UTF-8";
@import "./common.scss";
body{
background-color: $base-color;
color: #000;
font-size: 20px;
font-weight: 800;
}
html{
width: 100%;
height: 100%;
}
html{
width: 100%;
height: 100%;
}
.lsds{
width: 100px;
height: 100px;
}
common.scss代碼
$base-color:yellow;
安裝css預編譯包
$ npm install gulp-sass //sass編輯包
$ npm install gulp-minify-css'); //css壓縮包
//引入css預處理模塊
var sass= require('gulp-sass');
//引入css壓縮模塊
var minifyCSS = require('gulp-minify-css');
//css預處理
var cssFiles=[
'./src/styles/app.scss'
];
gulp.task('scss',function () {
gulp.src(cssFiles)
.pipe(sass().on('error',sass.logError))
.pipe(minifyCSS())
.pipe(gulp.dest('./build/prd/styles/'))
})
編輯scss
$ gulp scss
開啟服務
安裝server包
$ npm install gulp-webserver
//引入gulp-webserver 模塊
var server = require('gulp-webserver');
gulp.task('server',function () {
gulp.src('./')
.pipe(server({
host:'127.0.0.1', //ip
port:80, //埠
directoryListing:{
enable:true,
path:'./'
},
livereload:true,
}));
})
❸ gulp 如今可以使用的前端渲染引擎插件是啥
Gulp是基於Node.js的一個構建工具（自動任務運行器），開發者可以使用它構建自動化工作流程（前端集成開發環境）。一些常見、重復的任務，例如：網頁自動刷新、CSS預處理、代碼檢測、壓縮圖片、等等…… 只需用簡單的命令就能全部完成。使用它，可以簡化工作，讓你把重點放在功能開發上；同時減少人為失誤，提高開發效率和項目質量，讓專注更為專注。如果你之前接觸過Grunt，那上手Gulp就會覺得非常容易理解。
❹ 前端工具裡面gulp和fis，有哪些優缺點
過去幾年一直不斷地提到Web應用新世代的成長，這些App內容變得越來越豐富，帶動了前端整體的復雜度大幅增加。像是Backbone(藉由提供模型)、AngularJS和EmberJS框架都是創造新App非常好的框架，增強了所有Web的功能;同時，Web程式語言Javascript在普及度和成熟度上已經進步了非常多，而且還能和NodeJS在後端協同工作。但為了能持續面對復雜度的新挑戰，開發者已經創造工具使整體開發過程更加流暢，從測試框架到分析工具，這些成熟又有用的工具把最棒的體驗帶給我們的使用者。就如同剛剛所提到的，我們喜歡能夠幫助我們提供最棒品質的軟體，同時也能使得生活變得更加簡單方便，本文要分享給大家5個我們每天面對挑戰所使用最棒的工具和框架：Chromedevtools這是目前最好的前端開發工具!Chrome自從它誕生後，就已經大量投資在開發者工具軟體，至今仍不斷的在改善它，每一個發布會(每六周一次)都會伴隨著它自己的全新開發功能。這個開發工具是一個完整的多元軟體套件，你可以實時編輯DOM(HTML)/CSS，當進行一個深入的效能分析時，可以一步步找出Javascript的錯誤，甚至能增加終端機指令。感謝有它，近來解決了回報效能的問題。DOM/CSS編輯器是非常強大的工具，能即時回饋給你的團隊，能夠在UI/UX的新功能上很快地執行迴圈。官方網站和GoogleDevelopersYouTube管道都是資訊的金礦，比如說，命令列的API(應用程式介面，)包含非常多有用的指令，比如說從控制台功能中的復制指令，復制到剪貼簿上。許多詳細的使用手冊同樣在HTML5Rocks里都能參考。如果你的好奇心很強，並且想了解瀏覽器究竟是如何運作的，那麼你會在這些教學里學到很多東西，幫助你全面掌控開發周期。除了上述的之外，最重要的是，透過網路工具你能知道現在在介面之下到底發生了什麼事情，以及優化你的下載速度，時間軸會以更深入的角度來告訴你瀏覽器做了哪些事情。如果你跟我們一樣充滿好奇心，你可以學到關於瀏覽器、Web是如何運作的，如此一來，你就可以反過來完整的操控應用程式的生命周期。以我個人觀點來說，如果它們依照現在的路線持續發展下去，肯定會變成Web供應開發商最終的IDE()，最強大的放入整合發展空間。Grunt說到工作自動化，Grunt是我們的首選。它是Javascript跑任務的專家，針對一般的任務提供大量整合性的外掛程式，擴展程度仍很高，提供很多選項讓你能夠自由的寫任何符合需求的工作內容。最棒的是，你能夠將這些任務結合創造更強大而復雜的工作。Grunt的范疇超出僅僅是自動化前端相關的工作，舉例來說，當我們在開發時，我們利用它來測試PHP：我們同樣也用它暫時解決在Vagrant中自動監測與保護的rsync(Unix下的一款應用軟體)一些效能問題，這是近來才被引進的方法。Grunt提供很廣泛的外掛程式，從瀏覽檔案夾、診斷訊息、編譯程式到最簡化你的程式碼。它的句法是一致且容易學習的，可以讓瑣碎的工作變得簡單。LiveReload你有沒有算過，每天平均有多少次會按鍵盤上的重新整理鍵呢?非常多，對吧!LiveReload是一個簡單的Web協議，不論檔案在哪時候被修改而觸發事件，客戶都能自行處理事情;客戶端和伺服器端都能進入各種不同的實作。說到Chrome的擴充功能，Chrome商店就是一個很強大的例子。去體驗看看吧，你一定能發現很多讓生活變得更簡單的東西。以下幾個是我們最喜歡的：1.WhatFont：你可以透過它知道在任何網站上內容的字型是什麼，當你在找最適合的文字編排時，或是重新調整美化你的字型風格時，它是非常好用的小工具。2.Pageruler：另一個很好用的應用程式，主要是因為任何前端開發者，都對像素要求百分之百的完美。3.ProxySwitchySharp：說到找出在地化資訊錯誤最佳的工具就非它莫屬，在地化資訊是哪些?比如說電話號碼、預設貨幣等等。想知道嗎?在ChromeApp中你能得到資訊!Mocha/Chai/Sinon測試測試，測試到你很想吐嗎?這是很常發生的，因為需要一大堆引導指令，而且在前端開發的初始階段沒有設計好測試，那麼後面的工作往往會變得非常困難。很幸運的是，我們現在有很棒的測試架構，就和你已經在使用的其他語言一樣，非常的有用和強大。兩個主要的框架是Jasmine和Mocha。過去我兩個都有使用過，最終選擇了後者，Mocha。它最主要的優勢在於，當你必須和非同步的編碼一同運作的時候，在Javascript的發展中它最普遍使用的方法。比如說，舉一個非常簡單的例子，這里有兩個不同的規格，一個由Jasmine寫，另一個則是Mocha/Chai：Jasmine的句法選擇是預設的，並以官方的文檔作說明，非官方的擴充功能增進了Jasmine非同步特色，提供和Mocha一樣的功能。花一些時間，來了解這個範例以及觀察Mocha的語法有多清楚。不像Jasmine，Mocha只提供行為的測試架構，關於BDD(Behavior-drivendevelopment)，而不是假物件(mock，主要存在的目的是協助單元測試程式可以順利進行)或是斷言(assertion，放在程式中的一階邏輯，如果一個結果為真或為假的邏輯判斷式)架構，因為它整合專用架構非常棒，就像是Chai和Sinon，幾乎沒什麼不好的地方。Sinon有完整的功能來mock假物件和stub假物件(用途和mock很接近)。舉例來說，你可以如何評估的方法，一直以來都使用Sinon的間諜類型(擷取自很傑出的文檔)：Chai的功能是在斷言這方面是非常傑出的，以和平常的語言非常相似的語法，舉例來說你可以看到以下的程式碼，就知道它很清楚簡單：Karma最後一個是Karma，Karma(一個測試程式是否符合需求的測試工具)是Javascript的程式測試工具，由AngularJS的團隊寫的，現在你可以徜徉在Mocha、Chai和Sinon中寫測試程式，何不同時用它們持續地測試、跑程式，給你實時的回饋呢?Karma可以讓你從你的工作站到持續整合製造(CI，ContinuousIntegration)執行你的測試，它能同時發布到多個瀏覽器(Chrome、Firefox、IE和PhantomJS等等)，除此之外，還能跑你的測試來挑戰它們，給予你對你的程式碼最大的信心。當然，我們甚至還沒有提到任何文字編輯器，SublimeText和Vim我們都有用，它們是我們生產力最最重要的基礎。然而在做開發的過程中，最真實的快樂就是你第一次寫的程式進行監測然後得到結果，這是一種實時的成就感，然後接下來你就能將它們發布到瀏覽器上。現在你已經非常有能力成為前端的忍者，在你的開發旅途中已經准備好要迎接每個挑戰了。。
❺ 網頁前端常用的庫或框架有哪些
bootstrap是twitter出的一款不錯的UI框架，或者與其說是框架不如說是類庫（lib），當然這里邊牽扯到一個「究竟什麼是框架什麼是類庫？」的問題，我們暫時不談。畢竟是有大公司背景的代碼堆，我覺得沒什麼「落伍」可言。
angular是前兩年之內突然火得一塌糊塗的一個fe框架，這個我覺得可以算的上是真正意義上的框架了，MVVM雙向綁定，包括它擁有足夠完善的社區、生態，甚至chrome上都有很多好用的相關插件（這一點可以說是佔了google出品的光），比較完整的大型項目都是可以考慮引入的。但如果你的網站只是做一些輕量級的東西，殺雞焉用宰牛刀吧我覺得。
backbone主要針對的MVC中的M層，至少我是這么理解的。對UI層它幾乎沒什麼太多的限制，一方面給出了coder自由度進行發揮，另一方面也等於在這方面框架本身對開發沒提供什麼太大的幫助。我覺得這更像是一個高手向的框架，另外對於underscore前端模板那一套東西，說實話作為一名php java啥都能寫的FE我始終覺得這套東西有那麼一種純JS工程師的一廂情願的意味。這是個人看法了，不一定準確，況且有人會搬出ajax動態渲染時 前端模板的作用來反駁我，別急著反駁，至少往下看完我說的話。
相比之下，react可以說是一個在MVC中V層做的十分出色和新穎的框架了，獨特的jsx編譯機制就已經讓你的代碼變得高大上了，我是覺得這個類庫在UI層做的更徹底更專業，或者說讓FE的代碼更專業了。更何況，react比angular更年輕，而且同樣擁有大公司背景，react native一出更是讓JS工程師的地位取得了革命性的提升，（不要跟我提phonegap，用過兩個東西後你會明白，react打包的app性能甩phonegap幾條街沒問題）。另外既然樓主提到了之前的網站是bootstrap，不妨可以看一看react-bootstrap這個東西，或許這就是你想要的。
❻ gulp怎麼樣配置前端目錄結構
裝merge-stream吧，npm install --save-dev merge-stream，然後代碼改改：
var gulp = require("gulp");
var sass = require("gulp-sass");
var merge = require('merge-stream');
// 復制靜態資源
var staticfolder = [];
var fonts = {
dist: "dist/fonts/",
src: "src/fonts/**/*"
}
var img = {
dist: "dist/img/",
src: "src/img/**/*"
}
staticfolder = [fonts, img];
gulp.task("static", function () {
var streams = staticfolder.map(function (item) {
return gulp.src(item.src).pipe(gulp.dest(item.dist));
})
return merge.apply(null, streams);
});
gulp.task("static:watch", function () {
var folder = staticfolder.map(function (item) {
return item.src
});
gulp.watch(folder, ["static"])
})
gulp.task("default", ["static:watch"]);
應該就好了
❼ 前端自動化：談談grunt和gulp的區別
1、易用Gulp相比Grunt更簡潔，而且遵循代碼優於配置策略，維護Gulp更像是寫代碼。
2、高效 Gulp相比Grunt更有設計感，核心設計基於Unix流的概念，通過管道連接，不需要寫中間文件。
3、高質量Gulp的每個插件只完成一個功能，這也是Unix的設計原則之一，各個功能通過流進行整合並完成復雜的任務。例如：Grunt的imagemin插件不僅壓縮圖片，同時還包括緩存功能。他表示，在Gulp中，緩存是另一個插件，可以被別的插件使用，這樣就促進了插件的可重用性。目前官方列出的有673個插件。
4、易學Gulp的核心API只有5個，掌握了5個API就學會了Gulp，之後便可以通過管道流組合自己想要的任務。
5、流使用Grunt的I/O過程中會產生一些中間態的臨時文件，一些任務生成臨時文件，其它任務可能會基於臨時文件再做處理並生成最終的構建後文件。而使用Gulp的優勢就是利用流的方式進行文件的處理，通過管道將多個任務和操作連接起來，因此只有一次I/O的過程，流程更清晰，更純粹。
6、代碼優於配置維護Gulp更像是寫代碼，而且Gulp遵循CommonJS規范，因此跟寫Node程序沒有差別。
❽ 前端自動化構建工具gulp有什麼用
gulpjs是一個前端構建工具，與gruntjs相比，gulpjs無需寫一大堆繁雜的配置參數，API也非常簡單，學習起來很容易，而且gulpjs使用的是nodejs中stream來讀取和操作數據，其速度更快。如果你還沒有使用過前端構建工具，或者覺得gruntjs太難用的話，那就嘗試一下gulp吧。