通过这个教程学习如何使用JavaScript打包工具Rollup配合PostCSS来取代Grunt或Gulp处理样式文件。上一篇文章中，我们完成了使用Rollup打包前端JavaScript入门。这篇文章包含第二部分和第三部分。第二部分会继续在上次的项目中进行，为Rollup添加处理样式的能力，使用PostCSS进行一些转换，让我们能使用更简单的变量写法和嵌套规则等语法糖。然后完成第三部分，圆满结束。第三部分将为项目添加文件监听和教程：如何使用Rollup打包样式文件并添加LiveReload，这样每当文件变化时就不用再手动地打包bundle文件了。

通过这个系列教程一步一步学习如何使用更小更快的Rollup取代Webpack和Browserify打包JavaScript文件。这周，我们要使用Rollup构建我们的第一个项目，Rollup是一个打包JavaScript(和样式，不过下周才会做)的构建工具。

行业里有一种批评，说前端太浮躁，总是追逐新技术，感觉 grunt 还不熟悉，突然一夜之间满大街都在谈论 gulp 了。月影觉得不能怪技术发展太快，技术发展总是带来好处多于坏处，有时候我们确实需要鼓起勇气去“追求”技术潮流，当然理由是为了弄明白为什么有这些技术工具，而无关于什么浮躁之类的事儿。

对样式审查？很少人会这么做吧，但实际上开发者应该有这样的态度，尤其是不同团队多人开发时，这一点尤为重要。在本文中，我将陈述两点：一是为什么我们需要对样式进行审查，二是如何将审查工具融合到整体的构建流程中（适用于 CSS，也适用于 Sass)。

这是Gulp系列教程的第十一部分。今天我将编写生产代码构建任务，设置一个服务器来浏览生产代码并用Jekyll来创建生产站点。开发过程中我使用default这个 Gulp.js任务来运行开发服务器，构建资源和监听改变。对于生产构建过程我需要另一个入口点。

这是Gulp系列教程的第十部分。今天我会用Gulp.js创建CSS精灵图。只是为了确保每个人都知道我在说什么：CSS精灵图是把一系列图片放到一张图上。这样可以减少请求数因而网页加载更快。CSS会把每个图标移动到正确位置。CSS精灵图不再像过去那样常用，因为SVG或矢量字体。但是我仍将它们作为不支持矢量字体浏览器的备用方案。

这是Gulp系列教程的第九部分。今天我会使用Gulp.js来自动检测SCSS和JavaScript文件的语法错误和警告。我决定检测SCSS文件而不是CSS文件，因为检测生成的CSS没有意义。但是你也可以用gulp-csslint来检测。

这是Gulp系列教程的第八部分。今天我会用Gulp.js给不同文件设置监听。你还记得一开始的watch任务吗？直到现在才启动BrowserSync和开发服务器，但它还没有监听任何文件。我现在来写这些监听任务。

这是Gulp系列教程的第七部分。今天我会使用Gulp.js来把小图片的URL替换为Base64编码图片。

这是Gulp系列教程的第六部分。上篇文章长而复杂。这次的文章比较简单：我会展示如何移动图片以及生成矢量字体。