工作流

如何使用Rollup打包样式文件并添加LiveReload

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

如何使用Rollup打包JavaScript

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

使用stylelint对CSS/Sass做代码审查

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

Gulp系列教程:产品构建,预览和Jekyll

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

Gulp系列教程:生成CSS精灵图

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

Gulp系列教程:检查SCSS和JavaScript的语法

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

Gulp系列教程:监听改变

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

Gulp系列教程:图片转换成Base64编码

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

Gulp系列教程:图片和矢量字体

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

Gulp系列教程:使用Browserify处理JavaScript

这是Gulp系列教程的第五部分。今天我会展示如何使用Browserify来打包JavaScript并使用CommonJS模块在浏览器中运行node模块。

页面

返回顶部