Gulp入门：从安装到编译Sass
近年来，为了应对前端项目的复杂性，一系列“自动化工具”，甚至“构建系统”不断涌现。本文要介绍的就是其中占有举足轻重地位的Gulp.js。
说到”前端自动化工具“，除了我们今天的主角Gulp，其实同样广为人知的还有webpack和Grunt，它们有很多相似的地方，比如都是运行于Node.js。但webpack一般被归类为“构建系统”，一般更多地用于构建中大型的网站；而Grunt的易用性整体上并没有Gulp好。
1. Gulp和Grunt的差异
Grunt的语法形式比较独特，十分类似于JSON，而Gulp延续了JavaScript的语法，显得更加中规中矩。
Grunt写法示例
grunt.initConfig({
子任务1:{
选项
},
子任务2:{
选项
}
});
grunt.registerTask("总任务名"),{子任务1, 子任务2})Gulp写法示例
gulp.task("总任务名",
gulp.子任务1(选项)
.子任务2(选项)
);除了语法上的差异外，Gulp优于Grunt还体现在运行速度上。由于Grunt各个任务之间多为同步阻塞调度关系，而Gulp则大规模地采用异步处理，它们之间的速度差异自不用多说。
2. 创建项目
首先先创建我们的项目目录，假设这次我们的项目名称是LearnGulp，那么就先创建一个同名的空目录，然后在该目录下打开我们的命令行环境。
运行下面的命令进行该nojs项目的初始化：
npm init -y打开我们的项目配置文件package.json，可以看到下面的内容：
{
"name": "LearnGulp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}3. 安装Gulp
为了运行Gulp，首先我们现在本地局部环境下安装我们的Gulp（只能在当前项目目录下被node.js检测并加载）。
npm install -D gulp上面的命令中，-D其实就是我们常见常用的--save-dev的缩写，此后，打开我们的package.json文件，对应于devDependencies这一项应该就出现了我们想要安装并加载的Gulp了。以防万一，你还可以到node_modules目录下确认下到底有没有下载成功。
为了更好地让大家理解Gulp的工作原理，我们接下来演示下如何使用它来编译Sass文件。同样地，我们需要安装相关的依赖库——”gulp-sass”。
npm install -D gulp-sass然后在子目录css下准备好我们的sass文件css/style.scss：
// 嵌套类测试
div {
p {
font-weight: bold;
}
}
// 变量测试
$fontColor: #525252;
h1 {
color: $fontColor;
}接着，创建我们的Gulp脚本文件gulpfile.js：
// 加载gulp
const gulp = require('gulp');
// 读取用于编译Sass的插件
const sass = require('gulp-sass');
// 定义gulp任务
gulp.task('default', function () {
gulp.src('css/style.scss')
.pipe(sass())
.pipe(gulp.dest('css'));
});最后，运行我们的gulp脚本：
npx gulp编译后得到的CSS文件内容如下：
div p {
font-weight: bold; }
h1 {
color: #525252; }顺带一提，我们这次将任务命名为“default”，如果更换为其他名称的话，启动命令也要随之作出改变，如npx gulp 任务名。
4. 指定选项
但是，如果我们仔细观察最后编译生成的CSS文件，会发现每一个”}”并没有像标准CSS那样单独换行显示。如果想要实现该效果，可以向我们的gulp-sass插件添加对应的选项：
.pipe(sass({
outputStyle: 'expanded'
}))除此以外，gulp-sass插件还接受类似的其他选项，如：nested、compact、compressed。
5. watch功能呢
通常情况下，Sass文件的修改频率并不低，如果每一次修改都要手动指定任务，并运行我们的gulp脚本，是在是太麻烦了。
下面我们就尝试利用gulp的watch功能，实现每当Sass文件的内容发生改变，就会自动执行对应的命令，重新进行编译。
其实它的用法相当简单，
gulp.watch("要监视的文件", 要进行的响应处理)利用这个函数，我们将原来的Gulp脚本文件gulpfile.js修改如下
// 加载gulp
const gulp = require('gulp');
// 加载处理Sass文件的gulp插件
const sass = require('gulp-sass');
// 定义默认任务
gulp.task('default', function () {
// ★ 监视style.scss文件的变化
gulp.watch('css/style.scss', function () {
// 一旦style.scss的内容发生变化，则进行下面的处理
// 读取style.scss文件的内容
gulp.src('css/style.scss')
// 进行Sass文件的编译
.pipe(sass({
outputStyle: 'expanded'
})
// 定义Sass文件编译过程中发生错误的响应处理(如果没有它，一旦发生错误则直接退出脚本)
.on('error', sass.logError))
// 编译后的css文件保存在css目录下
.pipe(gulp.dest('css'));
});
});