打包工具可以更好的治理html，css，javascript，使用可以锦上添花，不使用也没关系。

1. 前言

1.1 前端

前端三剑客：结构层 html，显示层 css，行为层 javascript。

html好比是屋子的地基，css和 javascript是屋子的建筑材料，这三个部门一起组成个漂亮的屋子。我们不能把他们离开说，某某部门是个屋子，只有三个一起才气组成一个漂亮的屋子 。

1.2 JavaScript 的简介（参考阮一峰的ES6入门简介）

这几年，javascript 生长异常快速，特别是在2015年，更是有一个质的飞跃。

1.2.1 ECMA

说到 JavaScript，就要说下Web尺度的组织协会，ECMA，它是“European Computer Manufactures Association”的缩写，中文称 欧洲计算机制造联合会，1961年确立，旨在确立统一的电脑操作花样尺度--包罗程序语言和输入输出的组织。

1.2.2 JavaScript

2015年，JavaScript 引入许多新的语法糖，而且制订历程当中，另有许多组织和小我私家不停提交新功效。事情很快就变得清晰了，不能能在一个版本内里包罗所有将要引入的功效。

通例的做法是先公布 6.0 版，过一段时间再发 6.1 版，然后是 6.2 版、6.3 版等等 ，这个2015年之前 JavaScript 现在习惯称为ECMAScript5，而之后称为ECMAScript6。

尺度委员会商定后最终决议，尺度在每年的 6 月份正式公布一次，作为昔时的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的 6 月份，草案就自然变成了新一年的版本。这样一来，就不需要以前的版本号了，只要用年份符号就可以了。

因此，ES6 既是一个历史名词，也是一个泛指，寄义是 5.1 版以后的 JavaScript 的下一代尺度，涵盖了 ES2015、ES2016、ES2017 等等，而 ES2015 则是正式名称，特指该年公布的正式版本的语言尺度。本书中提到 ES6 的地方，一样平常是指 ES2015 尺度，但有时也是泛指“下一代 JavaScript 语言”。

• 问题一：关于ECMAScript 和 JavaScript 是什么关系 ？

  回覆：从现在的角度来看，二者是可以交换的。即ECMAScript是JavaScript ，JavaScript 是ECMAScript。

• 问题二：ECMAScript 6 和 ECMAScript 2015 是什么关系 ?

  回覆：ECMAScript 6泛指下一代 JavaScript 语言，ECMAScript 2015指的是 2015年的 JavaScript 尺度；

总结

// es6 泛指下一代 JavaScript 语言，那时部门人也会以为特指ES2015
ECMAScript6.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 先容

仅先容 4 款主流的打包工具：grunt ， gulp，webpack， rollup，以公布时间为顺序。

1. Grunt：最老牌的打包工具，它运用设置的头脑来写打包剧本，一切皆设置，以是会泛起比较多的设置项，诸如option,src,dest等等。而且差别的插件可能会有自己扩展字段，认知成本高，运用的时刻需要明了种种插件的设置规则。
2. Gulp：用代码方式来写打包剧本，而且代码接纳流式的写法，只抽象出了gulp.src, gulp.pipe, gulp.dest, gulp.watch 接口，运用相当简朴。更易于学习和使用，使用gulp的代码量能比grunt少一半左右。
3. Webpack: 是模块化治理工具和打包工具。通过 loader 的转换，任何形式的资源都可以视作模块，好比 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片等。它可以将许多松散的模块根据依赖和规则打包成相符生产环境部署的前端资源。还可以将按需加载的模块举行代码离开，等到实际需要的时刻再异步加载。它定位是模块打包器，而 Gulp/Grunt 属于构建工具。Webpack 可以取代 Gulp/Grunt 的一些功效，但不是一个职能的工具，可以配合使用。
4. Rollup：下一代 ES6 模块化工具，最大的亮点是行使 ES6 模块设计，行使 tree-shaking天生更简练、更简朴的代码。一样平常而言，对于应用使用 Webpack，对于类库使用 Rollup；需要代码拆分(Code Splitting)，或者许多静态资源需要处置，再或者构建的项目需要引入许多 CommonJS 模块的依赖时，使用 webpack。代码库是基于 ES6 模块，而且希望代码能够被其他人直接使用，使用 Rollup。

