大前端进击之路(五)前端工程化Gulp初体验

时间:2021-1-18 作者:admin

大前端进击之路(五)前端工程化Gulp初体验

打工人!打工魂!前端才是人上人!此系列总结于大前端进击之路过程中的学习,如果文章中有不对的地方,希望大家能进行批评改正,互相进步。转载请注明出处并附上原文地址 。

前端工程化是什么?

前端工程化指的是在团队内遵循一定的标准和规范,使用工具提高开发人员的的工作效率、降低维护成本,还可以减少因为人工操作失误而导致的不可控因素。

为我们解决了什么问题?

我们首先来列举在日常开发过程中经常会面临的一些问题(不仅限于此):

  1. 我们想要使用Less/Sass来增强CSS的编程性,但是运行环境不能直接支持,总是需要我们编译等重复性工作。
  2. 我们想要使用ECMAScript新特性时会有兼容性问题。
  3. 想要使用模块化的方式提高项目的可维护性,运行环境也不能直接支持。
  4. 项目部署上线前需要手动压缩资源文件,过程中需要手动上传代码到服务器,是容易出现问题的。
  5. 多人协作开发,每个人的代码风格是不一样的,无法硬性统一大家的代码风格。

我们将这些问题归纳总结为以下几点:

  • 传统语言和语法的弊端
  • 无法使用模块化或组件化
  • 重复的机械式工作
  • 代码风格、格式无法硬性统一
  • 仓库代码质量无法保证
  • 依赖后端服务接口支持
  • 整体依赖后端项目

具体解决方案

我们以一个简单的项目开发流程为例,看看前端工程化在这个过程中的作用,让我们先从整体角度对前端工程化有一个全面的认识。从项目的创建、编码、预览、提交、部署,每一个环节我们都可以通过前端工程化的方式提高工作效率。

  1. 创建项目过程我们可以使用脚手架工具自动完成。
  2. 编码过程我们可以通过编译或者转化工具提前使用一些新特性。利用格式化和代码检查工具自动检测和修复代码中的基础问题。
  3. 预览时可以通过Web Server自动预览并享受热更新的体验,并且可以使用Mock的方式在后端服务接口未完成的情况下,直接开发具体的业务功能。
  4. 到了代码提交环节,我们可以使用Git Hook自动化在提交之前作出项目检查,确保不会提交有问题的代码,甚至连提交的日志都可以严格限制格式。
  5. 最后在部署阶段,我们可以使用一行命令代替传统手动的FTP上传,甚至还可以实现在代码提交过后自动部署到服务器。

工程化≠工具

现在Webpack功能强大,很多人一提到前端工程化就觉得是Webpack,有了Webpack就是有了工程化,但其实不是这样的,工具并不能代码工程化,工程化的核心应该是对项目的一种规划或者架构,工具只是落地实现的手段。

以一个普通项目为例,落实工程化的第一件事是规划整体项目的工作流架构,包括:

  1. 文件的组织结构
  2. 源代码的开发范式
  3. 语言或者语法规范
  4. 前后端分离方式
  5. 其它对开发阶段的需求

有了这些整体的规划之后,再来具体考虑搭配使用哪些具体的工具,配置具体的选项。这才是一个工程化的过程。

脚手架工具

在对前端工程化有了初步认识之后,先从脚手架开始,看看前端工程化在项目创建环节中的具体表现。

脚手架是什么?

脚手架可以简单理解为用来自动帮我们创建项目基础文件的工具,更重要的是提供给开发者一些约定或规范,包括:

  • 相同的文件组织结构
  • 相同的代码开发范式
  • 相同的模块依赖
  • 相同的工具模块配置
  • 相同的基础代码

我们实际开发过程中搭建新项目时会有大量的重复工作要做,使用脚手架可以避免这些重复的工作。我们通过脚手架工作快速搭建特定类型项目的基础骨架结构,例如Vue-cli,基于这个接触结构进行后续的开发工作。

实现一个我们自己的小型脚手架工具

思路

脚手架的工作过程:

  1. 用户使用脚手架,脚手架通过命令行交互询问用户问题
  2. 脚手架根据用户回答的结果生成相应文件

