How to compile sass using Gulp

How to compile sass Gulp is an automated tool that frontend developers can use to process common tasks:

1. Set up a web Server

2. automatically reload the browser when saving the file

3. Use preprocessors such as Sass and LESS

4. Optimize resources, such as compressing CSS, JavaScript, and images

Of course, Gulp can do more than that. If you are crazy enough, you can even use it to build a Static Page Generator. Gulp is really powerful enough, but you must learn to control it.

This is the main purpose of this Article. It helps you understand the basic usage of Gulp and help you complete the great success of the whole world as soon as possible.

What we will do

At the end of this article, you will have a simple workflow:

Compile Sass

In addition, you will also learn to use simple command chain to call multiple tasks.

Install Gulp

Install Node. js before installing Gulp.

If you have not installed Node, you can download it here.

After installing Node. js, Use Terminal (cmd in win) and the following command to install Gulp

$ Sudo npm install gulp-g

Only mac users need The sudo command and do not copy the $ symbol. This is not your dish.

Npm install is a command that specifies the installation from Node Package Manager (npm you are afraid of Mao.

-G indicates global installation, so that you can only use the gulp command anywhere on your computer.

Mac users require administrator privileges to install the service globally, so sudo is required.

Next, use Gulp to create a project.

Create a Gulp Project

First, create a project folder and run the npm init command in the directory:

$ Npm init

The npm init command will create a package. json file for you, which stores information about this project. For example, the various dependencies you use (mainly plug-ins here) (The following content is automatically displayed in the plugin, which can be left blank first)