Gulp Getting Started

Source: Internet
Author: User
Tags glob globs

Gulp is a NODEJS-based automated task tool, similar to Ant in Java, combined with related plug-ins can be easily completed javascript/coffee/sass/less/html/image/css and other files such as testing, inspection, merging, compression, formatting, The browser automatically refreshes, deploys the file generation, and listens for files that repeat the specified steps after the change. Good use of the Nodejs stream and pipe, the first level of output directly to the back-level input, operation is very convenient. The main purpose of the front end is the following:
Gulp Api:task, SRC, dest, watchGulp.task (name[, Deps], FN) This method is used to define a gulp task. Name, cannot contain spaces deps the tasks that the task relies on, the order in which the dependent tasks are executed is consistent with the order declared in Deps, and the plug-in action called by the task FN
GULP.SRC (globs[, Options]) method is to specify the path of the source files that need to be processed, gulp borrowed from the UNIX operating system pipe (pipe) idea, the output of the previous level, directly into the back-level input, GULP.SRC return the current file stream to the available plug-in.
Globs the source file match path that needs to be processed the options have 3 properties buffer, read, base
Globs File Matching Description: "src/a.js": Specify a specific file;
"*": Match All Files Example: Src/*.js (contains all JS files under SRC);
"* *": matches 0 or more sub-folders example: Src/**/*.js (contains the SRC 0 or more subfolders under the JS file);
' {} ': Match multiple attribute examples: Src/{a,b}.js (contains A.js and b.js files) src/*. {Jpg,png,gif} (All jpg/png/gif files under SRC);
“!” : Exclude File Example:!src/a.js (does not contain src under the a.js file);
Three properties for options Description: Options.buffer: Type: Boolean default: True to False, returns File.content stream and does not buffer the file, very useful when processing large files; Options.read: type: Bo Olean Default: True sets False, the read file operation is not performed, NULL is returned, Options.base: type: String sets the output path to be stitched backwards based on some part of a path
Gulp.dest (path[, Options]) the Dest () method is to specify the path to the output of the file after processing; path Specifies the file output path, or the function returns a file output path or options have 2 properties CWD, mode
Gulp.watch (Glob [, opts], tasks) or Gulp.watch (Glob [, opts, CB]) the Watch () method is used to listen for file changes, and a modification of the file executes the specified task. Glob need to process the source file match path opts specific https://github.com/shama/gaze; tasks need to perform the name of the task array CB (event) Each file changes the execution of the callback functionwhenever a monitored file changes, the CB function is called, and it is passed to an object that contains some information about the changes to the file:Type: The property is of the variable types, can be added, changed, deleted path: property for the paths of the files that have changed
Common plugins for GulpGulp-uglify uses gulp-uglify to compress JavaScript files, reducing file size. Gulp-rename is used to rename files in the file stream. When writing to a file using the Gulp.dest () method, the file name is used in the file stream, and if you want to change the file name, you can use the Gulp-rename plugin to change the filename in the file stream. Gulp-minify-css compress a CSS file and add a version number to the reference URL to avoid caching: Gulp-htmlmin using Gulp-htmlmin compressed HTML, you can compress the page JavaScript, CSS, remove page spaces, comments, Delete extra attributes, and so on. Gulp-concat is used to combine multiple files into a single file, which we can use to merge JS or CSS files, which can reduce the number of HTTP requests on the page. Gulp-imagemin: Compress picture file Gulp-jshint: Tools to detect errors and potential problems in JavaScript code
Gulp's problems and flawsThe problem is difficult to locate, there is no way to run the Middle Debug,console.log () can not be a good location problem. Task serial execution is problematic.


From for notes (Wiz)

Gulp Getting Started

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.