Steps to compile Sass using Gulp

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

1. Build a Web server

2. Automatically reload browser when file is saved

3, using the preprocessor such as sass, less

4, optimize resources, such as compression CSS, JavaScript, compressed pictures

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

This is the main purpose of this article. Help you understand the basic use of gulp, help you to complete the eminence of the cause of the early.

What we're going to do

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

• Compiling sass

In addition, you will also learn to use simple command chaining to invoke multiple tasks.

Installing 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, win is cmd) to install Gulp with the following command

$ sudo npm

Only Mac users need the sudo command, and don't copy the $ symbol into it, it's not your dish.

npm installis to specify the command to install from node package Manager (NPM you are afraid of hair).

-gRepresents a global installation so that you can use only the Gulp command from anywhere on your computer.

MAC users need administrator privileges to install globally, so sudo is required.

Next, create the project using Gulp.

Create a Gulp Project

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

$ NPM Init

The NPM init command creates a Package.json file for you, which holds information about the project. For example, you use a variety of dependencies (this is mainly plug-ins) (the terminal will automatically appear below the content, here first fill the line)

Once created, we execute the following command:

$ npm

This time, we installed the gulp locally. Using-save-dev, notifies 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 the source files are placed below), and the Dist folder is used to store the content in the production environment.

These are the file names, you can do whatever you want, but be sure to remember your directory structure. Now let's create the Gulpfile.js and enter the following.

Below to install the Gulp-sass plugin to compile the sass file,

1, the app under the command line input:

$ npm Install gulp-sass --save-dev

The Package.json file automatically updates the dependent package at this time!
2, introduce the plug-in within the Gulpfile.js

3. Inform gulp of the tasks to be performed, task tasks in Gulpfile.js

At this point the command line executes

Gulp Sass

will generate all the CSS in dist/css/auto-compile