胖蔡叨叨叨
你听我说

前端的构建工具

前端技术随着日益成熟的开发框架(React、Vue、Angular)的流行,如何去管理、构建前端项目也就显得尤其重要。目前市面上较为常用的构建工具就是Webpack。本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时,它会在内部构建一个 依赖图(dependency graph),此依赖图会映射项目所需的每个模块,并生成一个或多个 bundle。除了webpack以外,前端其实还有很多比较优秀的构建工具,适用于不同的开发场景。如:Gulp、Grunt、FIS、Rollup、Parcel、Yeoman6、Athena、WeFlow、Cooking等。

什么是构建工具?

构建工具在开发中是一个很特殊的存在,它不影响代码逻辑、业务,当大多情况下是不可或缺的角色。从定义上看:构建工具是一个把源代码生成可执行应用程序的过程自动化的程序,如gcc将.c生成为.a、.o文件、javac将.java文件生成为.class文件、gradle将项目工程生成为.apk文件等等诸如此类。如上所说的gcc、javac、gradle都是相对流程的一个构建工具。

 为什么要用构建工具?

了解了什么是构建工具后,接下来需要了解的是既然构架工具并不对结果负责,那么我们为什么要使用构建工具呢?其实理由很现实,就是减负,减轻开发者负担,让开发这不需要将过多的精力用于管理包、包版本、压缩等与业务不相干的工作,而且当项目越来越大,人力也无法负担如此巨大的工作。

构建工具能做哪些事?


说了构建工具的重要性,接下来需要说的是构建工具具体能帮我们做哪些工作:

  • 依赖管理(下载和版本维护)
  • 生成目标运行文件并不影响源代码
  • 版本发布
  • 单元测试

在前端中构建工具对应的具体需要帮我们实现的如下:

  • 转换ES6语法
  • 转换框架的语法糖 如 JSX, VUE文件
  • CSS 前缀补全/预处理器
  • 压缩混淆
  • 图片压缩
  • 代码分割
  • 模块合并
  • 代码校验
  • 自动发布

 前端构建工具


说完了构建工具的功能,接下来需要了解在前端开发中具体有哪些构建工具,我们可以通过工具的类型,将构建工具分为:

  •  模块化打包类型
  • 任务流构建类型
  • 集合型工具类

常见的而模块化打包类型构建工具如:webpack、Rollup、Browserify。任务流类型的有:Gulp、Grunt。集合型的主要包括:Yeoman、FIS、jdf、Athena、cooking、weflow。就目前来看用的较多的是属于第一、第二类型的构建工具。

 前端常用构建工具

webpack


 Webpack 是一个打包模块化 JavaScript 的工具,在 Webpack 里一切文件皆模块,通过 Loader 转换文件,通过 Plugin 注入钩子,最后输出由多个模块组合成的文件。Webpack 专注于构建模块化项目。

webpack

一切文件:JavaScript、CSS、SCSS、图片、模板,在 Webpack 眼中都是一个个模块,这样的好处是能清晰的描述出各个模块之间的依赖关系,以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理,最终会输出浏览器能使用的静态资源。Webpack的优点是:
– 模块化处理项目- Plugin 扩展- 使用场景不仅限于 Web 开发- 社区活跃,能为大多数场景找到已有的开源扩展

 Grunt  


Grunt的出现早于Gulp,Gulp是后起之秀。他们的本质都是通过 JavaScript 语法实现了shell script 命令的一些功能。 Grunt是一个任务执行者,有大量现成的插件封装了常见的任务,也能管理任务之间的依赖关系,自动化执行依赖的任务,每个任务的具体执行代码和依赖关系写在配置文件 Gruntfile.js 里,如下配置文件:

// Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    // js格式检查任务
    jshint: {
      src: 'src/test.js'
    }
    //  代码压缩打包任务
    uglify: {}
  });
  // 导入任务插件
  grunt.loadnpmTasks('grunt-contrib-uglify');
  // 注册自定义任务, 如果有多个任务可以添加到数组中
  grunt.regusterTask('default', ['jshint'])

 Gulp
 Gulp吸取了Grunt的优点,拥有更简便的写法,通过流(Stream)的概念来简化多任务之间的配置和输出,让任务更加简洁和容易上手。通过配置gulpfile.js文件来实现,一个简单的gulpfile.js配置如下:

// gulpfile.js
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');

// 代码检查任务 gulp 采取了pipe 方法,用流的方法直接往下传递
gulp.task('lint', function() {
  return gulp.src('src/test.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// 压缩代码任务
gulp.task('compress', function() {
  return gulp.src('src/test.js')
    .pipe(uglify())
    .pipe(gulp.dest('build'));
});

// 将代码检查和压缩组合,新建一个任务
gulp.task('default', ['lint', 'compress']);
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 前端的构建工具
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

'); })();