Gulp系列教程

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模块。

Gulp系列教程:使用Sass(和Compass)编写CSS

这是Gulp系列教程的第四部分。今天我会展示如何使用Sass(和Compass如果你愿意)来创建CSS文件。另外我会使用Autoprefixer来添加浏览器前缀并创建Source Maps使得Sass文件调试更方便。

Gulp系列教程:Build,Clean和Jekyll

这是Gulp系列教程的第三部分。今天我想谈一谈build任务,这个任务会执行一个构建过程所需的其它任务,例如清空资源文件以及创建个人Jekyll站点。

Gulp系列教程:使用BrowserSync浏览及相关配置

这是Gulp.js介绍系列的第二篇教程。今天我想讨论一些首要的Gulp.js任务并用BrowserSync设置开发服务器。接下来我开始创建一个配置文件。

页面

返回顶部