"Nodejs+gulp+webpack Basic Combat" course Note (ii)--GULP speed to get started

Speed up, perform our first task

Gulp, one of the most popular tools in front-end development.

Let's start by creating a Package.jsonwen file in the project directory: running node under the project directory

NPM Init

Before installing gulp, let's take a look at the NPM instal-g command:

　　If you do not add-G, it will be installed in the current project directory. Plus-G will be installed in a global directory.

we can see what the global catalog is by using npm config get prefix . You can also use the NPM config set prefix "directory path" from the row settings.

　　In general, tool modules and tools that we want to use in any directory use the global installation.

OK, now let's install Gulp, install Gulp two ways,

1. NPM Install-g Gulp　

2, npm Install gulp--save-dev  //(in the current project also to be installed once, because we will have to require ("Gulp"). 

(--save-dev is the library you rely on when you develop,--save is the library you rely on after you publish)

After the installation is complete, our project directory will generate:

　　

　　This Gulp folder, Here's a note: If we delete this folder, executing NPM install,node in node will automatically fix the missing plugin for download.

OK, installation ends everywhere:

　　

　　We then create a configuration file to ensure that the gulp runs properly. Create a new file, named Gulpfile.js.

/* gulp.task (' Task Name ', function () {*  //do something here *  }); * */var gp = require ("gulp"); Gp.task ("Xiaozu",function() {    console.log ("I Am Gulp");});

Then open the terminal and execute the Gulp task name. It will automatically read your profile and perform your task

　　

　　After the project is done, files are kept "getting messy". We often encounter, teammates in the project directory under the random writing JS file. Well, as a project leader, often we want to "categorize" However, manually copy? You kidding me?

Let's go through some basic concepts,

　　GULP.SRC ([File 1, File 2, file 3]), used to "collect" the source file to form a "virtual file object Flow", and then through the "pipe" function pipe passed to it another write file function Dest.

　　Read the file on the command line and display it on the screen:

Under Windows [type filename], linux[cat file name]

　　Find the string and list the contents:

　　windows [findstr keyword filename] Linux [grep keyword filename]

if I want to query a file based on a keyword, then the two commands can be combined using a pipe. pipe symbol "|"

Windows Type file name | findstr keyword file name

Linux Cat file name | grep keyword file name

Focus: The use of pipes inside Gulp 　

GULP.SRC (["1.js", "2. js"].pipe (gulp.dest ("folder name")) gulp.src (["//!) is the meaning of the exclusion .

We mentioned above Gulpfile.js according to the following wording, the CSS, JS classification. Put it in the build folder

var gp = require ("gulp"); Gp.task ("Xiaozu",function() {    gp.src ([  ' *.js ', '!guplfile.hs ']). Pipe (Gp.dest ('./build/js '));    GP.SRC ([' *.css ']). Pipe (Gp.dest ('./build/css ');});

Executing the Gulp Task name in node, we can see that 2 categories are automatically generated in build.

　　

　　Of course, you don't have to worry, gulp just copy your matching files and not delete the original files.

　　

"Nodejs+gulp+webpack Basic Combat" course Note (ii)--GULP speed to get started