实现过程

  1. 新建目录MY-CLI

  2. 创建package.json

    npm iniy -y
    
  3. 在package.json中添加bin字段,指定脚手架的入口文件cli.js

    {
      "name": "my-cli",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "bin": "cli.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      }
    
  4. 安装依赖的插件inquirer和ejs

    npm i inquirer // 用于询问开发者问题
    npm i ejs      // 模板引擎
    
  5. 创建cli.js文件

    #!/usr/bin/env node
    // Node cli应用入口文件必须要有这样的文件头。
    // 让系统动态的去查找node,解决不同机器不同用户设置不一致的问题
    const fs = require("fs");
    const path = require("path");
    const inquirer = require("inquirer");
    const ejs = require("ejs");
    
    // 询问用户
    inquirer
      .prompt([
        {
          type: "input",
          name: "name",
          message: "Your Project Name?",
        },
      ])
      .then((anwsers) => {
        // 模板目录
        const tmplDir = path.join(__dirname, "templates");
        // process.cwd()返回当前工作目录,也就是目标目录
        const destDir = process.cwd();
        // fs.readdir()获取模板目录下所有文件的文件名
        fs.readdir(tmplDir, (err, files) => {
          if (err) throw err;
          // 遍历文件名
          files.forEach((file) => {
            // 通过模板引擎渲染文件
            ejs.renderFile(path.join(tmplDir, file), anwsers, (err, result) => {
              if (err) throw err;
              // console.log(result);
              // 将结果写入目标文件路径
              fs.writeFileSync(path.join(destDir, file), result);
            });
          });
        });
      });
    
    
    // templates/index.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><%= name %></title>
    </head>
    <body>
        
    </body>
    </html>
    
  6. 将脚手架关联到全局

    npm link
    
  7. 测试

    MY-CLI
    

    在新建文件夹testcli文件夹下执行该命令,根据命令行询问内容输入name,在该文件夹下生成相应模板文件。

Gulp自动化构建

需求

使用gulp工具构建项目,主要任务包括scss文件的转化,ECMAScript新特性的转化,还有swig模板页面的转化,并且转化上线的dist包。优化构建过程,提高开发过程的开发效率。图片、字体文件、HTML、JS、CSS文件压缩。

实现步骤

  1. 安装gulp为开发依赖,创建gukpfile.js。
  2. 实现样式文件的编译。用到的插件是gulp-sass。由于需要使用gulp-useref文件引用处理,所以我们先将编译的文件放到temp文件夹下,经过useref处理后上线的代码放到dist文件夹下面。
  3. 实现脚本文件的编译,需要将ECMAScript新特性进行编译,用到的插件是gulp-babel、@babel/core和@babel/preset-env。gulp-bale只是一个转换平台,所以需要@babel/core和@babel/preset-env进行编译。
  4. 实现模板文件的编译,用到的gulp-swig插件。
  5. 其它文件以及文件的清除,用到的插件是del。我们需要将额外的一些公共文件直接转入dist文件夹下。每次构建时先将dist文件夹删除。
  6. 图片和字体文件转换压缩,用到的插件是gulp-imagemin。由于使用了多个gulp插件,一个一个的引入比较繁琐,所以我们使用gulp-load-plugins插件。
  7. 我们需要一个支持热更新的开发服务器用于调试我们的项目,用gulp来管理这个服务器,这样子后续我们在修改代码时可以自动编译、自动刷新浏览器页面,提高我们的开发效率,减少重复性操作。这里需要用到gulp的watch方法,来监视我们的文件,如果有更新就执行相应的任务,达到热更新的目的。
  8. 优化我们的构建过程。在开发阶段,image、font等资源可以直接使用原目录下的文件,这样子可以加快我们在开发过程中的构建效率。是代码中的develop任务,在开发中使用。
  9. 还需要创建编译后线上版本的任务,需要先清除,然后再编译样式、脚本、页面文件后使用useref通过构建注释解决线上版本文件引用的问题,同时将线上版本的html css js文件压缩,后同时将压缩后的图片、字体文件和其他公共文件编译到dist文件夹里面。具体为代码中的build任务,构建线上版本使用。
  10. 测试完成。

具体插件

gulp-sass gulp-babel gulp-clean gulp-clean gulp-swig gulp-imagemin gulp-load-plugins gulp-useref browser-sync gulp-htmlmin gulp-uglify gulp-clean-css gulp-if等。

实现完整代码

// gulpfile.js
const { src, dest, series, parallel, watch } = require("gulp");
const loadPlugins = require("gulp-load-plugins");
const plugins = loadPlugins();
const del = require("del");
const browserSync = require("browser-sync");

const bs = browserSync.create();
// 模拟数据
const data = {
  menus: [
    {
      name: "Home",
      icon: "aperture",
      link: "index.html",
    },
    {
      name: "Features",
      link: "features.html",
    },
    {
      name: "About",
      link: "about.html",
    },
    {
      name: "Contact",
      link: "#",
      children: [
        {
          name: "Twitter",
          link: "https://twitter.com/w_zce",
        },
        {
          name: "About",
          link: "https://weibo.com/zceme",
        },
        {
          name: "divider",
        },
        {
          name: "About",
          link: "https://github.com/zce",
        },
      ],
    },
  ],
  pkg: require("./package.json"),
  date: new Date(),
};

// 清除dist文件夹
const clean = () => {
  return del(["dist", "temp"]);
};

// 样式编译
const style = () => {
  // 读取src下面所有的scss文件,为其设置基准路径为src,保留src后面的目录结构
  return src("src/assets/styles/*.scss", { base: "src" })
    .pipe(plugins.sass({ outputStyle: "expanded" })) // 用sass编译scss文件,输出样式为完全展开
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true })); // 每次编译后调用bs的reload方法,以stream流的形式
};
// 脚本编译
const script = () => {
  return src("src/assets/scripts/*.js", { base: "src" })
    .pipe(plugins.babel({ presets: ["@babel/preset-env"] }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};
// 模板编译
const page = () => {
  return src("src/*.html", { base: "src" })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest("temp"))
    .pipe(bs.reload({ stream: true }));
};
// 图片压缩
const image = () => {
  return src("src/assets/images/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};
// 字体
const font = () => {
  return src("src/assets/fonts/**", { base: "src" })
    .pipe(plugins.imagemin())
    .pipe(dest("dist"));
};
// 额外的文件
const extra = () => {
  return src("public/**", { base: "public" }).pipe(dest("dist"));
};

// 开发服务器启动任务
const serve = () => {
  // 监视路径下文件如果发生变化就去执行相应的任务
  watch("src/assets/styles/*.scss", style);
  watch("src/assets/scripts/*.js", script);
  watch("src/*.html", page);
  watch(
    ["src/assets/images/**", "src/assets/fonts/**", "public/**"],
    bs.reload
  );
  // 初始化
  bs.init({
    notify: false,
    port: 2080,
    // 监视dist文件夹下的所有文件夹会自动更新网页
    // files: "dist/**",
    server: {
      // 设置网站的根目录
      baseDir: ["temp", "src", "public"],
      // 先找routes下有无对应的配置 没有就去baseDir找
      routes: {
        "/node_modules": "node_modules",
      },
    },
  });
};

const useref = () => {
  return (
    src("temp/*.html", { base: "temp" })
      .pipe(plugins.useref({ searchPath: ["temp", "."] }))
      // 压缩html js css
      .pipe(plugins.if(/\.js$/, plugins.uglify()))
      .pipe(
        plugins.if(
          /\.html$/,
          plugins.htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: true,
          })
        )
      )
      .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
      .pipe(dest("dist"))
  );
};

// src下面的文件编译
const compile = parallel(style, script, page);
// 所有任务
const build = series(
  clean,
  parallel(series(compile, useref), image, font, extra)
);

const develop = series(compile, serve);
module.exports = {
  develop,
  build,
  clean,
  compile,
  useref,
};

历史文章传送门

参考

拉勾大前端训练营

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。