浅谈前端工程化（二）Gulp和Webpack构建项目

悠悠 2022-11-26 01:56 205阅读 0赞

# 前端构建 #

前端构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。  
过去，前端一直在各种为战，不停的造轮子，前端只会一种语言js,js只能在浏览器运行，前端工程化无从谈起，在node出现之后，各种前端构建工具才如雨后春笋般层出不穷。

前端构建可以实现如下内容：

*  代码转换：将 TypeScript/es6 编译成JavaScript、将 SCSS、LESS等编译成 CSS等。
 *  文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等。
 *  代码分割：提取多个页面的公共代码，提取首屏不需要执行的部分代码让其异步加载。
 *  模块合并：在采用模块化的项目里会有很多个模块和文件，需要通过构建功能将模块分类合并成一个文件。
 *  自动刷新：监听本地源代码变化，自动重新构建、刷新浏览器。
 *  代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
 *  自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。

目前，前端的构建工具非常多，常用的有Grunt、Gulp、Webpack等，也有各大公司团队开源的构建工具。  
之后我们会使用MVVM框架来开发项目，主要介绍Webpack，介绍Webpack之前了解一下Gulp，能够比较承接一下从前的思路。

# 理解Gulp #

gulp是基于Nodejs流（stream）的一个自动化构建工具，开发者可以使用它自动化工作流程。如：网页自动刷新、css预处理、代码检测、压缩图片等，只需要简单的命令就能全部完成。  
[https://www.gulpjs.com.cn][https_www.gulpjs.com.cn]  
Gulp有5个基本方法：

1.  `gulp.task()`用于定义具体的任务  
    在gulp3中，task可以有3个参数 name,\[deps\], fn  
    ① name为任务名；  
    ② \[ deps\]为一个任务列表数组，里边包含其他的任务名称，这些任务会在当前任务之前顺序执行，称为`依赖任务列表`；  
    ③ fn为要进行的操作  
    在gulp4中，task有两个参数任务名和任务执行函数（taskFunction）  
    任务执行函数有两种，`gulp.series()` 和 `gulp.parallel()`，用于将多个独立的任务组合为一个更大的操作，series()中的任务顺序执行，parallel()中的任务并行执行。gulp.series() 和gulp.parallel()的参数  
    在gulp4中的
2.  `gulp.src()` 用于产生数据流。它的参数表示要处理的文件
3.  `gulp.dest()`将管道中的数据写入到文件夹。
4.  `gulp.run('任务名')`表示要执行的任务
5.  `gulp.watch()`用于指定需要监视的文件。一旦这些文件发生变动，就运行指定任务。

`pipe方法`：gulp中常出现的pipe方法是来自nodejs stream API的，并不是gulp本身源码所定义的。pipe方法的参数是一个function，这个function作用是接受上一个流（stream）的结果，并返回一个处理后流的结果。pipe方法不容易检查到错误，之后会用pump模块来代替pipe。

### gulp 初体验 ###

1.  全局安装gulp
    
        npm install gulp -g
    
    查看gulp版本
    
        gulp -v
    
    目前gulp 的版本是4，与之前的版本有些区别
2.  新建一个项目 在D盘新建一个gulp-demo文件夹，初始化项目
    
        npm init -y
3.  安装本地开发依赖
    
        npm install gulp -D
4.  在项目目录中创建 `gulpfile.js`文件，作为gulp实现自动化管理项目功能的核心文件。
5.  创建项目文件，在项目目录中创建src文件夹，随便存放一些源代码，如下所示：  
    !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20200812101343853.png
6.  编辑gulpfile.js文件  
    下面是一个简单的例子
    
        var gulp=require("gulp");
        //拷贝html文件到dist根目录
        gulp.task('copyHtml',function(cb){ 
            //获取src目录下的所有html
            gulp.src('src/*.html')
                .pipe(gulp.dest('dist'));
            cb();  //执行回调，表示这个异步任务已经完成
        })
        gulp.task('build',gulp.parallel('copyHtml'));
7.  运行命令gulp copyHtml或gulp build，会发现项目目录下增加了一个dist文件夹，里面存放着index.html和intro.html。  
    这里gulp build命令是要并行执行多个任务，因为这里只有一个任务，所以效果是一样的。

### gulp 构建项目 ###

gulp提供了很多很有用的插件[https://gulpjs.com/plugins][https_gulpjs.com_plugins]，可以帮助我们构建项目，现在我们用一些插件来构建之前创建的项目。  
在那之前请确认安装了如下开发依赖：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]

这里只用到了gulp的一小部分功能，用来理解一下gulp构建项目的方法，关于gulp,猿始森林的系列教程《[gulp构建项目][gulp]》非常不错，有兴趣的可以去看看，强烈推荐！

# Webpack #

Webpack 是一个模块打包器，目的是在打包 JavaScript 文件共浏览器使用。Webpack 根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。  
在Webpack中一切文件皆模块(如js,css,css预编译文件，图片等等)，最后输出由多个模块组合成的js文件。  
[https://www.webpackjs.com][https_www.webpackjs.com]  
下面通过一次最简单的打包来演示一下  
在D盘建立文件夹，webpack-demo,创建一个文件夹src放源代码,放入一个文件index.js

1.  全局安装webpack
    
        npm install webpack -g
    
    这里我安装的版本是webpack 4
2.  初始化一个项目
    
        npm init -y
3.  一次简单的打包(用开发模式打包)
    
        webpack --mode development
    
    这时候会发现，项目根目录下增加了一个dist文件夹，里面存放了一个main.js文件。

为什么我们只执行了一个webpack 命令，并没有向Gulp那样写任务就实现了打包呢?  
这是因为webpack4提供了一份默认的配置值，webpack4默认的入口（entry）文件是`./src/index.js`,出口（output ）文件是`./dist/main.js`,默认的打包模式（mode）是`production`。

大多数项目会需要复杂的设置，webpack的配置文件可以实现自定义配置，webpack的配置文件默认为`webpack.config.js`，如果存在，则 webpack 命令将默认选择使用它。

新建webpack.config.js文件，进行一个简单的配置：

var path = require('path');
    
    module.exports = { 
        mode: 'development',
        entry: './src/index.js',
        output: { 
            path: path.resolve(__dirname, 'dist'),
            filename: 'bundle.js'
        }
    };

在命令行窗口输入webpack,发现这次的js打包成了bundle.js。

说明：

*  mode 打包模式:可选项有production 、development  
    production模式代码会被压缩；  
    development模式代码不会被压缩
 *  entry 配置入口：用来配置入口文件即从哪个文件开始打包
 *  output 配置输出：用来配置打包的出口，即打包到哪去  
    path 用于配置打包输出的目录，必须是一个绝对路径，故此需要引入Nodejs的path模块,来处理文件路径  
    filename 用于配置打包生成的文件名

[https_www.gulpjs.com.cn]: https://www.gulpjs.com.cn
[https_gulpjs.com_plugins]: https://gulpjs.com/plugins
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RyZWFtaW5nYmFvYmVpMw_size_16_color_FFFFFF_t_70]: /images/20221124/b4f5da7959614e5c96fd900ee25da316.png
[gulp]: https://blog.csdn.net/guang_s/category_8467043.html
[https_www.webpackjs.com]: https://www.webpackjs.com