前端集成解决方案（webpack、gulp）

1、什么是前端集成解决方案

FIS（Front-end Integrated Solution）是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。

 

2、解决了前端哪些问题

 

3、经常使用的前端构建集成

一、Gulp

gulp是工具链、构建工具，能够配合各类插件作js压缩，css压缩，less编译 替代手工实现自动化工做

（1）构建工具

（2）自动化

（3）提升效率用

2、webpack

webpack是文件打包工具，能够把项目的各类js文、css文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案

（1）打包工具

（2）模块化识别

（3）编译模块代码方案用

Gulp和webpack在定义和用法上来讲都不冲突，能够结合来使用

 

 

4、入门指南（红色标注重点推荐）

1、gulp

gulp详细入门教程

http://www.ydcss.com/archives/18

http://www.ydcss.com/archives/94

 

前端构建工具gulpjs的使用介绍及技巧（安装与插件）

http://www.cnblogs.com/2050/p/4198792.html

 

最有用的Gulp插件汇总

http://www.open-open.com/lib/view/open1426232157888.html

 

2、webpack

 

webpack 入门指南

http://www.w2bc.com/Article/50764

 

WebPack 简明学习教程

http://www.jianshu.com/p/b95bbcfc590d

 

易懂的 webpack 使用教程

https://gold.xitu.io/entry/574fe7c579bc440052f6d805

 

入门Webpack，看这篇就够了

http://www.jianshu.com/p/42e11515c10f#

webpack学习资源集合及学习笔记

https://github.com/lengziyu/learn-webpack

5、webpack+gulp构建

gulp+webpack构建配置

http://www.cnblogs.com/maskmtj/archive/2016/07/21/5597307.html

项目源码：https://github.com/jokermask/gulp_webpack_demo

给已有的gulp工程里增长webpack

http://www.ituring.com.cn/article/199293

 

前端工程化实践 之整合gulp/webpack

http://www.tuicool.com/articles/iUZVb2u

http://codecloud.net/13160.html

 

webpack基础+webpack配置文件经常使用配置项介绍+webpack-dev-server

http://www.cnblogs.com/QxQstar/p/5961387.html

 

6、其余摘抄

1、Gulp

Gulp、Grunt和Make(常见于c/cpp）、Ant、Maven、Gradle（Java/Android）、Rake、Thor（Ruby）同样，都是是Task Runner。用来将一些繁琐的task自动化并处理任务的依赖关系。
其中有些是基于配置描述的，描述逻辑比较费劲，好比Ant基于xml。还有些就是代码，比较灵活，我的偏好这种。好比Rake、Thor、Gulp、Gradle。对于Gradle来讲也有些难搞。由于它自己是Groovy的DSL。若是要深刻使用，你还得学一下Groovy语言。其余就好多了Rake、Thor就是写Ruby；Gulp就是JavaScript。相对门槛低不少。

2、模块化解决方案：

Browserify  It provides a way to bundle CommonJS modules together, adheres to the Unix philosophy（小工具协做）, is in fact a good alternative to Webpack.
Webpack  takes a more monolithic（总体解决、大而全） approach than Browserify... is relies on configuration.
webpack官网有对两者的使用方法进行对比，能够看一下： webpack for browserify users

3、Gulp应该和Grunt比较

Gulp / Grunt 是一种工具，可以优化前端工做流程。好比自动刷新页面、combo、压缩css、js、编译less等等。简单来讲，就是使用Gulp/Grunt，而后配置你须要的插件，就能够把之前须要手工作的事情让它帮你作了。

四、webpack和gulp的区别

gulp是基于流的构建工具：all in one的打包模式，输出一个js文件和一个css文件，优势是减小http请求，万金油方案。
webpack是模块化管理工具，使用webpack能够对模块进行压缩、预处理、打包、按需加载等。

5、JS模块化的方案

说到 browserify / webpack ，那还要说到 seajs / requirejs 。这四个都是JS模块化的方案。其中seajs / require 是一种类型，browserify / webpack 是另外一种类型。

·-----seajs / require : 是一种在线"编译"模块的方案，至关于在页面上加载一个CMD/AMD解释器。这样浏览器就认识了define、exports、module这些东西。也就实现了模块化。

·-----browserify / webpack : 是一个预编译模块的方案，相比于上面 ，这个方案更加智能。没用过browserify，这里以webpack为例。首先，它是预编译的，不须要在浏览器中加载解释器。另外，你在本地直接写JS，不论是AMD / CMD / ES6 风格的模块化，它都能认识，而且编译成浏览器认识的JS。

这样就知道，Gulp是一个工具，而webpack等等是模块化方案。Gulp也能够配置seajs、requirejs甚至webpack的插件。

六、java作后端，前端使用gulp搭建，怎么部署呢？

        后端是由java搭建的，如今前端的页面并非由Gulp搭建，在学习gulp过程当中，发现须要node.js，但是java的搭建是在其余环境，我用Gulp搭建和完成前端以后，怎么配合后端进行部署呢？ 

        maven有个叫frontend.maven.plugin的插件能够完成node和bower install，npm install，npm run等命令，能够在package同时打包前台代码，最终和后端java一块儿打成一个war包。咱们项目里就是这样作的。

   另外再补充一点，如不用maven插件打成一个war的话（先后端工程解耦），也能够设2个有关联关系的jenkins project前后打包部署前端和后端。

7、devDependencies和dependencies的区别

区别是：
dependencies 程序正常运行须要的包。
devDependencies 是开发须要的包，好比 一些单元测试的包之类的。
一个node package有两种依赖，一种是dependencies一种是devDependencies，
其中前者依赖的项该是正常运行该包时所须要的依赖项，
然后者则是开发的时候须要的依赖项，像一些进行单元测试之类的包。
若是将包下载下来在包的根目录里运行npm install默认会安装两种依赖，若是只是单纯的使用这个包而不须要进行一些改动测试之类的，可使用npm install --production，只安装dependencies而不安装devDependencies。
若是是经过如下命令进行安装npm install packagename那么只会安装。dependencies，若是想要安装devDependencies，须要输入。npm install packagename --dev。

原文地址：http://blog.csdn.net/linyeban/article/details/54319048