Ⅰ 常见的前端集成部署方案有哪些各自的优缺点是什么
前端行业经历了这么长时间的发展，技术元素非常丰富，这里列举出一般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修改一下端口,不要重复