gulp

【转载】使用Gulp构建网站小白教程

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

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

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

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

页面

返回顶部