前端集成解决方案(webpack、gulp)


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

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

 前端集成解决方案(webpack、gulp)_第1张图片

二、解决了前端哪些问题

 前端集成解决方案(webpack、gulp)_第2张图片

三、常用的前端构建集成

1、Gulp

gulp是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作

1)构建工具

2)自动化

3)提高效率用

2webpack

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

1)打包工具

2)模块化识别

3)编译模块代码方案用

Gulpwebpack在定义和用法上来说都不冲突,可以结合来使用

 

 

四、入门指南(红色标注重点推荐)

1gulp

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

 

2webpack

 

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

五、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

 

六、其他摘抄

1Gulp

Gulp、GruntMake(常见于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

3Gulp应该和Grunt比较

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

4、webpackgulp的区别

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

5JS模块化的方案

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

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

·-----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的插件可以完成nodebower installnpm installnpm run等命令,可以在package同时打包前台代码,最终和后端java一起打成一个war包。我们项目里就是这样做的。

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

7devDependenciesdependencies的区别

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

 

 

你可能感兴趣的:(前端基础)