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

前端构建

前端构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。
过去，前端一直在各种为战，不停的造轮子，前端只会一种语言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
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，可以帮助我们构建项目，现在我们用一些插件来构建之前创建的项目。
在那之前请确认安装了如下开发依赖：

const gulp = require('gulp');
const pump = require('pump');
const browserSync = require('browser-sync'); //启本地服务并开启浏览器
const concat = require('gulp-concat'); // 合并文件
const htmlmin = require('gulp-htmlmin'); // html压缩
const sass = require('gulp-sass'); //css预处理 sass/scss文件生成css文件
const cssmin = require('gulp-clean-css');  //css文件压缩
const babel = require('gulp-babel');  //es6转es5
const uglify = require('gulp-uglify'); // js优化、压缩

function html(cb) {
    const options = {collapseWhitespace: true};
    pump([
        gulp.src('./src/*.html'),
        htmlmin(options),
        gulp.dest('./dist')
    ], cb());
};
function css(cb) {
    pump([
        gulp.src('./src/css/*.scss'),
        concat('style.css'),  
        sass(),
        cssmin(),
        gulp.dest('./dist/css')
    ], cb());

};
function js(cb) {
    pump([
        gulp.src('./src/js/*.js'),
        concat('main.js'), 
        babel({                   
            presets: ["@babel/env"],
            plugins: []
        }),
        uglify(),
        gulp.dest('./dist/js')
    ], cb());
};
function images(cb) {
    pump([
        gulp.src('./src/images/*'),
        gulp.dest('./dist/images')
    ], cb())
};
function browser(cb) {
    browserSync.init({
        server: './dist',    
        port: 3000,
    });
    cb();
}

gulp.task('dev', gulp.parallel(html, css, js, images, browser));
gulp.task('build', gulp.parallel(html, css, js, images));

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

Webpack

Webpack 是一个模块打包器，目的是在打包 JavaScript 文件共浏览器使用。Webpack 根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
在Webpack中一切文件皆模块(如js,css,css预编译文件，图片等等)，最后输出由多个模块组合成的js文件。
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 用于配置打包生成的文件名