精华内容
下载资源
问答
  • 前端构建工具
    千次阅读
    2016-09-22 17:19:20
    前端工程师需要维护的代码变得及为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,当然人为的错误也随着流程的增加而增加了更多的出错率。所以每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程提高效率减少错误率。随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知,百度有FIS,腾讯有Modjs360有燕尾服gruntwebpack。

    百度FIS团队的fis3:
    其主要功能基本都是围绕着前端开发所需要的三种编译能力:资源定位、内容嵌入、依赖声明。
    fis3实现了一套“静态资源管理系统”,在开发页面的时候只需要用相对路径开发
    fis3也提供了很多插件来对图片进行合并、对HTML、js、css文件进行合并,fis3会对路径中带有 ?__sprite 的图片进行合并,减少了请求数量。但单纯的资源合并是没有办法按需加载资源的,然而静态资源按需加载也是减少资源冗余的很重要的方式。

    grunt:
    Grunt其实就是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。他可以更好的帮助一个团队更好的提高效率、减少错误率。
    在前端项目中,我们为了可分工明确将js,css独自出一个个的文件, 但这样一来用来页面上,增加了文件个数,同时也产生过多的Http请求,可从性能的角度来考虑,不利于页面优化。所以外卖需要利用grunt合并这些js和css文件。


    webpack:
    web开发中常用到的静态资源主要有JavaScript、CSS、图片、Jade等文件,webpack中将静态资源文件称之为模块。webpack是一个module bundler(模块打包工具),其可以兼容多种js书写规范,且可以处理模块间的依赖关系,具有更强大的js模块化的功能。Webpack对它们进行统一的管理以及打包发布。适用于react.js的打包工具。

    webpack具有requireJs和browserify的功能,但仍有很多自己的新特性:
    1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
    2. 对js、css、图片等资源文件都支持打包
    3. 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持
    4. 有独立的配置文件webpack.config.js
    5. 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间
    6. 支持 SourceUrls 和 SourceMaps,易于调试
    7. 具有强大的Plugin接口,大多是内部插件,使用起来比较灵活
    8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
    更多相关内容
  • 更容易上手的前端构建工具。 基于 webpack 但提供了更友好的配置项,内置的预配置能满足多数项目的需求;全局安装依赖免去开发者每个项目都要重复安装一堆开发依赖的烦恼;插件扩展机制能方便的扩展预配置以及依赖,...
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,下面这篇文章主要给大家介绍了关于前端构建工具之gulp的配置与搭建的相关资料,需要的朋友可以参考下...
  • 前端构建工具简介

    千次阅读 多人点赞 2018-10-08 10:50:52
    Javascript、JS或CSS压缩、用Less去写CSS、用Jade去写HTML、用Browserify去模块化、为非覆盖式部署的资源加MD5戳等,这些操作如果我们一遍遍手动执行,非常耗费时间和精力,所以前端构建工具,或者较前端自动化构建...

    1.什么是构建工具

    比如我们执行一些例如CoffeeScript/ES6 去代替 Javascript、JS或CSS压缩、用Less去写CSS、用Jade去写HTML、用Browserify去模块化、为非覆盖式部署的资源加MD5戳等,这些操作如果我们一遍遍手动执行,非常耗费时间和精力,所以前端构建工具,或者较前端自动化构建工具,就是用来让我们不再做机械重复的事情,解放我们的双手的。

    以gulp为例,编写gulpfile.js

    例如:

    gulp = require('gulp')
    coffee = require('gulp-coffee')
    uglify = require('gulp-uglify')
    rename = require('gulp-rename')
    
    file = './src/js/a.coffee'
    
    gulp.task('coffe',function(){
    
    	gulp.src(file)
    		.pipe(coffee())   //编译
    		.pipe(uglify())	 //压缩
    		.pipe(rename({
    			extname:".min.js"    //重命名
    		}))
    		.pipe(gulp.dest('./build/js'))
    })
    
    gulp.task('watch',function(
    	gulp.watch(file,['coffee'])
    ))
    
    gulp.task('default',['coffee'])
    

    这样,我只要执行一下 gulp watch,它就可以自动监视 a.coffee 的变化,每次修改 a.coffee 并保存后,它就会自动执行编译->压缩丑化->重命名这一系列动作了。

    参考文章:https://www.zhihu.com/question/35595198

    2.构建工具的发展

    构建其实是工程化、自动化思想在前端开发中的体现,将一系列流程用代码去实现,让代码自动化地执行这一系列复杂的流程。

    构建可以实现如下内容:

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

    构建工具发展:Npm Scripts、Grunt、Gulp、FIS 3、Webpack、Rollup、Parcel

    Grunt:

    Grunt 的优点是:

    • 灵活,它只负责执行我们定义好的任务;
    • 大量可复用插件封装好了常见的构建任务。

    Grunt 的缺点是集成度不高,要写很多配置后才可以用,无法做到开箱即用。

    Grunt 相当于进化版的 Npm scripts,它的诞生其实是为了弥补 Npm Scripts 的不足。

    Gulp:

    Gulp 是一个基于流的自动化构建工具。除了可以管理任务和执行任务,还支持监听文件、读写文件。Gulp 被设计的非常简单,只通过下面5个方法就可以支持几乎所有构建场景:

    • 通过 gulp.task 注册一个任务;
    • 通过 gulp.run 执行任务;
    • 通过 gulp.watch 监听文件变化;
    • 通过 gulp.src 读取文件;
    • 通过 gulp.dest 写完文件。
    // 引入 Gulp
    var gulp = require("gulp");
    // 引入插件
    var jshint = require("gulp-jshint");
    var sass = require("gulp-sass");
    var concat = require("gulp-concat");
    ....
    // 便宜SCSS任务
    gulp.task('scss', function() {
        // 读取文件,通过管道喂给插件
        gulp.src('./scss/*.scss')
            // SCSS 插件将 scss 文件编译成 css
            .pipe(sass())
            // 输出文件
            .pipe(guilp.dest('./css'));
    });
    // 合并压缩 JavaScript 文件
    gulp.task('scripts', function() {
        gulp.src('./js/*.js')
            .pipe(concat('all.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dest'));
    });
    // 监听文件变化
    gulp.task('watch', function() {
        // 当 SCSS 文件被编辑时执行 SCSS 任务
        gulp.watch('./scss/*.scss', ['sass']);
        gulp.watch('./js/*.js', ['scripts']);
    });
    

    Gulp 的优点:好用又不失灵活,既可以单独完成构建,也可以和其他工具搭配使用。

    缺点:和Grunt 类似。集成度不高,要写很多配置后才可以用,无法做到开箱即用。

    可以将Gulp 看做是 Grunt 的加强版。相对于 Grunt ,Gulp 增加了文件监听、读写文件、流式处理的功能。

    FIS 3:

    Fis3是一个来自百度的优秀国产构建工具。相对于 Grunt、Gulp 这些只提供了基本功能的工具。Fis3集成了开发者常用的构建功能,如下所述。

    • 读写文件:通过 fis.match 读文件,release 配置文件输出路径。
    • 资源定位:解析文件之间的依赖关系和文件位置。
    • 文件指纹:在通过 useHash 配置输出文件时为文件 URL加上 md5 戳,来优化浏览器的缓存。
    • 文件编译:通过 parser 配置文件解析器做文件转换,例如将 ES6 编译成 ES5。
    • 压缩资源:通过 optimizer 配置代码压缩方法。
    • 图片合并:通过 spriter 配置合并 CSS 里导入的图片到一个文件中,来减少 HTTP 请求数。

    大致使用如下:

    // 加 md5
    fis.match('*.{js,css,png}', {
        useHash: true
    });
    // 通过fis3-parse-typescript插件可将 TypeScript 文件转换成 JavaScript 文件
    fis.match('*.ts', {
        parser: fis.plugin('typescript')
    });
    // 对CSS进行雪碧图合并
    fis.match('*.css', {
        // 为匹配到的文件分配属性 useSprite
        useSprite: true
    });
    // 压缩 JavaScript
    fis.match('*.js', {
        optimizer: fis.plugin('uglify-js')
    });
    // 压缩CSS
    fis.match('*.css', {
        optimizer: fis.plugin('clean-css')
    });
    // 压缩图片
    fis.match('*.png', {
        optimizer: fis.plugin('png-compressor')
    });
    

    可以看出 Fis3 很强大,内置了许多功能,无需做太多配置就能完成大量工作。

    Fis3的优点:集成了各种Web老发所需的构建功能,配置简单,开箱即用。其缺点是目前官方已经不再更新和维护,不支持最新版本的Node。

    Webpack:

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

    其官网的首页图很形象的展示了 Webpack 的定义,如下图:

    在这里插入图片描述

    一切文件,如JavaScript、CSS、SCSS、图片、模板,对于Webpack 来说都是一个个模块,这样的好处是能清晰地描绘各个模块之间的依赖关系,以方便Webpack进行组合和打包,经过Webpack的处理,最终会输出浏览器能使用的静态资源。

    Webpack具有很大的灵活性,能配置处理文件的方式,使用方法大致如下:

    module.exports = {
        // 所有模块的入口,webpack从入口开始递归解析出所有依赖的模块
        entry: './app.js',
        output: {
            // 将入口所依赖的所有模块打包成一个文件 bundle.js 输出
            filename: 'bundle.js'
        }
    }
    

    Webpack的优点是:

    • 专注于处理模块化的项目,能做到开箱即用、一步到位;
    • 可通过 Plugin 扩展,完整好用又不失灵活性;
    • 使用场景不局限于Web开发;
    • 社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展;
    • 良好的开发体验;
      Webpack的缺点是:只能用于采用模块化开发的项目。

    Rollup:

    Rollup 是一个和 Webpack 很类似但专注于ES6的模块打包工具。它的亮点在于,针对ES6源码进行 Tree Shaking,以去除那些已经被定义但没被使用的代码并进行 Scope Hoisting,以减少输出文件的大小和提升运行性能。然而 Rollup 的这些亮点随后就被 Webpack 模仿和实现了。

    Parcel:

    Parcel 是 最近新起的Web 应用打包工具,适用于经验不同的开发者。它利用多核处理提供了极快的速度,并且不需要任何配置。

    Parcel的优点:

    • 极速打包。Parcel 使用 worker 进程去启用多核编译。同时有文件系统缓存,即使在重启构建后也能快速再编译。
    • 开箱即用。对 JS, CSS, HTML, 文件 及更多的支持,而且不需要插件。
    • 自动转换。如若有需要,Babel, PostCSS, 和PostHTML甚至 node_modules 包会被用于自动转换代码。
      -热模块替换。Parcel 无需配置,在开发环境的时候会自动在浏览器内随着你的代码更改而去更新模块。
      友好的错误日志。当遇到错误时,Parcel 会输出 语法高亮的代码片段,帮助你定位问题。

    缺点:

    • 不支持SourceMap:在开发模式下,Parcel也不会输出SourceMap,目前只能去调试可读性极低的代码;
    • 不支持剔除无效代码(TreeShaking):很多时候我们只用到了库中的一个函数,结果Parcel把整个库都打包了进来;
    • 一些依赖会让Parcel出错:当你的项目依赖了一些Npm上的模块时,有些Npm模块会让Parcel运行错误;
    • Parcel需要为零配置付出代价。零配置其实是把各种常见的场景做为默认值来实现的,

    这虽然能节省很多工作量,快速上手,但这同时会带来一些问题:

    • 不守规矩的node_module:有些依赖的库在发布到Npm上时可能不小心把.babelrcpostcss.config.js tsconfig.json这些配置文件也一起发布上去了,
    • 不灵活的配置:零配置的Parcel关闭了很多配置项,在一些需要的配置的场景下无法改变。

    Parcel使用场景受限。目前Parcel只能用来构建用于运行在浏览器中的网页,这也是他的出发点和专注点。在软件行业不可能存在即使用简单又可以适应各种场景的方案,就算所谓的人工智能也许能解决这个问题,但人工智能不能保证100%的正确性。

    反观Webpack除了用于构建网页,还可以做:

    • 打包发布到Npm上的库
    • 构建Node.js应用(同构应用)
    • 构建Electron应用
    • 构建离线应用(ServiceWorkers)

    Parcel与Webpack的对比:http://www.cnblogs.com/lxg0/p/8387670.html

    3.为什么选择Webpack

    上面介绍的构建工具是按照他们的诞生时间排序的,他们是时代的产物,侧面反映出 Web 开发的发展趋势,如下所述:

    • 在 Npm Scripts 和 Grunt 时代,Web 开发要做的事情变多,流程复杂,自动化思想被引入,用于简化流程;
    • 在 Gulp 时代,开始出现一些新语言用于提高开发效率,流程处理思想的出现是为了简化文件转换的流程,例如将ES6转换为ES5;
    • 在Webpack时代,由于单页应用的流行,网页的功能和实现代码变的复杂、庞大,Web开发向模块化改进。

    这些构建工具都有各自的定位和专注点,它们之间既可以单独完成任务,也可以互相搭配起来弥补各自的不足。在了解这些常见的构建工具后,我们需要根据自己的需求去判断应该如何进行选择和搭配它们才能更好的满足自己的需求。

    经过多年的额发展,Webpack 已经成为构建工具中的首选,这是因为:

    • 大多数团队在开发新项目时会采用紧跟时代的技术,这些技术几乎都会采用“模块化+新语言+新框架”,Webpack可以为这些新项目提供一站式的解决方案;
    • Webpack有良好的生态和维护团队,能提供良好的开发体验并保证质量;
    • Webpack 被全世界大量的Web开发者使用和验证,能找到各个层面所需要的教程和经验分享。

    4.Gulp和Webpack的区别

    常有人拿gulp与webpack来比较,知道这两个构建工具功能上有重叠的地方,可单用,也可一起用,但本质的区别就没有那么清晰。

    Gulp强调的是前端开发的工作流程,我们可以通过配置一系列的task,定义task处理的事务(例如文件压缩合并、雪碧图、启动server、版本控制等),然后定义执行顺序,来让gulp执行这些task,从而构建项目的整个前端开发流程。 简单说就一个Task Runner,就是用来跑一个一个任务的。

    Gulp 没发解决的是 js module 的问题,是你写代码时候如何组织代码结构的问题。

    Webpack是一个前端模块化方案,更侧重模块打包,我们可以把开发中的所有资源(图片、js文件、css文件等)都看成模块,通过loader(加载器)和plugins(插件)对资源进行处理,打包成符合生产环境部署的前端资源。

    相同点:文件合并与压缩(css,js),sass/less预编译,启动server,版本控制。

    不同点,虽然都是前端自动化构建工具,但看他们的定位就知道不是对等的。

    • gulp严格上讲,模块化不是他强调的东西,他旨在规范前端开发流程。
    • webpack更是明显强调模块化开发,而那些文件压缩合并、预处理等功能,不过是他附带的功能。

    参考文章:

    https://blog.dunizb.com/2018/04/23/前端构建工具发展及其比较/?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com#Parcel

    https://juejin.im/entry/5ae5c8c9f265da0b9f400d8e

    https://www.cnblogs.com/iovec/p/7921177.html

    支付宝前端构建工具的发展和未来的选择:https://github.com/pigcan/blog/issues/4

    5.为什么node出现之后,各种前端构建工具和手段才如雨后春笋般层出不穷

    https://www.zhihu.com/question/35427358

    6.browserify

    服务器端NodeJS自带模块功能,可以使用require和module.exports构建项目

    随着项目的增大,浏览器端任务越来越重,依赖关系越来越复杂,需要使用工具实现模块化。

    Browserify通过require和module.exports来导入和导出。

    Browserify的原理:部署时处理代码依赖,将模块打包为一个文件。

    参考文章:

    https://blog.csdn.net/real_bird/article/details/53560206?utm_source=copy

    https://www.cnblogs.com/xiaohuochai/p/6850977.html#anchor2

    展开全文
  • 主要给大家介绍了关于前端构建工具之gulp语法的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来跟着小编一起学习学习下吧。
  • 前端构建工具基于的前端构建工具启动下载项目安装安装npm install -g gulp安装项目依赖cd 项目根目录npm install目录结构src 源文件src/asserts js,css等资源文件src/views html文件bulid 构建后的文件支持功能列表 ...
  • gulpjs是一个前端构建工具,gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快,有兴趣的可以了解一下。
  • 一、构建工具可以做什么? 安装 vs 做事情 1、安装包工具:例如:npm、Bower,Yeoman可以安装几乎所有的...他们甚至帮你安装其他的前端构建工具。 2、做事情的工具:比如Grunt、Webpack、Require.js、Brunch和Gul...

    一、构建工具可以做什么?

    安装 vs 做事情

    1、安装包工具:例如:npm、Bower,Yeoman可以安装几乎所有的东西。

    他们可以安装前端框架,比如Angular.js或者React.js。

    他们可以为你的开发环境安装服务器

    他们可以安装测试框架

    他们甚至帮你安装其他的前端构建工具

    2、做事情的工具:比如Grunt、Webpack、Require.js、Brunch和Gulp。这些工具有些复杂。
    做事情的工具的目的就是自动化,它避免了前端开发中的烦琐事和一些易于犯错的地方。

    下面就是一些我用“做事情”工具自动化完成的一些任务:

    1.替换一个文件中的文本字符串
    2.创建一个目录然后往这个目录中移动一些文件
    3.用一条命令执行单元测试
    4.当我保存文件时刷新我的浏览器
    5.把我所有的JavaScript文件打包成一个文件,把我所有的CSS文件合并成一个文件
    6.压缩我的Javascript文件以及我的CSS文件
    7.修改网页中的script标签的位置

    二、所有构建工具的鼻祖是Node和npm

    Node和npm安装和运行所有的这些构建工具,所以你在项目中总是可以看到他们。正因如此,许多开发者在他们安装另外工具时都会多次使用到这两个工具。

    三、安装 vs 做事情   之间的界限可能是模糊的

    没有工具只做一件事情。他们都混杂着一个安装和做。但是通常而言,一个工作倾向于做一件事多于另一些事。

    开发者经常将JavaScript和css文件分为多个文件。每一个文件都可以让你专注于写某一个模块的功能。这样就可以减少你阅读代码的认知负担。(如果你觉得把文件分为多个文件有点迷惑的话,你想想假如你把一个文件写成5000行时,你怎么去读呢,这是你就知道分散文件的好处了)

    但是当你需要把你的应用上线时,多个JavaScript和CSS文件是不现实的。当用户访问你的网站时,每一个js或者css文件都会发起一个新的http请求,这会让你的网站加载起来很慢。

    所以为了改进这个问题,你可以创建一个build文件,这个文件把所有的css文件合并到一起,js文件也都合并到一个文件。这样,你就减少了用户请求的数量。为了创建build文件,你就需要一个构建工具。

    下面就是开发应用中的一个快照。注意它包含5个script标签和3个link标签了吗?如果你看左侧,注意到开发文件夹下有10个文件了吗?

    然后下面就是同一个应用构建完之后的代码情况。

    注意到我们只有一个script和一个link标签了吗?然后开发文件夹中只有4个文件了吗,之前我们可是有10个文件呢。

    应用跟之前是一模一样的,我们只不过把他转化成一个称之为构建之后的代码小包。

    你可以想知道为什么需要构建呢,难道就是为了节省用户几毫秒的时间吗?好吧,如果你创建了属于你或者几个人的网站的话,你不需要有这些困扰。生成一个构建之后的应用只有在高访问量的情况下才有必要。(或者那些你觉得以后可能会被高访问)

    如果你正在学习开发或者仅仅在开发一个流量不怎么高的网站的话,生成一个构建的应用可能不是很有必要。

     四、构建工具有一个陡峭的学习曲线,所以只学那些必要的部分

    过早的复杂性会拖慢你的脚步。

    五、有时候不是你不够聪明,而是文档很糟糕。

    对于很多构建工具,文档一般是不健全的。有时候就连最基本的功能都很难搞清楚怎么去实现。

    你需要记住的是对于构建工具来说,很少有预先定义好的构建工具组合。你会发现开发者们都通过不同的方式实现了同样的结果 — 就好像有时候在stackoverflow上你会发现对于同一个问题有很多不同的答案。

    这当然很令人烦恼,同时他也给你提供了一个机会去放松一下你的编码思维,然后去实现一些创造性的东西。

    毕竟,这不就是为什么我们做这个吗?

     

    原文:https://www.jianshu.com/p/e290f9f53b7e

    展开全文
  • 工程级前端构建工具

    2019-08-10 03:53:14
    工程级前端构建工具
  • 任务执行者任务运行器样本/前端构建工具
  • frontin-OSN-2015 将前端构建工具集成到您的构建过程中此存储库包含2个单独的示例,这些示例分别用于不同的构建系统。 前端Maven插件: : 幻灯片: :
  • Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader ...
  • xgulp xgulp是mxd的前端构建工具
  • 基于gulp的前端构建工具, 集成java freemarker开发环境
  • gulp前端构建工具讲义

    2019-08-12 06:38:53
    gulp前端构建工具讲义
  • http://blog.csdn.net/cdnight/article/details/52817671 前端构建工具,请看上面文章。
  • 前端构建工具gulp使用教程(二)、常用gulp插件以及gulp使用完整实例-附件资源
  • 从Npm Script到Webpack,6种常见的前端构建工具对比小编说:历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求,所以大多数构建工具都是用Node.js...

    从Npm Script到Webpack,6种常见的前端构建工具对比

    小编说:历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求,所以大多数构建工具都是用Node.js开发的。本文就来一一介绍它们。本文选自《深入浅出Webpack》。

    前端技术发展之快,各种可以提高开发效率的新思想和框架层出不穷。但是它们都有一个共同点:源代码无法直接运行,必须通过转换后才可以正常运行。

    构建就是做这件事情,将源代码转换成可执行的JavaScript、CSS、HTML代码,包括如下内容。

    代码转换:将TypeScript编译成JavaScript、将SCSS编译成CSS等。

    文件优化:压缩JavaScript、CSS、HTML代码,压缩合并图片等。

    代码分割:提取多个页面的公共代码,提取首屏不需要执行部分的代码让其异步加载。

    模块合并:在采用模块化的项目里会有很多个模块和文件,需要通过构建功能将模块分类合并成一个文件。

    自动刷新:监听本地源代码的变化,自动重新构建、刷新浏览器。

    代码校验:在代码被提交到仓库前需要校验代码是否符合规范,以及单元测试是否通过。

    自动发布:更新代码后,自动构建出线上发布代码并传输给发布系统。

    构建其实是工程化、自动化思想在前端开发中的体现,将一系列流程用代码去实现,让代码自动化地执行这一系列复杂的流程。构建为前端开发注入了更大的活力,解放了我们的生产力。

    历史上先后出现了一系列构建工具,它们各有优缺点。由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需求,所以大多数构建工具都是用Node.js开发的。下面来一一介绍它们。

    1 Npm Script

    Npm Script(https://docs.npmjs.com/misc/scripts) 是一个任务执行者。Npm是在安装Node. js时附带的包管理器,Npm Script则是Npm内置的一个功能,允许在package.json文件里面使用scripts字段定义任务:

    {
      "scripts": {
        "dev": "node dev.js",
        "pub": "node build.js"
      }
    }
    

    里面的scripts字段是一个对象,每个属性对应一段Shell脚本,以上代码定义了两个任务:dev和pub。其底层实现原理是通过调用Shell去运行脚本命令,例如,执行npm run pub命令等同于执行node build.js命令。

    Npm Script的优点是内置,无须安装其他依赖。其缺点是功能太简单,虽然提供了pre和post两个钩子,但不能方便地管理多个任务之间的依赖。

    2 Grunt

    Grunt(https://gruntjs.com) 和Npm Script类似,也是一个任务执行者。Grunt有大量现成的插件封装了常见的任务,也能管理任务之间的依赖关系,自动化地执行依赖的任务,每个任务的具体执行代码和依赖关系写在配置文件Gruntfile.js里,例如:

    module.exports = function(grunt) {
      // 所有插件的配置信息
      grunt.initConfig({
        // uglify插件的配置信息
        uglify: {
          app_task: {
            files: {
              'build/app.min.js': ['lib/index.js', 'lib/test.js']
            }
          }
        },
        // watch插件的配置信息
        watch: {
          another: {
              files: ['lib/*.js'],
          }
        }
      });
      // 告诉Grunt我们将使用这些插件
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-contrib-watch');
      // 告诉Grunt我们在终端中启动Grunt时需要执行哪些任务
      grunt.registerTask('dev', ['uglify','watch']);
    };
    

    在项目根目录下执行命令grunt dev,就会启动JavaScript文件压缩和自动刷新功能。

    Grunt的优点是:

    灵活,它只负责执行我们定义的任务;

    大量的可复用插件封装好了常见的构建任务。

    Grunt的缺点是集成度不高,要写很多配置后才可以用,无法做到开箱即用。

    Grunt相当于进化版的Npm Script,它的诞生其实是为了弥补Npm Script的不足。

    3 Gulp

    Gulp(http://gulpjs.com) 是一个基于流的自动化构建工具。除了可以管理和执行任务,还支持监听文件、读写文件。Gulp被设计得非常简单,只通过下面5种方法就可以支持几乎所有构建场景:

    通过gulp.task注册一个任务;

    通过gulp.run执行任务;

    通过gulp.watch监听文件的变化;

    通过gulp.src读取文件;

    通过gulp.dest写文件。

    Gulp的最大特点是引入了流的概念,同时提供了一系列常用的插件去处理流,流可以在插件之间传递,大致使用如下:

    // 引入 Gulp
    var gulp = require('gulp'); 
    // 引入插件
    var jshint = require('gulp-jshint');
    var sass = require('gulp-sass');
    var concat = require('gulp-concat');
    var uglify = require('gulp-uglify');
    // 编译SCSS任务
    gulp.task('sass', function() {
      // 读取文件,通过管道喂给插件
      gulp.src('./scss/*.scss')
        // SCSS 插件将 scss 文件编译成 CSS 文件
        .pipe(sass())
        // 输出文件
        .pipe(gulp.dest('./css'));
    });
    // 合并压缩JavaScript文件
    gulp.task('scripts', function() {
      gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
    });
    // 监听文件的变化
    gulp.task('watch', function(){
      // 当 scss 文件被编辑时执行 SCSS 任务
      gulp.watch('./scss/*.scss', ['sass']);
      gulp.watch('./js/*.js', ['scripts']);    
    });
    

    Gulp的优点是好用又不失灵活,既可以单独完成构建,也可以和其他工具搭配使用。其缺点和Grunt类似,集成度不高,要写很多配置后才可以用,无法做到开箱即用。

    可以将Gulp看作Grunt的加强版。相对于Grunt,Gulp增加了监听文件、读写文件、流式处理的功能。

    4 Fis3

    Fis3(https://fex.baidu.com/fis3/) 是一个来自百度的优秀国产构建工具。相对于Grunt、Gulp这些只提供了基本功能的工具,Fis3集成了Web开发中的常用构建功能,如下所述。

    读写文件:通过fis.match读文件,release配置文件的输出路径。

    资源定位:解析文件之间的依赖关系和文件位置。

    文件指纹:在通过useHash配置输出文件时为文件URL加上md5戳,来优化浏览器的缓存。

    文件编译:通过parser配置文件解析器做文件转换,例如将ES6编译成ES5。

    压缩资源:通过optimizer配置代码压缩方法。

    图片合并:通过spriter配置合并CSS里导入的图片到一个文件中,来减少HTTP请求数。

    大致使用如下:

    // 加md5
    fis.match('*.{js,css,png}', {
      useHash: true
    });
    // 通过fis3-parser-typescript插件可将TypeScript文件转换成JavaScript文件
    fis.match('*.ts', {
      parser: fis.plugin('typescript')
    });
    // 对CSS进行雪碧图合并
    fis.match('*.css', {
      // 为匹配到的文件分配属性useSprite
      useSprite: true
    });
    // 压缩JavaScript
    fis.match('*.js', {
      optimizer: fis.plugin('uglify-js')
    });
    // 压缩CSS
    fis.match('*.css', {
      optimizer: fis.plugin('clean-css')
    });
    // 压缩图片
    fis.match('*.png', {
      optimizer: fis.plugin('png-compressor')
    });
    

    可以看出Fis3很强大,内置了许多功能,无须做太多配置就能完成大量工作。

    Fis3的优点是集成了各种Web开发所需的构建功能,配置简单、开箱即用。其缺点是目前官方已经不再更新和维护,不支持最新版本的Node.js。

    Fis3是一种专注于Web开发的完整解决方案,如果将Grunt、Gulp比作汽车的发动机,则可以将Fis3比作一辆完整的汽车。

    5 Webpack

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

    其官网的首页图很形象地展示了Webpack的定义,如图1-1所示。

    图1-1 Webpack 简介

    一切文件如JavaScript、CSS、SCSS、图片、模板,对于Webpack来说都是一个个模块,这样的好处是能清晰地描述各个模块之间的依赖关系,以方便Webpack对模块进行组合和打包。经过Webpack的处理,最终会输出浏览器能使用的静态资源。

    Webpack具有很大的灵活性,能配置处理文件的方式,使用方法大致如下:

    module.exports = {
      // 所有模块的入口,Webpack从入口开始递归解析出所有依赖的模块
      entry: './app.js',
      output: {
        // 将入口所依赖的所有模块打包成一个文件bundle.js输出 
        filename: 'bundle.js'
      }
    }
    

    Webpack的优点是:

    专注于处理模块化的项目,能做到开箱即用、一步到位;

    可通过Plugin扩展,完整好用又不失灵活;

    使用场景不局限于Web开发;

    社区庞大活跃,经常引入紧跟时代发展的新特性,能为大多数场景找到已有的开源扩展;

    良好的开发体验。

    Webpack的缺点是只能用于采用模块化开发的项目。

    6 Rollup

    Rollup(https://rollupjs.org) 是一个和Webpack很类似但专注于ES6的模块打包工具。它的亮点在于,能针对ES6源码进行Tree Shaking,以去除那些已被定义但没被使用的代码并进行Scope Hoisting,以减小输出文件的大小和提升运行性能。然而Rollup的这些亮点随后就被Webpack模仿和实现。由于Rollup的使用方法和Webpack差不多,所以这里就不详细介绍如何使用Rollup了,而是详细说明它们的差别:

    Rollup是在Webpack流行后出现的替代品;

    Rollup生态链还不完善,体验不如Webpack;

    Rollup的功能不如Webpack完善,但其配置和使用更简单;

    Rollup不支持Code Spliting,但好处是在打包出来的代码中没有Webpack那段模块的加载、执行和缓存的代码。

    Rollup在用于打包JavaScript库时比Webpack更有优势,因为其打包出来的代码更小、更快。但它的功能不够完善,在很多场景下都找不到现成的解决方案。

    7 为什么选择Webpack

    上面介绍的构建工具是按照它们诞生的时间排序的,它们是时代的产物,侧面反映出Web开发的发展趋势,如下所述:

    在Npm Script和Grunt时代,Web开发要做的事情变多,流程复杂,自动化思想被引入,用于简化流程;

    在Gulp时代,开始出现一些新语言用于提高开发效率,流式处理思想的出现是为了简化文件转换的流程,例如将ES5转换成ES6;

    在Webpack时代,由于单页应用的流行,网页的功能和实现代码变得复杂、庞大,Web开发向模块化改进。

    这些构建工具都有各自的定位和专注点,它们之间既可以单独完成任务,也可以相互搭配来弥补各自的不足。在了解这些常见的构建工具后,我们需要根据自己的需求去判断应该如何选择和搭配它们才能更好地满足自己的需求。

    经过多年的发展,Webpack已经成为构建工具中的首选,这是有原因的:

    大多数团队在开发新项目时会采用紧跟时代的技术,这些技术几乎都会采用“模块化+新语言+新框架”,Webpack可以为这些新项目提供一站式的解决方案;

    Webpack有良好的生态链和维护团队,能提供良好的开发体验并保证质量;

    Webpack被全世界大量的Web开发者使用和验证,能找到各个层面所需的教程和经验分享。



    本文节选自《深入浅出Webpack》一书

    展开全文
  • gulp是一个前端构建工具,它能通过自动执行常见任务,比如编译预处理css,压缩 javascript 代码和刷新浏览器。gulp是基于node.js的。与grunt相比,gulp无需写一大堆繁杂的配置参数,也非常简单,gulp有庞大的生态圈...
  • 前端构建工具是什么?

    千次阅读 2018-01-18 18:12:15
    前端构建工具是什么 感谢原知乎答案,前端构建工具是什么? - Jasin Yip的回答 - 知乎 前端构建工具通常可以在前面加【自动化】三个字,就是用来让我们不再做机械重复的事情,解放我们的双手的。 举个栗子: ...
  • 智联大前端Vite一经发布就吸引了很多人的关注,NPM下载量一路攀升:而在Vite之前,还有Snowpack也同样采用了No-Bundler构建方案。那么No-Bundler模式与传统老...
  • 前端程序员常用的9大构建工具

    千次阅读 2020-11-30 16:30:15
    构建工具是一个把源代码生成可执行应用程序的过程自动化的程序(例如Android app生成apk)。构建包括编译、连接跟把代码打包成可用的或可执行的形式。 在小型项目中,开发者往往手动调用构建过程,这样在大型的项目中...
  • 在刚刚结束的 VueConf2021 中,除了 Vue 3.0 以外,另外一个亮点就是下一代构建工具 Vite 了。在尤雨溪分享的【 Vue 3 生态进展和计划】的演讲中,尤大神还特意提到...
  • Gulp自动化构建工具可以增强你的工作流程! 易于使用、易于学习、构建快速、插件高质! 在日常开发中,可以借助Gulp的一些插件完成很多的前端任务。 如:代码的编译(sass、less)、压缩css,js、图片、合并js,css...
  • 前端构建工具-fis3使用入门

    千次阅读 2017-07-10 16:01:08
    本文主要介绍前端构建工具-fis3 如何使用。 FIS3 是面向前端的工程构建工具。解决前端工程中性能优化、资源加载(异步、同步、按需、预加载、依赖管理、合并、内嵌)、模块化开发、自动化工具、开发规范、代码部署...
  • 说到构建工具,我往往会在前面加「自动化」三个字,因为构建工具就是用来让我们不再做机械重复的事情,解放我们的双手的(my god)。 1.Webpack Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多...
  • fedao 学而思在线前端工程构建工具
  • 前言:本人于2014年底开始供职于百度贴吧(以下简称“贴吧”)。...项目构建,或者称之为编译,早已经成为了Web前端项目在发布过程中的一个必不可少的环节。从最早的JavaScript与CSS压缩合并,发展到今天ES

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 162,544
精华内容 65,017
关键字:

前端构建工具

友情链接: 30-06-2020_10-25-38.zip