1. 前端构建工具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
扩展:
下面还有一些楼主的学习笔记:
有兴趣的可以多多交流@ 楼主博客
2. 现在比较好用的前端开发工具有哪些啊
1. node.js + npm， 这个是前端工具的一个平台，没有他们就没有以下的工具，建立开发环境，下载开发工具，运行开发工具的利器
2. bower, 库依赖管理器，类似于npm，但针对浏览器JavaScript的依赖管理，减少寻找库，下载库和升级库的烦恼
3.grunt，流程自动化管理工具，将你非编程的开发步骤减到最小，grunt watch+liveReload或者grunt connect,可以使得免除你F5无尽地狱，发布和开发各种无压力。以下大部分开发工具，都有grunt的相对应的插件，也就是说他们都能利用grunt进行自动化运行
5. 本人用less比较多，因为基本无缝兼容历史遗留系统中的css，（而Sass语法比较特殊，还没有专门用过，应该开发新系统的css比较好），一套css预编译语言，可以把less语法转成css语法，lessc是less语言编译器，配合grunt less，编写大型css文档毫无压力。
6.Phantomjs，没有界面的浏览器，用js脚本控制其操作网页。测试，抓图，网页流程自动化利器。配合casperjs的语法简化功能真强库后，控制Phantomjs就更加容易了
7. grunt PhotoBox, 利用phantomjs抓图功能和ImageMagick图片比较功能，在利用live-reload即时刷新功能，可以让你开发css的时候，快速对n多个页面进行观察，看其前后变化。不过缺点也比较明显，就是速度慢。但比起手动对比来看，还是非常快的。值得css开发时拥有
8. phantomCSS，这个和grunt photobox类似，都用于css开发的，差别是photobox是全局观察差别，而这个是单元组件观察差别，它方便你就抓页面中某一块元素然后进行前后比较，更加注重细节上的差异，这个比较合适组件开发时候使用。
9. jshint，帮助你快速定位JavaScript的语法错误和潜在的跨浏览器兼容性问题。在部署你JS前，用jshint检查一下是没错的 。
10.UglifyJS，压缩JavaScript代码，使你的JS代码可以更加快速的加载。有grunt的插件
11. browserify允许你在浏览器里面使用CMD标准模块，但本人认为它的另外一个优势是合并代码，开发时候可以把代码模块化，分成很多很多小文件，然后有调理的放到相对应文件夹下，然后最后合成单一文件。本人曾经利用browserify开发greasemonkey代码，大大简化了greasemonkey的开发难度和增强了greasemonkey代码的质量。browserify有grunt插件，这样又减少的开发步骤。
12. Karma， google开发的一个单元测试运行器，这个自己本身不是一个单元测试框架，而是配合测试单元框架的一个工具。由于前端浏览器众多，就算你有live-reload这样自动化工具，但是还是要手动打开各种浏览器，手动把你的单元测试在各个浏览器都运行一遍。这个工具目的是目的就是让电脑能自动化打开各种浏览器，然后把单元测试在各个浏览器中自动运行一遍，让这个步骤也能自动化了。
13.clean-css (grunt cssmin)， 我用的是grunt cssmin，但是grunt cssmin实际上背后使用的是clean-css工具，这个工具就是用来压缩精简css的，让css文件大小更小。
3. web前端看哪些书籍好，前端开发书籍大全
1、HTML/HTML5基础：
《HTML5秘籍》
2、CSS
推荐书籍：
1、《图灵程序设计丛书:HTML5与CSS3设计模式》
2、《Web开发技术丛书:深入理解Bootstrap》
3、《高流量网站CSS开发技术》
4、《CSS设计彻底研究》 这个一定要
5、《Web开发技术丛书:深入理解Bootstrap》
6、可以找一些专门讲SASS的书，但是我没找到
7、《CSS权威指南(第3版)》
3、深入学习JS
推荐书籍：
1、《单页Web应用:JavaScript从前端到后端 》
2、《Web 2.0界面设计模式》
3、《响应式Web设计:HTML5和CSS3实战》
5、工具
学会使用grunt进行JS、CSS、HTML 压缩，特别是模块化js开发时候的压缩
会用PS进行切图、保存icon
入手sublime、webstorm
学会使用chrome调试面板，特别是：console、network、profile、element
进阶：
4、性能
推荐书籍：
1、《Web性能权威指南》
2、雅虎网站页面性能优化的34条黄金守则
5、HTTP及TCP协议族
推荐书籍：
1、《HTTP权威指南》
2、《TCP/IP详解》
3、《图解TCP/IP(第5版)》
请使用手机"扫一扫"x
4. HTML是什么
HTML的全称是超文本标记语言，是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。HTML是由HTML命令组成的描述性文本，可以解释文字、图形、动画、声音、表格、链接等。Html是一种用来描述网页的语言。它被称为超文本标记语言，它是一种标记语言。它包括一系列标签，可以统一网络上文档的格式，将分散的互联网资源连接成一个逻辑整体。