Gulp新人指南-2 watch 预处理 scss

补充一下Index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <h1>测试页面</h1>
    <svg></svg>
</body>
</html>

Globbing in Node/Node通配符

Globs 匹配模式或者文件类型从而添加更多文件到gulp.src,类似正则表达式,但是主要用于文件路径.

当使用通配符,计算机检查

多数Gulp只需要4种不同的通配符:

  1. *.scss:  *匹配当前目录所有类型(当前项目或者目录).
  2. **/*.scss: 这个匹配所有根目录以及子目录的文件.
  3. !not-me.scss:  !符号会排除一个文件,这个例子里not-me.scss会被排除.
  4. *.+(scss|sass):+和()括号会增加匹配类型,使用|分号分开,这个例子会包括.scss和.sass.

现在我们可以用scss/**/*.scss替换app/scss/styles.scss.

继续阅读“Gulp新人指南-2 watch 预处理 scss”

Gulp新人指南-1 基础介绍

原文:https://css-tricks.com/gulp-for-beginners/

翻译

Gulp是一个工具,帮你解决许多web开发的task,经常用于以下情况:

  • 启动一个web服务
  • 自动重新加载页面,当文件保存的时候
  • 支持预处理Sass Less
  • 优化CSS,JS,图片

可以做的事情还有很多,甚至构建一个静态页面生成器。

Gulp很棒棒~学习怎么使用它吧。

 

这是此文章目的所在。

Gulp与Grunt相比,更简洁,更快。

继续阅读“Gulp新人指南-1 基础介绍”