wedge
With the advent of Node, javascript is getting bigger and bigger and more and more things can be done.
In this article, we will talk about the front-end engineering build tool Gulp and customize the Gulp plug-in to meet your specific needs.
As the official word gulpjs.com/
Gulp is a toolkit to automate & enhance your workflow Leverage gulp and the flexibility of JavaScript to automate slow, repetitive workflows and compose them into efficient build pipelines.
Nonsense finish, next, are dry goods!
The first part project catalogue
Let’s break it down one by one:
package.json
Yanr install is used to install the required packages
a.html
a.js
Simply click the Login button and add a class to the Box element
The focus is on gulpfile.babel.js
Run the yarn buld
You will notice that a build folder appears under the project, which contains the contents of the gulp build. For example, the A. js file has been compressed to one line
Part two: Custom plug-ins
1. Gulp pipe
Pipe means pipe, and it’s easy to understand that files flow through pipe, so you can manipulate the file flow in the process and customize your own needs. All processing takes place in PIPE. For example, in the example above,
Let the SRC = [' static/CSS / * * / *. CSS ', / / * * says all levels of the directory, *.css represents all CSS files 'static/ CSS /**/*.scss', ] let stream = gulp.src(SRC) // Read file.pipe (sourcemaps.init()) // add sourcemap.pipe (Babel ()) // es6 to es5... .pipe(selfPlugin()) // Customize the plugin return streamCopy the code!!!!! Similarly, we can add our own gulp plugin to handle the file stream
2. Implement
Let’s start by implementing a very simple function, such as adding a comment this is JS to all JS files, adding a comment this is CSS to all CSS files, and adding this is other to all other types of files. The concrete implementation is as follows:
selfPlugin.js
Use 3.
Introducing our custom component in gulpfile.babel.js,
