Ⅰ 常見的前端集成部署方案有哪些各自的優缺點是什麼
前端行業經歷了這么長時間的發展，技術元素非常豐富，這里列舉出一般web團隊需要用到的技術元素：
開發規范：包括開發、部署的目錄規范，編碼規范等。不要小瞧規范的威力，可以極大的提升開發效率，真正優秀的規范不會讓使用者感到約束，而是能幫助他們快速定位問題，提升效率。
模塊化開發：針對js、css，以功能或業務為單元組織代碼。js方面解決獨立作用域、依賴管理、api暴露、按需載入與執行、安全合並等問題，css方面解決依賴管理、組件內部樣式管理等問題。是提升前端開發效率的重要基礎。現在流行的模塊化框架有requirejs、seajs等。
組件化開發：在模塊化基礎上，以頁面小部件(component)為單位將頁面小部件的js、css、html代碼片段放在一起進行開發、維護，組件單元是資源獨立的，組件在系統內可復用。比如頭部(header)、尾部(footer)、搜索框(searchbar)、導航(menu)、對話框(dialog)等，甚至一些復雜的組件比如編輯器(editor)等。通常業務會針對組件化的js部分進行必要的封裝，解決一些常見的組件渲染、交互問題。
組件倉庫：有了組件化，我們希望將一些非常通用的組件放到一個公共的地方供團隊共享，方便新項目復用，這個時候我們就需要引入一個組件倉庫的東西，現在流行的組件庫有bower、component等。團隊發展到一定規模後，組件庫的需求會變得非常強烈。
性能優化：這里的性能優化是指能夠通過工程手段保證的性能優化點。由於其內容比較豐富，就不在這里展開了，感興趣的同學可以閱讀我的這兩篇文章 [1] [2]。性能優化是前端項目發展到一定階段必須經歷的過程。這部分我想強調的一點是性能優化一定是一個工程問題和統計問題，不能用工程手段保證的性能優化是不靠譜的，優化時只考慮一個頁面的首次載入，不考慮全局在宏觀統計上的優化提升也是片面的。
項目部署：部署按照現行業界的分工標准，雖然不是前端的工作范疇，但它對性能優化有直接的影響，包括靜態資源緩存、cdn、非覆蓋式發布等問題。合理的靜態資源資源部署可以為前端性能帶來較大的優化空間。
開發流程：完整的開發流程包括本地開發調試、視覺效果走查確認、前後端聯調、提測、上線等環節。對開發流程的改善可以大幅降低開發的時間成本，工作這些年見過很多獨立的系統（cms系統、靜態資源推送系統）將開發流程割裂開，對前端開發的效率有嚴重的阻礙。
開發工具：這里說的工具不是指IDE，而是工程工具，包括構建與優化工具、開發-調試-部署等流程工具，以及組件庫獲取、提交等相關工具，甚至運營、文檔、配置發布等平台工具。前端開發需要工具支持，這個問題的根本原因來自前端領域語言特性（未來我會單獨寫一篇文章介紹前端領域語言缺陷問題）。前端開發所使用的語言（js、css、html）以及前端工程資源的載入與定位策略決定了前端工程必須要工具支持。由於這些工具通常都是獨立的系統，要想把它們串聯起來，才有了yeoman這樣的封裝。前面提到的7項技術元素都直接或間接的對前端開發工具設計產生一定的影響，因此能否串聯其他技術要素，使得前端開發形成一個連貫可持續優化的開發體系，工具的設計至關重要。
Ⅱ 前端開發需要配置什麼環境
web前端開發環境的搭配：
A、Sublime3安裝配置：
Sublime跨平台的前端開發神器,是一個共享軟體,免費使用；下載最新Sublime3安裝包；
-官網地址:http://www.sublimetext.com/
-安裝包管理器
打開Sublime3控制台,ctrl+~
輸入安裝包管理器命令代碼，注意需要聯網才能安裝,因為是在線下載包
包管理器的官網地址:https://packagecontrol.io
-安裝第三方插件(包)
打開命令面板:ctrl+shift+p；
輸入install,然後回車，然後可以搜索想要的插件,回車安裝；Atom工具使用
B、Atom工具使用：
由github發布的前端開發工具，集成了chrome的調試工具，是一款非常強大和開發的開發工具平台。在file裡面的setting裡面進行設置,包括字體的大小,快捷鍵,背景顏色主題等；
官網地址：https://atom.io/
C、WebStorm10的安裝與使用：
WebStrom是最專業的前端IDE開發工具，是一個非常重量級的開發工具,是專業為我們前端設計的IDE,用他來開發是效率非常高；
D、總結三款開發工具的優劣：
Sublime3:需要安裝第三方的包，一般。Atom：集成度非常好，也很輕，需要自己安裝第三方的包。Webstrom：大項目，建議使用webstrom，非常強大，但是也很重。
Ⅲ 前端開發怎麼做
Web前端開發是從網頁製作演變而來的，名稱上有很明顯的時代特徵。在互聯網的演化進程中，網頁製作是Web1.0時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行為也以瀏覽為主。2005年以後，互聯網進入Web2.0時代，各種類似桌面軟體的Web應用大量涌現，網站的前端由此發生了翻天覆地的變化。網頁不再只是承載單一的文字和圖片，各種富媒體讓網頁的內容更加生動，網頁上軟體化的交互形式為用戶提供了更好的使用體驗，這些都是基於前端技術實現的。 以前會Photoshop和Dreamweaver就可以製作網頁，現在只掌握這些已經遠遠不夠了。無論是開發難度上，還是開發方式上，現在的網頁製作都更接近傳統的網站後台開發，所以現在不再叫網頁製作，而是叫Web前端開發。Web前端開發在產品開發環節中的作用變得越來越重要，而且需要專業的前端工程師才能做好，這方面的專業人才近幾年來備受青睞。Web前端開發是一項很特殊的工作，涵蓋的知識面非常廣，既有具體的技術，又有抽象的理念。簡單地說，它的主要職能就是把網站的界面更好地呈現給用戶。
Ⅳ 用eclipse開發前端頁面html+js，並與php開發的後端進行交換，請教如何在eclipse上配置環境及伺服器
1.貌似js是所有瀏覽器都支持（可能版本及某些特性的支持不一樣），不用專門就此配置環境及伺服器（除非你想要支持java）。
2.貌似ajax前端應用的更多些，通常都是ajax發送請求到後端，再根據後端的返回數據進行響應處理，將結果呈現到瀏覽器。
3.如果後端使用php，那麼根據伺服器的不同可以選擇 wamp / lamp，主要的區別在於伺服器一個用的 IIS ，另一個用的 Apache。
搭建PHP環境，通常是 IIS (Apache) + MySQL (或其他資料庫)+PHP，你既可以分別下載並安裝這三種軟體，也可以下載網上提供的打包好的集成安裝包。
如果只是想要快速搭建PHP的支持環境，那麼，使用集成安裝包（如 XAMPP、WampServer等等），使用方便。
而如果想學習和掌握一門技術，那麼，手動下載各個部分分別安裝配置環境是必不可少的體驗。
Ⅳ 如何打造一個令人愉悅的前端開發環境
使用到的工具：
NodeJs （組件管理）
GIT （代碼管理）
browserify （模塊化）
Sass (CSS預編譯工具)
Grunt （自動化工具）
在文件夾下新建3個空文件夾
build,src,test
環境初始化（其實就是生成一個package.json）
npm init
2.安裝Grunt
npm install grunt --save-dev
新建Gruntfile.js
mole.exports = function(grunt) {
// Project configuration.,項目配置，組件配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
});
// Load the plugin that provides the "uglify" task.
// grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
//定義動作
grunt.registerTask('default', []);
};
4.執行grunt,是否出行done，則grunt配置完成
5.grunt常用插件
contrib- 前綴是grunt官方團隊提供的插件，否知是第三方
Contrib-jshint——javascript語法錯誤檢查；
Contrib-watch——實時監控文件變化、調用相應的任務重新執行；
Contrib-clean——清空文件、文件夾；
Contrib-uglify——壓縮javascript代碼
Contrib-——復制文件、文件夾
Contrib-concat——合並多個文件的代碼到一個文件中
karma——前端自動化測試工具
6.使用uglify插件
npm install grunt-contrib-uglify --save-dev
修改Gruntfile.js文件
// Project configuration.,項目配置，組件配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/*.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify);
grunt.registerTask('default', ['uglify']);
執行grunt，自動啟用uglify插件
實驗，在src下新建test.js
運行grunt，查看是否生成壓縮後的文件
8.使用watch，監聽變化，實現自動化
安裝
npm install grunt-contrib-watch --save-dev
配置
watch:{
build:{
files:['src/*.js','src/*.css'],
tasks:['uglify'],//發生變化執行uglify
options:{spawn:false}
}
}
載入
grunt.loadNpmTasks('grunt-contrib-watch');
執行
grunt.registerTask('default', ['uglify','watch']);
9.執行grunt,現在去修改test.js,會執行設定好的動作，control+c停止。
10.最終的Gruntfile.js
mole.exports = function(grunt) {
// Project configuration.,項目配置，組件配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/*.js',
dest: 'build/<%= pkg.name %>.min.js'
}
},
watch:{
build:{
files:['src/*.js','src/*.css'],
tasks:['uglify'],//發生變化執行uglify
options:{spawn:false}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
//定義動作
grunt.registerTask('default', ['uglify','watch']);
};
11.最終的package.json文件
{
"name": "html5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-uglify": "^1.0.1",
"grunt-contrib-watch": "^1.0.0"
}
}
12.環境快速搭建
安裝好nodejs
復制package.js Gruntfile.js
新建文件夾 src,test,build
執行 npm install
執行 grunt
我沒有測試過，應該是可以的
Ⅵ 一台機器上可以搭建兩個前端框架的開發環境嗎
也可以將兩個javaweb項目放在同一個tomcat運行也是可以的,我就是這么做的,如果兩個的話,進入conf裡面server.xml修改一下埠,不要重復