What you need to know to get started with gulp

This time I will bring you what you need to know to get started with gulp and what you need to know when using gulp. What are the precautions?. Here are practical cases. Let’s take a look.

1. Install gulp globally
1. Description: The purpose of installing gulp globally is to perform gulp tasks through her;
2. Installation: Command prompt execution

npm install gulp -g

3. Check whether it is installed correctly: Execute

gulp -v

at the command prompt. If the version number appears, it means it is installed correctly.
2. Install gulp in the project

npm install --save-dev gulp

-Note: Installing gulp globally is to perform gulp tasks, and installing gulp locally is to Call the function of the gulp plug-in.
3. Install a certain module of gulp (take gulp-less as an example, compile the less file)

npm install gulp-less --save-dev

4. Create a new package.json file

npm init

Fill in the project information according to the prompts.
5. Create a new gulpfile.js file in the project root directory. gulpfile.js is the configuration file of the gulp project. It is an ordinary js file located in the project root directory (in fact, put gulpfile.js into other folder), the file example is as follows:

//导入工具包 require('node_modules里对应模块')var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');//定义一个testLess任务（自定义任务名称）gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css});

gulp.task('default',['testLess', 'elseTask']); //Define the default task elseTask as other tasks, this example does not Define elseTask task //gulp.task(name[, deps], fn) Define task name: task name deps: dependent task name fn: Callback function//gulp.src(globs[, options]) Files processed by execution tasks globs: processed file path (string or string array) //gulp.dest(path[, options]) File generation path after processing

6. Optional installation cnpm
1. Note: Because the npm installation plug-in is downloaded from a foreign server, it is greatly affected by the network and may cause abnormalities. It would be great if the npm server was in China, so the Taobao team we are happy to share did this. From the official website: "This is a complete npmjs.org mirror. You can use this instead of the official version (read-only). The synchronization frequency is currently once every 10 minutes to ensure that it is as synchronized with the official service as possible.";
2. Official website: http://npm.taobao.org;
3. Installation: Command prompt to execute npm install cnpm -g --registry=https://registry.npm.taobao.org
; Note: After installation, it is best to check the version number cnpm -v or close the command prompt and reopen it. If you use it directly after installation, errors may occur;
Note: The usage of cnpm is exactly the same as npm, only when executing the command Change npm to cnpm

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to implement node connection to mysql

JS regular expressionHow to use

The above is the detailed content of What you need to know to get started with gulp. For more information, please follow other related articles on the PHP Chinese website!