Home PC Games Linux Windows Database Network Programming Server Mobile  
  Home \ Programming \ It is time to upgrade your gulp 4.0     - Analysis of Java exception (Programming)

- How to query the role of Linux services (Linux)

- Linux server dual-card dual-IP and single-card dual-IP configuration method (ReHat / CentOS) (Server)

- The Linux OOM Terminator (Server)

- The ORA-01113 error is handled with BBED without archiving (Database)

- Linux uses shared memory communication process synchronization Withdrawal (Programming)

- Oracle ordinary users show parameter method (Database)

- Ten SCP transfer command example (Linux)

- REDO LOG records management (Database)

- Android custom ViewPager create kaleidoscopic image transition effects (Programming)

- How to use the character in C ++ without pressing the Enter key to enter the Show (Programming)

- HTML5 Application Cache (Programming)

- Linux formatted partition error Could not stat / dev / sda No such file or directory Solution (Linux)

- After you change the GRUB boot disk partition repair (Linux)

- CentOS 6.5 / Linux restart network card being given Determining if ip address x.x.x.x is already in use (Linux)

- How to install Go1.5 source development environment on Mac (Server)

- Python objects (Programming)

- CentOS 7.0 Enable iptables firewall (Linux)

- Modular JavaScript (Programming)

- Three minutes to teach you to easily grasp the grep command regular expression (Linux)

  It is time to upgrade your gulp 4.0
  Add Date : 2018-11-21      
  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 () {


// 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 () {


gulp. src ( './src/*.js')

. Pipe (uglify ())

. Pipe (gulp. Dest ( './dist/js'))


. Gulp task (compile);

Equivalent to

gulp. task ( 'compile', function () {


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.


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 (


gulp. parallel (

gulp. series (













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.
- ASP.NET 5 tutorial series (Server)
- MogileFS system installation configuration example (Server)
- Get basic information about Linux server script (Server)
- Openfire Hazelcast cluster Detailed (Server)
- C # C ++ Java interface type conversion (Programming)
- Github with .gitignore ignore specified file (Linux)
- Android WebView use layman (Programming)
- Troubleshooting Linux virtual machine device id and the letter of inconsistencies (Linux)
- Job achieve automation in Ubuntu 14.04 - Using Cron (Linux)
- Sorting Algorithm (1) Quick Sort C ++ implementation (Programming)
- Linux user opens a number of adjustment processes (Linux)
- Ubuntu 15.04 install Complete Guide (Linux)
- Xtrabackup creates a slave node without downtime (Database)
- PF_RING 6.0.2 compiled and installed on Redhat 6.3 x86_64 (Linux)
- Linux script to copy the folder to all folders with the same name (Linux)
- Ceph distributed storage system is installed on a CentOS 7.1 (Server)
- How to Install Sticky Notes on Ubuntu and Derivatives (Linux)
- Acting on JavaScript events (Programming)
- Ubuntu 10.04 to Ubuntu 10.10 Upgrade (Linux)
- How to use Git to upload code to GitHub project (Linux)
  CopyRight 2002-2020 newfreesoft.com, All Rights Reserved.