前端构建工具：gulp 和 webpack 你不得不需要了解的几点

前言

随着前端日新月异的发展，工程化、自动化已不再是陌生的套路，比如我们所熟悉的sass写样式编译成css、es6写脚本转换成es5、浏览器自动刷新看到效果等等，诸如此类都是交给构建工具来完成，从而避免开发者进行重复的机械劳动（不要太开心，哈哈哈哈）。

什么是构建工具？

所谓的构建工具就是使源代码可以自动打包、编译、压缩等一系列操作。

讲讲 gulp 和 webpack

在当下比较流行的构建工具有gulp和 webpack（hot hot hot…）。

gulp

对于gulp的学习，可谓是简单易学、能快速上手。

1.全局安装gulp，安装项目所需要的gulp插件；

1 2	npm i gulp -g npm i gulp gulp-uglify --save-dev

2.在根目录下创建gulpfile.js；
3.在文件里编写gulp任务；
假设压缩js为例：

var gulp = require("gulp");
var uglify = require('gulp-uglify');
gulp.task('js', function() {
    gulp.src('src/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});
gulp.task('default', ['js']);

4.最后在终端运行这个任务，便可快速输出打包后的文件。

webpack

webpack实现了模块化开发和文件处理，他的思想就是“万物皆为模块”，它能够将各个模块进行按需加载，不会导致加载了无用或冗余的代码。

1.全局安装webpack；

1	npm i webpack -g

2.在根目录下创建webpack.config.js；
3.在webpack.config.js 里配置需要的选项，具体可戳官网查看;

const path = require('path');

module.exports = {
    entry: './src/index.js',        // 告诉 webpack 你要编译哪个文件
    output: {                       // 告诉 webpack 你要把编译后生成的文件放在哪
        filename: 'bundle.js',
        path: path.join(__dirname, 'dist')
    }
};

4.最后在终端运行这个任务，便可快速输出打包后的文件。

-	gulp	webpack
定位	基于流的自动化构建工具	模块化打包器
目标	自动化和优化开发工作流	通用模块打包加载器，为移动端大小SPA应运而生
学习难度	api方法简洁，大量使用gulp插件完成任务	有新的概念和api，详尽的官方文档
使用场景	基于流的多页面应用开发	一切皆模块的特点适合单页面开发
缺点	在单页面应用方面输出乏力，而且对流行的单页技术有些难以处理（比如 Vue 单文件组件，使用 gulp 处理就会很困难，而 webpack 一个 loader 就能轻松搞定）	不适合多页应用开发，灵活度高但同时配置很繁琐复杂。“打包一切” 这个优点对于 HTTP/1.1 尤其重要，因为所有资源打包在一起能明显减少浏览器访问页面时的资源请求数量，从而减少应用程序必须等待的时间。但这个优点可能会随着 HTTP/2 的流行而变得不那么突出，因为 HTTP/2 的多路复用可以有效解决客户端并行请求时的瓶颈问题。

小结

在前端工程化的解决方案上，这两者都是各自有自己的优缺点的，无论使用哪种方案，都不要盲目，合理的搭配，选择适合当下业务场景所需要的，才能将构建工具的作用发挥得淋漓尽致。

扩展

前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上