Gulp Getting Started

1. Introduction

Gulp.js is an automated build tool that developers can use to automate common tasks in project development. Gulp.js is built on node. JS and leverages the power of the node. JS stream to quickly build projects and reduce frequent IO operations.

Gulp.js source files and the Gulp files you use to define tasks are implemented through JavaScript (or coffeescript) source code.

2. Preparation of knowledge

(1). command-Line Operations

Open command line: window+r input cmd Enter
CD Location to Directory
Cd.. Navigate to Upper Directory
DIR lists the list of files
The CLS empties the command Prompt window contents.

(2). NPM Module Manager

Installing the plugin with NPM: npm install <name> [-g] [--save-dev]
<name>: Node plugin name
-G: Global installation, will be installed in C:\USERS\ADMINISTRATOR\APPDATA\ROAMING\NPM, and write system environment variables;
A non-global installation will be installed in the current location directory.
The global installation can be called from anywhere via the command line, and the local installation will be installed in the Node_modules folder of the locating directory, via require ().
--save: will keep configuration information to Package.json (Package.json is Nodejs Project profile)
-dev: Save to Package.json devdependencies node, do not specify-dev will be saved to dependencies node.

Using NPM Uninstall plugin: NPM uninstall <name> [-G] [--save-dev]
Note: Do not delete the local plug-in package directly

Using NPM Update plugin: NPM update <name> [-G] [--save-dev]

Update all plugins: NPM Update [--save-dev]

View NPM Help: NPM

View current directory installed plugins: NPM list

To see if the installation is correct: View the current plug-in version number

Initialize to generate a new PACKAGE.JSON:NPM init

(3). Package.json

At the root of each project, there is typically a Package.json file that defines the various modules required for this project and the configuration information for the project.
The NPM install command automatically downloads the required modules based on this configuration file, which is the run and development environment required to configure the project.

Some fields:
Scripts: Specifies the NPM named line abbreviation that runs the script command
Dependencies: Specifies the module on which the project runs
Devdependencies: Specify the modules required for project development
Peerdependencies: Used for plug-ins to specify the version of the Master software they need
Main: Specifies the Getting Started file when the module is loaded, default is the module root directory of Index.js

(4). gulpfile.js

The configuration file for the Gulp project, located in the root directory of the project.

Api:

GULP.SRC (globs[, Options]) ———— Specify the path to the source file to be processed, returning the current file stream to the available plug-in
Globs: Source file match path to be processed, type: String/array
*--Match all files
* *--match 0 or more subfolders
{}--match multiple attributes
! --Exclude files
Options: Type: Object
Options.buffer--The default is true, set to False, will return the stream of file.content and does not cache the file, it is very useful to handle large files;
Options.read--The default is true, set to False, the read file operation is not performed, and Null is returned;
Options.base-Set the output path strength, with a certain part of the road to the basis of the backward stitching;

Gulp.dest (path[, Options]) ————— Specify the output path of the file after processing
Path: File output path, or define function return file output path also
Options: Type: Object
OPTIONS.CWD--Default: PROCESS.CWD (): The path of the working directory of the pre-script, only valid when the given output directory is relative to the path;
Options.mode--Default: 0777, specify permissions for the folder being created

Gulp.task (name[, Deps], FN) ———— define a gulp task
Name: task names, cannot have spaces;
Deps: Tasks that the task relies on
fn: Plug-in action called by the task

Gulp.watch (Glob [, opts], tasks) or Gulp.watch (Glob [, opts, CB]) ———— used to listen for file changes, the file has been modified to perform the specified task
Glob--The source file match path to be processed;
OPTs-- gaze parameters passed to
Tasks-an array of names for the task that needs to be performed
CB (Event)--callback function for each file change execution

3. Steps to use

　　　　

4. Description

(1). Global installation and Local installation:
In order to perform the Gulp task at global installation, Gulp is installed locally to invoke the functionality of the Gulp plug-in.

(2). cnpm
NPM installation plugin is downloaded from foreign servers, affected by the network, may be abnormal, you can install CNPM to solve this problem.
Official website: http://npm.taobao.org
Installation: NPM Install cnpm-g--registry=https://registry.npm.taobao.org
Note: The CNPM and NPM usages are exactly the same, except that NPM is changed to CNPM when the command is executed.

5. Summary

This essay, I follow my own ideas on the study of the article has been re-assembled, but also just a primer; To PACKAGE.JSON,NPM do not understand the circumstances of the want to learn, the results are very difficult to learn, after the first to understand the relevant knowledge, learning is also the case.

Reference article: Http://www.ydcss.com/archives/18#lesson8

Gulp Getting Started