2.2 使用总结

 Grunt：MPA，老牌打包工具，基于文件为前言（运行慢，零星的剧本文件一当多起来就受到影响

 Gulp：MPA，易学，基于 nodejs 的 steam 流打包
 Webpack：SPA，现在最壮大的打包工具，然则过于臃肿，若何单纯打包js不推荐

 Roleup：MPA，tree-shaking特征（针对es6，按需打包，多余的不要，现在（2018，vuex,react主流使用）

2.3 若何选择

若是你一个都不熟悉的话，那么我直接推荐 webpack，官方文档异常详细，更新频率很高。而且在其他的打包工具在处置非网页文件（好比svg, png, vue等）基本照样需要借助它来实现。最要害现在的脚手架主流依旧是它。

若是在处置文件需要关注前端三剑客的话，那么 grunt 和 gulp 会更好点，这两者我直接推荐 gulp，除非你已经很熟悉 grunt了。

若是你加倍在意剧本代码的简练精炼，那么可以使用rollup

若是你还要加倍精炼一点，这里新出来一个新的打包工具，免插件式parcel

3. 小我私家打包设置

在打包上，我小我私家注重的是设置从简朴到庞大，以是我离开使用。

css 打包选择了gulp，2个义务，3个插件，有一个插件是为了编译scss，若是直接使用css，那么这个插件也可以去除。

// 义务一：编译
gulp.task('compile', function () {
  return gulp.src('src/scss/*.scss')
    .pipe(sass({outputStyle: 'expanded'})) // 插件一：编译scss
    .on('error', showError)
    .pipe(autoprefixer({ // 插件二：自动添加浏览器前缀
      browsers: ['> 1%', 'last 4 versions'],
      cascade: false,
      remove: true
    }))
    .pipe(cleanCss({ // 插件三：压缩样式
      compatibility: 'ie8',
      format: 'keep-breaks'
    }))
    .pipe(gulp.dest('../dist/css'));
})
// 义务二：考察
gulp.task('watch', function(){
  gulp.watch('src/scss/*.scss', ['compile'])
})

ECMAScript 小我私家现在基本使用es6，以是在打包剧本上我选择了rollup，只提取有用的代码，设置上参考react官方设置文档

import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import { eslint } from 'rollup-plugin-eslint';
import { uglify } from 'rollup-plugin-uglify';

const env = process.env.NODE_ENV;
console.log('当前环境：%s', env);

const configs = [
  {
    input: 'src/js/index.js',
    output: {
      file: 'dist/js/index.js',
      format: 'umd',
      name: 'atom',
      banner,
      sourcemap: true
    }
  }
]

const plugins = [
  eslint({ // 检测js代码语法花样
    formatter: 'codeframe',
    include: [
      'src/js/**/*.js'
    ]
  }),
  resolve({ // 提取所依赖的代码
    jsnext: true,
    main: true,
    browser: true,
    module: true
  }),
  babel({ // 编译es6 -> es5
    exclude: 'node_modules/**' // 只编译我们的源代码
  }),
  commonjs() // 将commonjs 转成 es6 
]

export default configs.map(v => {
  v.plugins = plugins

  if (env === 'development') {
    v.watch = { // 监听剧本的转变
      include: 'src/js/**',
      exclude: ['node_modules/**']
    }
  }

  if (env === 'production') {
    v.plugins.push(
      uglify({ // 压缩剧本
        compress: {
          pure_getters: true,
          unsafe: true,
          unsafe_comps: true,
          warnings: false
        }
      })
    )
  }

  return v
});

html 小我私家不做任何处置，可以在上线压缩削减文件的体积，压缩直接使用gulp

// 义务一
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//消灭HTML注释
        collapseWhitespace: true,//压缩HTML
        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        minifyJS: true,//压缩页面JS
        minifyCSS: true//压缩页面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options)) // 使用gulp-htmlmin插件
        .pipe(gulp.dest('dist/html'));
});

来自：https://segmentfault.com/a/1190000019434666

链接: http://www.fly63.com/article/detial/3628