Preliminary study on Gulp and Webpack

Gulp true "process" tools

I remember the internship just into the company to see Grunt, or a little blindfolded, has been a local development, F5, did not expect the front end also need to "compile tools." So grunt always give me the feeling is "compile tool", you write a lot of code can not directly "execute", need this tool to "compile" to go online. It to automate a lot of things, I have also written a company with the grunt plug-in, only need to configure, and then join the task to execute, very convenient. But when I saw Gulp's code (not yet starting to read the document, API), I suddenly realized that many of the grunt "unnatural" designs gulp really made a clear, structured process.

Gulp.task (' Default ', function () {  //) Put your default task code in this  gulp.src (' client/*.js ')  . Pipe (replace (' Bar ', ' foo ') )  . Pipe (Minify ())  . Pipe (Gulp.dest (' build/');});

这是我仿照官网写的DEMO，对很多工程师来说pipe这个命名就很清晰了，它就是借鉴了unix的管道概念，前面文件输出给后面文件，这个也就是gulp对比grunt最大的改进，更加简单明了，据说这样也加快速度，还没有在实际项目中运用过，所以没有对比过。不管这种设计的确可以说是grunt的替代品了。

As for the plug-in aspect also does not have to worry, Gulp's plug-in is also very powerful, basically the project commonly used has.

Webpack Sword return to the Pope

Webpack is also very fire, its official website map also introduced its function, all front-end things are packaged into JS file. Beginner of it, I think it solves the problem is now the front-end of a variety of "language", what sass Ah, coffeescript, there are framework templates, grammar sugar and so on, each has a compilation tool, and Webpack loader can kill, install the appropriate tools, It can be packaged together as you think.
For example, Vue, can be placed in a single file, in the team to do component development, and even individual writing different templates are ok. Finally, the individual components are packaged together using Webpack.
Configuration file for Webpack:

var path = require ("path"); Module.exports = {entry: './static/entry.js ',//Demo entry file output: {Path:path.join                (__dirname, ' out '),//Package output path filename: ' bundle.js ',//package name Publicpath: "./static/out/"    The HTML reference path, here is the local address.        },//The newly added module attribute module: {loaders: [//Parse. vue file {test:/\.vue$/, Loader: ' Vue '},            Conversion ES6 Syntax {test:/\.js$/, Loader: ' Babel ', Exclude:/node_modules/},//compiling CSS and automatically adding CSS prefixes {test:/\.css$/, Loader: ' Style!css!autoprefixer '},//.scss files want to compile, scss need these things! To compile the processing//install css-loader style-loader sass-loader node-sass--save-dev {test:/\.scss$/, loader: ' Sty Le!css!sass?sourcemap '},//image conversion, less than 8K automatically converted to Base64 encoding {test:/\.            png|jpg|gif) $/, loader: ' url-loader?limit=8192 '},//html template compilation? {test:/\. (HTML|TPL) $/, loader: ' Html-loader '},]},//. Vue configuration. Need to come out separately to configure Vue: {LOaders: {css: ' style!css!autoprefixer ', HTML: ' Html-loader '}},}; 

Webpack may be useful for the development and management of single-page applications, and for the development of simple HTML, gulp is more than sufficient.

Preliminary study on Gulp and Webpack