How Gulp compiles sass

Gulp is an automation tool that front-end developers can use to handle common tasks:

1. Build a web server

2. Automatically reload the browser when saving files

3. Use preprocessors such as Sass, LESS

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

Of course, Gulp can do much more than that. If you're crazy enough, you can even use it to build a static page generator. Gulp is really powerful, but you have to learn to harness it.

This is the main purpose of this article. Help you understand the basic usage of Gulp and help you accomplish your great goal of unifying the world as soon as possible.

What we are going to 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 chains to call multiple tasks .

Install Gulp

You need to install Node.js before installing Gulp.

If you haven’t installed Node yet, you can download it here.

After installing Node.js, use Terminal (terminal, cmd under win) to install Gulp with the following command

$ sudo npm install gulp -g

Only mac users need the sudo command, and do not put the $ sign Copy it too, this is not your cup of tea.

npm install is a command specified to install from the Node Package Manager (npm you are afraid of hair).

-g means global installation, so you can only use the gulp command anywhere on your computer.

Mac users need administrator rights to install globally, so sudo is required.

Next, use Gulp to create the project.

Create a Gulp project

First, we create a new project folder and execute the npm init command in this directory:

$ npm init

The npm init command will create a package.json file for you, this The file holds information related to this project. For example, the various dependencies you use (mainly plug-ins here) (the following content will automatically appear in the terminal, just fill it in casually here)

After creation, we execute the following command:

$ npm install gulp - -save-dev

This time, we install Gulp partially. Using --save-dev will notify the computer to add gulp dependencies in package.json.

The directory structure is as follows

In this structure, we use the app folder as the development directory (all source files are placed under this), and the dist folder is used to store the content in the production environment.

You can name these files however you want, but please be sure to remember your directory structure. Now let's create gulpfile.js and enter it as follows.

Next, install the gulp-sass plug-in to compile the sass file.

1. Enter the command line under the app:

　　$ npm install gulp-sass --save-dev

The package.json file will be automatically updated at this time Dependency package!
2. Introduce the plug-in into gulpfile.js

3. Tell gulp the task to be performed, the task task in gulpfile.js

At this time, the command line is executed

will automatically compile and generate all css in dist/css/