gulp-sass

by Simeon Bello

通过Simeon Bello

I intern at a tech firm presently, and few days ago I got a challenge from my boss about writing an article. So I decided to write something on Gulp-sass. Setting it up can be frustrating sometimes, especially when you are new to it. I use Windows, and searching for an article that would solve my problem was like getting Jack in Black-ish to spell “decrease”.

我目前在一家科技公司实习，几天前，我的老板在撰写文章方面遇到了挑战。 所以我决定在Gulp-sass上写点东西。 设置它有时可能会令人沮丧，尤其是当您不熟悉它时。 我使用Windows，并且寻找可以解决我问题的文章，就像让Jack用黑话拼写“减少”一样。

Ok I think I got a little bit carried away there…enough about me, let’s get started!

好吧，我想我在那里有点儿迷路了……对我来说足够了，让我们开始吧！

P.S. this is my first published article and I hope you love it. :)

附言：这是我的第一篇文章，希望您喜欢。 :)

安装节点 (Installing node)

First, open the command line and install node.js on your computer. It comes with a Node Package Manager(npm) which you can use to install Gulp. After installing, you can install Gulp by running npm install gulp -g. The -g instructs npm to install Gulp globally on your computer (this means that you can use gulp commands anywhere on your computer.)

首先，打开命令行并在计算机上安装node.js。 它带有一个Node Package Manager(npm)，可用于安装Gulp。 安装后，您可以通过运行npm install gulp -g来安装Gulp。 -g指示npm在您的计算机上全局安装Gulp(这意味着您可以在计算机上的任何位置使用gulp命令。)

Before I continue, I am assuming you are familiar with the command line!

在继续之前，我假设您熟悉命令行！

Navigate to your project directory and run npm init. This will create a package.json file, press enter and it will add what you need intothe package.json file.

导航到您的项目目录，然后运行npm init 。 这将创建一个package.json文件，按Enter键，它将需要的内容添加到package.json文件中。

Yeah, you may be wondering what a package.json file is right?A package.json file holds various metadata relevant to your project. This file gives information to npm and allows it to identify the project as well as handle the project’s dependencies. It also makes it easier to install all the tasks that are used in a Gulp project.

是的，您可能想知道一个package.json文件是正确的吗？ package.json文件包含与您的项目相关的各种元数据。 该文件将信息提供给 npm 并允许它标识项目并处理项目的依赖项。 它还使安装Gulp项目中使用的所有任务更加容易。

If you still don’t get it, you probably need Diane to explain it better — what is my problem/obsession with Black-ish??

如果您仍然不了解它，您可能需要戴安娜(Diane)更好地解释它-我对黑眼鲨的问题/痴迷是什么？

After running npm-init, type npm install gulp --save-dev, this instructs npm to install Gulp into your project. By using --save-dev we store Gulp as a dev dependency in the package.json.

运行npm-init ，键入npm install gulp --save-dev ，这指示npm将Gulp安装到您的项目中。 通过使用 --save-dev我们将Gulp作为dev依赖项存储在package.json中。

创建一个Gulpfile (Creating a Gulpfile)

Now that you’ve installed Gulp, you’re ready to install the first task. You have to require Gulp. Create a new file called gulpfile.js in your project directory — You can do this by using any text editor. Start by adding the code below to your gulpfile.

既然您已经安装了Gulp，就可以开始安装第一个任务了。 您必须require Gulp。 在项目目录中创建一个名为gulpfile.js的新文件-您可以使用任何文本编辑器来完成此操作。 首先将以下代码添加到您的gulpfile中。

‘use strict’;

var gulp = require(‘gulp’);

设置任务 (Setting up a task)

Now you can install a gulp task — in this case we would install Gulp-sass. This task makes it possible to convert Sass to CSS. Still using the command line, you can install Gulp-sass by running npm install gulp-sass --save-dev. After that, require Gulp-sass in your gulpfile.js.

现在，您可以安装gulp任务-在这种情况下，我们将安装Gulp-sass。 通过此任务，可以将Sass转换为CSS 。 仍然使用命令行，您可以通过运行npm install gulp-sass --save-dev来安装Gulp-sass。 之后，在您的gulpfile.js中要求Gulp-sass。

Put var sass = require(‘gulp-sass’);under the line you required gulp.

把var sass = require('gulp-sass'); 在您需要的行下面。

构建项目 (Structuring your project)

Before you use the lines below, I am also assuming you know how to structure a web app. Here I am going to use the structure of common web apps.

在使用下面的代码行之前，我还假设您知道如何构建Web应用程序。 在这里，我将使用常见Web应用程序的结构。

编译sass / scss (Compiling sass/scss)

The last thing then is to instruct gulp what files it needs to convert and where the destination should be — where the output file will be stored.

然后，最后一件事是指示gulp需要转换哪些文件以及目标应该在哪里-输出文件将存储在哪里。

Use the following;

使用以下内容；

//compile gulp.task(‘sass’, function () { gulp.src(‘app/scss/app.scss’) .pipe(sass().on(‘error’, sass.logError)) .pipe(gulp.dest(‘app/css’)); });

The file in gulp.src will be converted, you can also select all .scss files in a directory by using “app/scss/*.scss”. This will select all your .scss files in the folder scss.

gulp.src中的文件将被转换，您也可以使用“app/scss/*.scss”选择目录中的所有.scss文件。 这将选择文件夹scss中的所有.scss文件。

The gulp.dest is the output. The output will be stored in the CSS folder inside the app folder.

gulp.dest是输出。 输出将存储在app文件夹内CSS文件夹中。

喝水 (Gulp-watch-sass)

Gulp has a watch syntax which allows it to monitor source files and then “watch” for changes made to your code. Just add the syntax to your gulpfile.js by typing:

Gulp具有监视语法，可以监视源文件，然后“监视”对代码所做的更改。 只需通过输入以下命令将语法添加到您的gulpfile.js中：

//compile and watch gulp.task(‘sass:watch’, function() { gulp.watch(‘app/scss/app.scss’, [‘sass’]);});

That’s pretty much everything you have to do! It wasn’t that stressful, or was it?

这几乎就是您要做的一切！ 压力不是那么大吗？

Thanks for reading!

谢谢阅读！

翻译自: https://www.freecodecamp.org/news/how-to-set-up-gulp-sass-using-the-command-line-if-youre-a-beginner-17729f53249/

gulp-sass