模块化 CSS 如今，CSS 理论几乎和 CSS 或 JavaScript 框架一样多。但 CSS 或 JavaScript 框架的用法较为繁琐，而且必须成套使用，而 CSS 理论更多的是阐释 HTML 和 CSS 之间的关系，而不是预编译的代码库，因此使用起来更为灵活。

Webpack 打包组件库的姿势 最近开发了一个 Vue 插件，怎样分享给其它开发者使用？项目 A、项目 B、项目 C 都要用到架构组开发的组件库，怎么实现不同项目组之间代码的同步。本文基于 Webpack 讨论打包 Vue 组件库的正确方法。

使用 babel-polyfill 今天写代码真是行云流水，很快就搞完了，马上提交。下午测试告诉我，不能兼容 IE 浏览器。这不打开就是空白，F12 进去跳出一个醒目的错误：出错：[vuex] vuex requires a Promise polyfill in this browser.这不是 Vue 的锅，React 应用也会遇到兼容 IE 浏览器的问题。百度了一下，很快找到解决方案。只要在入口文件添加引入 babel-polyfill 就搞定了。出于好奇，我下午抽时间仔细研究了一下 babel。

Nexus 上发布 npm 包 最近在着手整理一些平常写的 Vue UI 组件，我们一般习惯 Vue CLI SPA 开发方式，所以要在不同项目之间公用这些组件就很麻烦。要是将这些组件做成一个组件库工程，发布到 npmjs 官网就可以通过 npm 命令方便拉取了。但我担子再大也不敢将公司的代码上传外网吧。得托管到公司的私有仓库。我知道的 npm 私有仓库有 cnmp。后来后端同学推荐我试一试 nexus。因为公司已经搭建好 Nexus，只需开放 npm 包托管功能就行了。

Grunt vs Gulp Gulp 已经出来很久了，Gulp 的具体用法可以参考园子的 这篇文章 。本文要讲述有是它与 Grunt 有什么异同。APIGrunt 基于配置来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如 option、src、dest 等等。而且不同的插件可能会有自己扩展字段，导致认知成本的提高，运用的时候要搞懂各种插件的配置规则。 Gulp 基于代码方式来写打包脚本，并且代码采用流式的写法，只抽象出了 gulp.src、gulp.pipe、gulp.dest、gulp.watch 接口，使用相当简单。经尝试，使用 Gulp 的代码量能比 grunt 少很多。TaskGrunt 中每个任务（Task）对应一个最外层配置的 key, 大任务可以包含小任务，以一种树形结构存在。 Gulp 中没有子任务的概念，只能通过注册多个任务来完成。运行方式Grunt 采用串行方式执行任务，比如我们注册了这样一个任务：grunt.register('default', ['concat', 'uglify', 'release'])Grunt 是按书写的顺序首先执行 concat，然后是 uglify，最后才是 release。 Gulp 采用并行方式执行任务，通过一个 pipe 方法，以数据流的方式处理打包任务，我们来看这段代码：gulp.task('jsmin', () => { gulp.src(['build/js/**/*.js']) // 此处应该是 concat方法，但服务器不支持 .pipe(contact('app.min.js')) .pipe(uglify()) .pipe(gulp.dest('dist/js/')); });程序首先将 build/js 下的 JavaScript 文件压缩为 app.min.js, 再进行 uglify 操作，最后发布在 dist/JavaScript 下。这一系列工作就在一个 Task 中完成，中间没有产生任何临时文件。注意：相比之下，Grunt 运行效率会比 Gulp 低，但使用 grunt-concurrent 插件是可以实现并行执行任务，让这种差距减少。使用插件一般情况下，Grunt 有的插件也能找到相对应的 Gulp 插件。复杂应用很少是单页面应用（SPA），一般是多页面的。Grunt 使用插件合并、最小化、更名 CSS 和 JavaScript 后，要在相应的入口页面替换原来的 CSS、JavaScript 资源资源路径不太容易。一个好办法就是使用 grunt-usemin 来解决这一问题。该插件通过在页面注解的方式自动替换静态资源 url 的配置，可大大减轻多页面需要手动配置的工作量。结合使用 Grunt 动态构建文件对象进行配置，可做到少修改配置。总结其实使用 Gulp 结合 gulp-rev 和 gulp-rev-replace 可以完成类似的任务，具体用法可以参考我在项目中所使用的 Gulp 配置 。最近使用 Yeoman的 generator-angular 生成器来创建 angular 脚手架工程，发现 Yeoman 官方推荐使用 Gulp 而不是 Grunt 来构建工程了。Grunt 也基本上停止更新了，结果你懂得的。