Front-End integration Solutions (Webpack, gulp) __web

first, what is the front-end integration solution

FIS (Front-End integrated Solution) is a tool framework designed to address issues such as automation tools, performance optimization, modular frameworks, development specifications, code deployment, and development processes in front-end development. Second, solve the front-end problems

third, the common front-end construction integration 1, Gulp

Gulp is a tool chain, build tools, can be used with a variety of plug-ins to do JS compression, CSS compression, less compilation instead of manual implementation of automated work

(1) Building tools

(2) Automation

(3) Increase efficiency by 2, Webpack

Webpack is a file packaging tool, you can project a variety of JS text, CSS files, such as packaging into one or more files, mainly for the modular program, precompiled module program

(1) Packaging tools

(2) Modular identification

(3) Compiling module code scheme with

Gulp and Webpack are not conflicting in definition and usage, they can be combined to use

Iv. Getting Started Guide (Red Marking key recommendation) 1, Gulp

Gulp a detailed introductory tutorial

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

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

Introduction and techniques for the use of front-end building tools Gulpjs (Installation and Plug-ins)

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

Most Useful Gulp plug-in rollup

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

2, Webpack

Webpack Getting Started Guide

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

Webpack Concise Learning Course

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

Easy to use tutorials for Webpack

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

Getting Started Webpack, look at this one's enough.

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

Webpack Learning Resources Collection and learning notes

Https://github.com/lengziyu/learn-webpack Five, Webpack+gulp construction

Gulp+webpack build Configuration

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

Project Source: Https://github.com/jokermask/gulp_webpack_demo

Add Webpack to existing gulp works

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

The integration of front-end engineering practice Gulp/webpack

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

Http://codecloud.net/13160.html

Webpack Basic +webpack Profile Common configuration Items +webpack-dev-server

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

Vi. Other excerpts 1, Gulp

Gulp, Grunt, and make (common to c/cpp), Ant, Maven, Gradle (java/android), Rake, Thor (Ruby), are task Runner. Used to automate and process the dependencies of tasks in some tedious task.
Some of these are based on configuration descriptions, and the description logic is more laborious, such as ant based on XML. There are some code, more flexible, personal preference for this. such as Rake, Thor, Gulp, Gradle. It's also a little tricky for gradle. Because it is groovy's DSL itself. If you want to use it in depth, you'll have to learn the groovy language. The other is much better rake, Thor is written ruby;gulp is JavaScript. The relative threshold is much lower.

2. Modular Solution: Browserify It provides a way to bundle COMMONJS modules together, adheres to the Unix philosophy (gadget Collaboration), is in fact a goo D Alternative to Webpack.
Webpack takes a more monolithic (overall settlement, all-inclusive) approach than ... is browserify on relies.
Webpack Official website has the use of the two methods to compare, you can look at: Webpack for browserify users

3, Gulp should compare with grunt

Gulp/grunt is a tool that optimizes front-end work flow. such as automatic refresh page, combo, compressed CSS, JS, compile less and so on. To put it simply, use the Gulp/grunt and configure the plugin you need to make it work for you before you have to do something manually.

4, the difference between Webpack and gulp

Gulp is a stream based build tool: All in one packaging mode, output a JS file and a CSS file, the advantage is to reduce the HTTP request, the balm scheme.
Webpack is a modular management tool that uses Webpack to compress, preprocess, package, and load on demand. 5, JS Modular program

When it comes to Browserify/webpack, it's also about Seajs/requirejs. These four are all JS modular solution. Where Seajs/require is a type, Browserify/webpack is another type.

•-----Seajs/require: An online "compile" module, which is equivalent to loading a CMD/AMD interpreter on the page. So the browser knows define, exports, module these things. Also realized the modularization.

•-----Browserify/webpack: is a precompiled module scheme, compared to the above, this scheme is more intelligent. No use of browserify, here take Webpack for example. First, it is precompiled and does not need to load the interpreter in the browser. In addition, you directly write JS locally, regardless of the amd/cmd/es6 style of modularity, it can be recognized, and compiled into a browser to understand the JS.

This makes it known that Gulp is a tool, and webpack and so on are modular solutions. Gulp can also configure Seajs, Requirejs, and even Webpack plug-ins.

6, Java to do the back end, the front-end use of gulp to build, how to deploy it.

The backend is built by Java, now the front page is not built by gulp, in the Learning Gulp process, found that the need for node.js, but the Java construction is in other environments, I use Gulp to build and complete the front end, how to cooperate with the back end to deploy it.

Maven has a plugin called Frontend.maven.plugin that can complete the node and Bower INSTALL,NPM install,npm run commands, and you can package the foreground code at package, End up with back-end Java as a war package. That's what we do in our project.

In addition, if you do not use the Maven plugin to make a war (decoupling of the front and back), you can also set up 2 related Jenkins project to package the front-end and back end. 7, the difference between devdependencies and dependencies

The difference is:
Dependencies the package that the program needs to run normally.
Devdependencies is the development of the required packages, such as some unit-tested packages.
One node package has two kinds of dependencies, one is dependencies, the other is devdependencies,
Where the former depends on the item that is required to run the package normally,
The latter is a dependency that needs to be developed, like some kind of package for unit testing.
If you download the package and run NPM install in the root directory of the package, two dependencies will be installed by default, and you can use NPM install--production If you simply use this package without having to do some change testing. Install dependencies only and do not install devdependencies.
If you install NPM install PackageName with the following command, it will only be installed. dependencies, if you want to install devdependencies, you need to enter. NPM Install PackageName--dev.

Original address: http://blog.csdn.net/linyeban/article/details/54319048