| |
With the advance of the front-end engineering, I believe that more and more projects use both automated build. Construction on the front end, the most used way to grunt and gulp.
Protagonist of this article is to gulp, so I spent one or two words to introduce gulp or necessary.
gulp is a stream-based build tool tip, since the use of the underlying stream, multiple tasks can be seamlessly strung together, compared to the use of temporary files grunt a lot faster; also do not like to write a lot of grunt as profile, each task can be fully programmable control logic.
gulp than grunt "fast" It is an accepted fact, there is not much difference between the two compare, then again, it is different.
gulp change 4.0
Pull over nonsense, began to enter the topic.
gulp team in about two months prior to the submission of the 4.0 branch, the new version brings new api, api new to the task flow control to bring the "revolutionary" progress.
But the new version does not submit to npm, may now even alpha are not really of it, but still you can start with experience.
Installation gulp 4.0
Want to experience only through github 4.0 installation, perform the following two commands used to smooth cool a gulp 4.0 locally.
npm install gulpjs / gulp # 4.0 -g
npm install gulpjs / gulp # 4.0 --save-dev
gulp 4.0 relative to the previous version there were many changes
Use the new mission system bach, it replaced the old version of the orchestrator
You might be faster? In fact gulp has been very fast, unless it is very large project, otherwise little fear gulp Construction would take too much time, but seeking faster is always good.
Remove the three-parameter passed gulp.task Usage
That such usage will report an error
gulp. task ( 'watch', [ 'default'], function () {
// TODO
// Watch file
});
Before gulp4.0, this usage will ensure that default task before executing the task and then perform watch, gulp task flow control is implemented so, but this is one of the weaknesses of the old version gulp.
For those of us ordinary users, the biggest change has two
The change gulp.task
gulp official suggested:
When we wanted to in the command line to perform a task by knocking gulp taskname way, this time you should use gulp.task registered taskName
When a more complex tasks (such as dist) a combination of a lot of sub-tasks from the sub-tasks using a named function can be, without a separate registration for each sub-task, and you simply use gulp.task dist register before the version you must first use of each sub-task gulp.task to register, and then combine the dist, detailed usage see the last example.
gulp.task added a usage that is passed as a parameter to a function named, it will be automatically registered in the name of the function named Tasks
function compile () {
// TODO
gulp. src ( './src/*.js')
. Pipe (uglify ())
. Pipe (gulp. Dest ( './dist/js'))
}
. Gulp task (compile);
Equivalent to
gulp. task ( 'compile', function () {
// TODO
gulp. src ( './src/*.js')
. Pipe (uglify ())
. Pipe (gulp. Dest ( './dist/js'))
});
Both can be run from the command line to perform tasks gulp compile
Increased gulp.series and gulp.parallel
Haha, the PLA came.
If you are a deep gulp user, you have more than once been Tucao gulp task process is difficult to control, like a complicated circuit like the circuit a lot of series resistors are added in parallel connected together, gulp a complicated task equally but also by a number of sub-tasks in series (synchronous) plus parallel (asynchronous) way to connect together.
Old versions gulp of multiple asynchronous tasks difficult to control, must resort to third-party modules, such as run-sequence, event-stream, the effect is not ideal.
Now gulp brings two new api: gulp.series and gulp.parallel, two revolutionary api will help developers fix annoying task flow control problems.
Here's to the new api experience the magic of it.
example
In the development of the most common tasks dist example, the use gulp must first break down tasks, dist roughly broken down into the following sub-tasks
Remove development directory dev, clean-dev
Remove distribution directory dist, clean-dist
Graph and edit css reference pictures, sprite
Precompiled css (such as sass) to dev, compile-css
Precompiled js to dev, compile-js
Html to copy from src dev, copy-html
On the following dev js / css be md5, then copied to dist, reversion
Replace dev under the html js / css file path md5 been after, and copied to dist, replcae
This is just an ordinary dist task, I would dist demolition was relatively small and routine tasks omitted compression mergers, roughly from the above 8 steps.
Demolition granularity entirely by their own control, to facilitate reuse and ease of understanding of the purpose of the line.
Older versions of gulp, you first need to register for each task, here only to illustrate the problem, I've omitted the code specific tasks.
. Gulp task ( 'clean-dev', function () {// TODO});
. Gulp task ( 'clean-dist', function () {// TODO});
. Gulp task ( 'sprite', function () {// TODO});
. Gulp task ( 'compile-css', function () {// TODO});
. Gulp task ( 'compile-js', function () {// TODO});
. Gulp task ( 'copy-html', function () {// TODO});
. Gulp task ( 'reversion', function () {// TODO});
. Gulp task ( 'replcae', function () {// TODO});
We then patted task process, in order to allow more efficient task execution, try to ensure that all can be executed simultaneously performed while here simply draw a flow chart showing the flow of the task, the arrow indicates the order.
The presence of both synchronous and asynchronous tasks exist, need to implement such a process, we need to modify and register additional several tasks, and with the run-sequence and other third-party modules.
. Gulp task ( 'compile-css', [ 'sprite']);
gulp. task ( 'dev', [ 'clean-dev'], function () {
runSecquence ([ 'compile-css', 'compile-js', 'copy-html']);
});
gulp. task ( 'md5', [ 'dev', 'clean-dist'], function () {
runSecquence ( 'reversion');
});
gulp. task ( 'dist', [ 'md5'], function () {
runSecquence ( 'replcae');
});
gulp official recommendation would minimize the task, each task only one thing clear, you can see the task of dismantling the more detailed the more tasks need to be registered, in order to handle both synchronous and step involves tasks that require the introduction of additional intermediate task to join in the code is not natural.
If gulp 4.0, so only on the line
function cleanDev () {// TODO}
function cleanDist () {// TODO}
function sprite () {// TODO}
function compileCss () {// TODO}
function compileJs () {// TODO}
function copyHtml () {// TODO}
function reversion () {// TODO}
function replcae () {// TODO}
gulp. task ( 'dist', gulp. series (
gulp. parallel (
gulp. series (
cleanDev,
gulp. parallel (
gulp. series (
sprite,
compileCss
),
compileJs,
copyHtml
)
),
cleanDist
),
reversion,
replcae
));
gulp.series and gulp.parallel can accept gulp.task registered name of the task is altogether a (multiple) functions, eliminating a lot gulp.task code, but also to achieve the purpose of the task multiplexed, will subtasks through different combinations and can generate a new task.
Conjunction with the flowchart, the above code is well understood.
Also to say that, as long as the three parameters passed gulpfile.js in gulp.task usage is not used, gulp 4.0 is compatible with older versions of gulpfile.js. |
|
|
|