前端构建工具gulp入门之scss

经常有同学问关于gulp编译scss文件的技术，由于我比较喜欢Vue组件化开发方式，所以对webpack研究的多一些。
今天专门针对刚接触前端自动化的同学写个小小的笔记，当他们在问我的时候，直接把这篇笔记扔过去^_^

说在前面的话

首先，gulp是众多构建工具其中的一个
例如，老牌的grunt、崛起的webpack
其次，略懂nodeJs和npm、git命令
以下命令均在Git Bash下完成，兼容Linux和Mac

环境准备

1
2
3

#查看是否安装成功：
node -v
npm -v

安装gulp

npm install -g gulp
#查看是否安装成功：
gulp -v

创建工程

首先，初始化一个工程文件：package.json，记录安装的依赖包，内容如下：

{
  "name": "gulp-scss",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

然后，安装gulp并记录到：package.json

npm install gulp --save-dev
#简写命令
npm i gulp -D

配置gulp

用gulp编译scss，只需要从npm上安装对应的解析器即可：gulp-sass
真正开发的时候，不可能写一点scss就编译一次，而是保存完自动编译，需要：gulp-rename
gulp的配置存储在：gulpfile.js 文件里面，这个文件名是固定写法。

//引入Gulp模块
var gulp = require('gulp');
// 引入依赖模块
var sass = require('gulp-sass');
var rename = require('gulp-rename');
// 编译Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});
// 默认任务
gulp.task('default', function(){
    gulp.run('sass');
    // 监听文件变化
    gulp.watch(['./scss/*.scss'], function(){
        gulp.run('sass', 'scripts');
    });
});

说到底，也就是个js文件，写Gulp配置跟node开发很相似，用到哪个模块require就可以。
Gulp只有五个方法： task、src、dest、watch和run。
配置完成，使用之前，要把gulp配置中的包（模块）下载到本地项目：

1 2	#用到2个模块 npm i gulp-sass gulp-rename -D

Sass任务

为第一条任务：test 添加style.scss文件，现实自动编译：

#scss/style.scss
$red:red;
$blue:blue;
div{
    a{
        //可以这样注释，并不会编译到css里面
        color: $red;
        &:hover{
            color: $blue;
        }
    }
}
ul{
    li{
       //蓝色
       color: $blue;
    }
}

运行Gulp：

#运行默认任务
gulp default
#运行默认任务的简写：
gulp
#任务多的时候，可以单独指定某个任务
gulp sass

运行成功：

#css/style.css
div a {
    color: #f00;
}
div a:hover {
    color: #ff0;
}
ul li {
    color: #ff0;
}

项目结构

node_modules
  -.bin
  -gulp
  -gulp-rename
  -gulp-sass
scss
  -style.scss
css
  -style.css
gulpfile.js
package.json

工程项目Git下载地址