nodejs + gulp + webpack basics
Point involves how knowledge combined gulp, webpack, Babel, etc. combined NodeJS + NPM front-end development.
Chapter One: Open warm-up brain
Chapter II: gulp and webpack blended learning
Chapter 3: front-end tool Babel + ES2015 experience learning articles
Chapter IV: webpack + gulp + sass learning articles
Chapter V: webpack + git + Jenkins learning articles
Why do we need front-end engineering?
The significance of the project is to make the front end of the front end of the industry evolved from the era of barbarism as a regular army, many related tools and concepts born in recent years. Daily curiosity process of carrying out front-end engineering, the main challenge is to address the following issues:
✦ front-end code how to manage multiple projects?
How ✦ synchronous multiplex modify the code?
How ✦ allows developers to experience Gengshuang?
Too many items
Prior wrote a blog post on how to manage common projects referenced multiple projects? , The article mentioned certain projects the high side (PC / Mobile / App / Pad ), as so many items to develop and maintain front-end component is a tedious job, and there will be a lot of redundant work.
Better management front-end code
Front-end code to fit the background directory specification, could have been a really good front-end directory structure demolished apart, front-end code dispersing for management development experience and very friendly.
The engineered with front-end concept, front-end and back-end project items can be completely separated from the front by directory structure of the organization you want the code, and then follow the certain way to build the project output to the background, just perfect (is not it kind of concubines three thousand feeling).
Technology Selection
Research the market mainstream building tools, including gulp, webpack, fis, the final decision to build around gulp front-end engineering solutions, while introducing webpack to manage modular code division roughly as follows: gulp: html compression processing / preprocessing / conditional compilation, Image compression, sprite automatically merge tasks webpack: management of modular, build js / css.
As for why choose gulp & webpack, mainly due to gulp relatively more flexible and can be customized to do more tasks, while webpack in a modular program is too good (I can not help but praise).
How front-end design project directory structure?
Pulled out of the front-end project directory structure is as follows
appfe目录: Appfe is distal the aforementioned items, the item comprises two main parts: the front-end code, build tasks appfe > gulp目录: gulp contains all the subtasks, each subtask contains all logically related tasks. appfe > src目录: Contains all front-end code, such as pages, components, images, font files, and so on. appfe > package.json: It goes without saying it. appfe > gulpfile.js: Gulp entry file, the introduction of all the subtasks gulp.
Ideal is full, the reality is very skinny, so good wishes, in the specific practice, destined to spend a lot of efforts to step on a lot of the pit.
The Daily curiosity about on-line upgrade, finally have time to put together bits and pieces before Bowen, and combined with his experience to share to you, of course, the future may also have larger adjustment, start a discussion here, we can reference thinking.
What gulp that?
gulp is a flow-based build tool, the tool member relative to the other, the more simple and more efficient.
Wrote before: Tip gulp entry , you can refer to, if you already have some knowledge of gulp please skip.
What webpack that?
webpack modular management tool module may be implemented using webpack demand loading, pre-processing module, the module package functions.
Wrote before: Tip webpack entry , you can refer to, if you already have some knowledge of webpack please skip.
How to integrate gulp & webpack
Now webpack was obviously an increasingly popular trend, and gulp in time jquery times of the year also played an important role. They can be seen as a build tool, build tool's purpose is to achieve the build process automation. They are node kit can be installed to the local computer via npm globally.
Gulp is the task of running the tool, for example, commonly used commands are: gulp.task (), Webpack is not a task to run the tool, Webpack is a module build tool. The main purpose of the program is to help build a static resource module and its dependencies. So, gulp in jQuery perfect age, and for SPA large single-page applications, webpack modular solves this problem.
gulp taking the streaming route, webpack taking the module processing route, but both goals to be achieved is the same, and that is to promote the automation and management of front-end engineering field.
webpack is one of many subtasks gulp more complex part, of JS / CSS performs the correlation process.
Comprising: means for analysis, demand loading, JS code compression merger, pulled out a common module, SourceMap, PostCSS, CSS code compression, and so on ...
Use node build environment (webpack, gulp)
key point
The key point is that the code npm script running in this catalog is a priority modules, i.e. running webpack, gulp need global module when installed, the installation can now only operate within this project with
Code
-
package.json
-
-
{
-
...
-
scripts: {
-
"dev": "webpack",
-
"build": "gulp"
-
}
-
-
...
-
}
-
Use (delivery backend)
Simply put the entire local projects are all copied to the back-end staff, and install node.js environment on the back-end development machine which can operate normally
- Run the code
-
npm run dev
-
npm run build
nodejs, npm, gulp, webpack introduction of and relationships
nodejs
Node.js is a JavaScript runtime environment Chrome V8 engine. Let JavaScript running in an open platform server, which allows JavaScript to be PHP, Python, Ruby and other languages on an equal footing server-side scripting language. (Note that the installation of the set environment variables)
asl
npm is a module nodejs is nodejs package manager.
When we develop on Node.js, will use a lot of javascript code that others have written, if the search whenever we need someone else's code, all by name, source code download, extract, re-use, can be very troublesome. So it was a package manager npm. They write their own source npm uploaded to the official website, or if you use a certain number, directly through npm installed on it, do not control where the source code. And if we want to use modules A, and are also dependent module A module B, module B and C are also dependent modules D, this time npm based dependencies, all dependent packages are downloaded and manage. Imagine how much trouble if these efforts depends entirely on our own to complete will!
On the market there are many popular third-party tools, cnpm, yarn, bower
gulp
Gulp development process is to regulate the front end, front and rear end to achieve separation of modular development, version control, combined with the compressed file, the mock data stream functions built on a front end automation tool. Said image point, "Gulp like a product line, the entire product from scratch, are subject to the control of the pipeline, in the pipeline for our products can be managed."
Gulp is to build the entire development process through the task.
1. Build Tools
2. Automation
3. Improving the efficiency with
webpack
Webpack today is the most popular front-end resource-based configuration management and modular packaging tools. It can be packaged into a number of loose front end module compliant resource dependent production and deployment in accordance with the rules. May also be loaded on demand code modules are separated until the time actually required then loaded asynchronously. By loader conversion of any kind of resources can be regarded as a module, such as CommonJs modules, AMD module, ES6 module, CSS, images, JSON, Coffeescript, LESS and so on.
1. Packaging Tool
2. Modular recognition
3. The program module code compiled by
gulp and webpack tools are based on node.js
to sum up
1.jquery still rely on a combination of rich dom to operate the business logic, business logic as complex, each line of code, there will be incomprehensible feeling. because:
- First: the business logic and UI change the mix,
- Second: UI which also mingled this interactive logic, so that would be more logical confusion confusion.
Of course, the second point is the other hand the advantage, because sometimes UI interaction logic can be embedded in a more flexible business logic, in other MV * which are relatively difficult to handle frames.
2.vuejs very small fresh, small fresh does not mean that can not do complex things, such as the official demo pretty good: http://vuejs.org/examples/svg.html
most 3.reactjs amount of code, because it has to manage UI logic, but also worry about rendering the dom.
4.extjs no sense not used.
5.angularjs fast rendering, it is large (relative to vue.js).
Front-end engineering automation can handle some complicated work, improve development efficiency, reduce low-level errors.
More importantly, the beginning of the article or said, the most significant front-end engineering is to give us a new perspective on front-end development, front-end development so that you can do more complicated things more challenging!
[See article]
Contrast React 1, the front end of the three mainstream framework, Vue, Angular - Jane book https://www.jianshu.com/p/c4005414025c
2, node.js + npm + vue + webpack + nginx packaging item distal deployed to the server - https://blog.csdn.net/qq_35813265/article/details/81872351
3, nodejs with nginx perfect match - https://blog.csdn.net/qq_17475155/article/details/66473855
https://blog.csdn.net/chszs/article/details/43203127 - 4, with Nginx do NodeJS application load balancing
5, using pm2 lying load balancing - https://blog.csdn.net/qq_17475155/article/details/53823862