这篇文章当时是在本地写的，觉得换电脑不方便，所以记录在这里。前端打包工具打包工具可以更好的管理html、css、javascript，用它可以锦上添花，不用也没关系。一、前言1.1前端三剑客：结构层html、表现层css、行为层javascript。HTML就像房子的地基，css和javascript是房子的建筑材料，这三部分共同组成了一座漂亮的房子。我们不能把它们分开就说某一部分是房子，只有三个在一起才能组成一个漂亮的房子。1.2JavaScript入门（参考阮一峰ES6入门）。近几年，javascript发展非常快，尤其是2015年，更是有了质的飞跃。1.2.1ECMA说到JavaScript，就不得不说到Web标准的组织协会ECMA，它是“欧洲计算机制造商协会”的简称。格式标准——包括编程语言和输入输出的组织。1.2.2JavaScript2015年，JavaScript引入了很多新的语法糖，在发展过程中，很多组织和个人不断提交新的功能。很快就清楚了，不可能在一个版本中包含要引入的所有功能。常规做法是先发布6.0版本，过一段时间再发布6.1版本，然后是6.2版本，6.3版本等等。这个2015年以前的JavaScript，现在习惯上叫ECMAScript5，后来叫ECMAScript6。经标准委员会协商最终决定，该标准每年6月正式发布一次，作为当年的正式版本。以后的时间，会在这个版本的基础上有所改动，一直到明年6月份，草稿自然就变成了新年版。这样，不需要以前的版本号，只需要年份戳。因此，ES6不仅是一个历史名词，也是一个泛指。意思是JavaScript5.1版本之后的下一代标准，涵盖ES2015、ES2016、ES2017等，而ES2015是官方名称，特指当年发布的官方版本语言标准。本书中凡提到ES6，一般是指ES2015标准，但有时也泛指“下一代JavaScript语言”。问题一：ECMAScript和JavaScript有什么关系？答：从目前来看，两者是可以互换的。即ECMAScript就是JavaScript，JavaScript就是ECMAScript。问题2：ECMAScript6和ECMAScript2015有什么关系？答：ECMAScript6泛指下一代JavaScript语言，ECMAScript2015指2015年的JavaScript标准；Summary//es6泛指下一代JavaScript语言，当时也有人特指ES2015ECMAScript6.0=ECMAScript2015=es2015=es6（有人这么认为）ECMAScript6.1=ECMAScript2016=es2016=es7（有人这么认为）认为是）ECMAScript6.2=ECMAScript2017=es2017=es8（有人认为是）1.2.3浏览器的体验尴尬，因为JavaScript发展很快，但是浏览器跟不上脚本更新的进度。一方面给出了标准，另一方面又不能直接在浏览器上使用。这就是Babel的用武之地。Babel自称是一个JavaScript编译器。它的作用是将ES6的新语法转换成ES5，也就是现在浏览器都可以识别的脚本（现在基本上是针对老版本的IE内核）。不过用Babel编译也有缺点，就是每次保存的时候都需要手动使用命令行编译，而且编译过程中需要关联的包一起使用，非常繁琐。因此，出现了打包工具，可以帮助完成这些繁琐的工作。2.打包工具2.1简介只介绍四种主流的打包工具：grunt、gulp、webpack、rollup，按发布时间排序。Grunt：最古老的打包工具，它用配置的思想来写打包脚本，什么都配置，所以配置项会比较多，比如option,src,dest等等。而且不同的插件可能有各自的扩展领域，认知成本高。使用它们时，需要了解各种插件的配置规则。Gulp：使用代码编写打包脚本，代码采用流式编写，只抽象出gulp.src、gulp.pipe、gulp.dest、gulp.watch接口，使用相当简单。更易学易用，与grunt相比使用gulp的代码量可以减少一半左右。Webpack：是一个模块化的管理工具和打包工具。通过loader转换，任何形式的资源都可以看做是模块，比如CommonJs模块、AMD模块、ES6模块、CSS、图片等，可以将很多松散的模块按照依赖关系和规则。也可以将按需加载的模块的代码分离出来，在真正需要的时候异步加载。它被定位为模块打包器，而Gulp/Grunt是一个构建工具。Webpack可以替代Gulp/Grunt的部分功能，但不是功能性工具，可以结合使用。Rollup：下一代ES6模块化工具，最大亮点是采用ES6模块化设计，使用tree-shaking生成更简洁更简单的代码。一般来说，应用用Webpack，类库用Rollup；当需要CodeSplitting，或者需要处理很多静态资源，或者构建的项目需要引入很多CommonJS模块依赖时，使用webpack。代码库基于ES6模块，希望代码可以直接被其他人使用，使用Rollup。2.2使用总结Grunt：MPA，老牌打包工具，基于文件（运行速度慢，散乱的脚本文件一多就会受影响）Gulp：MPA，简单易学，基于nodejs的steam流打包Webpack：SPA，目前最强大的A打包工具，但是过于臃肿，如何简单打包js不推荐Roleup：MPA，tree-shakingfeatures（fores6，packageondemand，不需要extra，目前（2018，vuex,react主流使用)2.3如何选择如果你有的话不熟悉，那我直接推荐webpack，官方文档很详细，更新频率也很高，而且其他的打包工具基本都需要用它来处理非web文件（比如svg、png、vue等）。最关键的还是脚手架的主流。如果在处理文件的时候需要注意前端三剑客，那就grunt而gulp会更好，我直接推荐gulp，除非你已经熟悉grunt了。如果更在意脚本代码的简洁和精炼，可以使用rollup。如果你想更精致一点，这里有一个新的打包工具，免插件parcel3。简单到复杂，所以我分别使用它们。css打包，选择gulp，2个任务，3个插件，1个插件是编译scss的，如果直接用css，那么这个插件也可以去掉。//任务1：编译gulp.task('compile',function(){returngulp.src('src/scss/*.scss').pipe(sass({outputStyle:'expanded'}))//插件1:编译scss.on('error',showError).pipe(autoprefixer({//插件2:自动添加浏览器前缀browsers:['>1%','last4versions'],cascade:false,remove:true})).pipe(cleanCss({//Plugin3:compressedstylecompatibility:'ie8',format:'keep-breaks'})).pipe(gulp.dest('../dist/css'));})//Task2:watchgulp.task('watch',function(){gulp.watch('src/scss/*.scss',['compile'])})ECMAScript我现在基本用es6,所以我在打包脚本上选择了rollup，只提取有用的代码。配置参考react官方配置文档'rollup-plugin-eslint';import{uglify}from'rollup-plugin-uglify';constenv=process.env.NODE_ENV;console.log('currentEnvironment:%s',env);constconfigs=[{输入：'src/js/index.js'，输出：{文件：'dist/js/index.js'，format:'umd',name:'atom',banner,sourcemap:true}}]constplugins=[eslint({//检测js代码语法格式formatter:'codeframe',include:['src/js/**/*.js']}),resolve({//提取依赖代码jsnext:true,main:true,browser:true,module:true}),babel({//compilees6->es5exclude:'node_modules/**'//只编译我们的源代码}),commonjs()//将commonjs转换为es6]exportdefaultconfigs.map(v=>{v.plugins=pluginsif(env==='development'){v.watch={//观察脚本变化包括：'src/js/**'，排除：['node_modules/**']}}if(env==='production'){v.plugins.push(uglify({//压缩脚本compress:{pure_getters:true,unsafe:true,unsafe_comps:true,warnings:false}}))}returnv});html不做任何处理，可以在线压缩减少文件大小，直接使用gulp压缩//Task1gulp.task('testHtmlmin',function(){varoptions={removeComments:true,//清除HTML注释collapseWhitespace:true,//压缩HTMLcollapseBooleanAttributes:true,//省略布尔属性值
