❶ 干货帖，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吧。