Gulp Basic Usage

Hello, little friends, everyone Friday good, again to the week's most most looking forward to Friday ~ ~ ~

These days have been studying the use of gulp, take time today to tidy up the basic steps.

Gulp Use Flow: Install Nodejs, install git (easy to bring up command window, optional), global installation, Gulp, Project installation Gulp and Gulp plug-in configuration Gulpfile.js-run tasks

1.gulp is a node-based tool, so you must install node. js before using Gulp, the installation steps are simple, download a node installation package from the Web, install it step-by-step, and my installation package is the Node-v4.4.4-x64.msi version.

2. In order to invoke the command window conveniently, we install Git,git on the local installation is also very simple oh, download a git install package from the Internet, step by step to install, my installation package is Git-2.7.2-64-bit_setup.exe.

3. Next is the global installation Gulp, the global installation means that the whole computer, there is gulp environment, the global installation is installed in the command window, then, casually right click on the desktop, click Gitbash, enter the command NPM Install Gulp and then return to the global installation gulp.

。

4 Start the project creation,

4.1 First create an English folder, such as project folder, open folder, right click in the blank of the folder, appear gitbash--> Click Gitbash, bring up the command window, enter the name:NPM init Enter, this time, Careful you will find that a Package.json file appears in the project folder.

4.2 and then installed in the Project Gulp, the general situation, some people do not reflect the local installation, however, personal advice, the local installation of Gulp or more reliable, haha. In the Command window, enter the command: NPM Install gulp--save-dev Enter

At this point, you will find that in the project folder, more than one Node_modules folder, and then, all the plug-in installation, will be installed in the Node_modules folder. Install plug-ins are executed in the command, such as installing the Replace plugin, enter the command: NPM install Gulp-replace Enter,. such as installing SAAS:NPM install Gulp-ruby-sass --save-dev.

4.3 In the project root directory, create the SRC folder, the src folder is placed into the HTML page, create the Dist folder, dist folder for the automatic generation of HTML pages.

4.4 Create the Gulpfile.js file under the project root directory, all the following JS will be uninstalled in the Gulpfile.js file.

4.5 command var gulp = require ("Gulp"); Get the Gulp module and get the other module methods again. For example, var replace = require ("Gulp-replace") gets the replacement module;

Several methods of 4.6gulp:

. pipe ()//workflow, Write Gulp method in parentheses or other plug-in method or JS code, Gulp.task ()//Create task, GULP.SRC ()//Get compliant file, Gulp.dest ()//Output compliant file,. PIPE (Uglify ( )/////Enable JS compression in the workflow, use other plug-ins to work the same way, note that many plug-ins need to be set up with parameter code examples: Gulp.task ("TaskName", ["taskname1", "Taskname2"],function () { Return gulp.src ("/app/css/**/*.css", {base: "App"}). Pipe (Uglify ()). Pipe (Gulp.dest ("/dist")}); Again, for example:

var gulp = require ("Gulp");
var replace = require ("Gulp-replace");

Gulp.task ("LyX", function () {
Gulp.src ("./src/html/**/*.html")
. Pipe (replace (/<title>.*?<\/title>/gi, "<title> Liu Yuxi website </title>"))
. Pipe (replace (/tppabs\s?=\s?[' "). *? ["']/gi, '")]
. Pipe (Gulp.dest ("./dist/html/"));
});

5. Start running the Gulp project, enter the command: Gulp LyX, where LyX is the task name created in the previous column.

6. When transferring and copying items, simply copy the Gulpfile.js, Package.json, and project files in the past, no need to copy the Node_modules folder, copy to the target folder, right click the root folder, enable command tools, such as git, input command: NPM Install, the plugins in the Node_modules folder are automatically installed according to the installation directory in Package.json.

Well, to this, I think we should have a general understanding of gulp, the above is what I have summed up these days, I hope to help you.

  

Gulp Basic Usage