gulp基础学习之二

接着上回，下面就需要准备一个目录结构

这是通用的Webapp目录结构，名字无所谓，关键是要你自己记住。

---

小试身手

接下来需要在根目录（2017329）下创建一个gulpfile.js的文件

在这个gulpfile.js的文件里面添加一行命令：var  gulp  =  require('gulp')

这个命令是告诉node去node_modules里面找gulp包，找到就会赋值给gulp变量，然后就可以使用它了。

来个简单的任务：

name就是给任务起个名字，然后在cdm里面就可以执行  gulp  name，就会运行该任务。

万年不变hello  world

在cmd  里面转到根目录  输入命令  gulp  hello

得出来的结果：

OK，接下来就要正式玩转gulp任务了

---

gulp执行预处理

这环节就需要结合sass来用了，使用npm命令：npm  install   gulp-sass  --save-dev

等它完成 你在看下package.json里面依赖项就会添加了sass（--save-dev的作用）

接着就需要在gulpfile中引入插件保存变量了；

引入插件：var  sass  = require('gulp-sass');

下面就需要让sass这个任务知道哪里是提供源文件的，又是在哪里输出文件

上面也可以直接写成一行

return  gulp.src('app/scss/styles.scss').pipe(sass()).pipe(gulp.dest('app/css'))

这句首先是通过src找到了源文件，之后通过pipe调用了sass插件进行编译，最后通过pipe调用了gulp.dest给出了输出编译后文件的位置

测试下

在sass文件下写入

在cmd 中执行命令  gulp  sass

就在在app/css 文件夹下面得到styles.css 文件

gulp让sass变得如此简单。

接下来还可以通过node的通配符，自动匹配文件，让计算机自己检查文件名和路径进行匹配

注：大部分匹配符会用到4种：

1，*.scss :匹配当前目录下任意scss文件

2，**/*.scss : 匹配当前目录下以及其子目录下的所有scss文件

3，!not-me.scss : !号移除匹配的文件，这里是移除not-me.scss

4，*.(scss|sass)：+号后面跟着()号，里面的元素用  |  号分割，匹配多个选项。这里是匹配scss和sass文件

---

---