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'));
});
});