前端集成解决方案webpackgulp
前端集成解决方案（webpack、gulp）
一、什么是前端集成解决方案
FIS （
Front-end Integrated Solution ）是专为解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题的工具框架。
二、解决了前端哪些问题
三、 常用的前端构建集成
1、 Gulp
gulp 是工具链、构建工具，可以配合各种插件做
js
压缩，
css
压缩，
less
编译 替代手工实现自动化工作
（ 1 ）构建工具
（ 2 ）自动化
（ 3 ）提高效率用
2 、 webpack
webpack 是文件打包工具，可以把项目的各种
js
文、
css
文件等打包合并成一个或多个文件，主要用于模块化方案，预编译模块的方案
（ 1 ）打包工具
（ 2 ）模块化识别
（ 3 ）编译模块代码方案用
Gulp 和
webpack
在定义和用法上来说都不冲突，可以结合来使用
四、 入门指南（红色标注重点推荐）
1 、 gulp
gulp 详细入门教程
（安装与插件）
最有用的 Gulp 插件汇总
2 、 webpack
webpack 入门指南
WebPack 简明学习教程
易懂的 webpack 使用教程
入门 Webpack ，看这篇就够了
webpack 学习资源集合及学习笔记
五、 webpack +gulp 构建
项目源码 ：
前端工程化实践
之
整合 gulp/webpack
[**webpack 基础
+webpack
配置文件常用配置项介绍
+webpack-dev-server**]( )
六、 其他摘抄
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，然后配置你需要的插件，就可以把以前需要手工做的事情让它帮你做了。
4、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的插件。
6、 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
。