Gulp Structured Practice

Gulp structure is a big problem, if it has been increased on the gulpfile.js, the problem comes to a certain extent

• Poor readability
• A baffling bug.
• Difficult to test

Is there any better practice?

Pixi

Https://github.com/GoodBoyDigital/pixi.js

This is a very well-known HTML 5 2D rendering engine. Playing games and some of the most amazing applications is a good technology selection.

It itself blows "it's fast." Really fast ".

For a development, be sure to pick out a bit of good things to qualify.

It's gulpfile.js

var gulp        = require(‘gulp‘),    requireDir  = require(‘require-dir‘);// Specify game project paths for tasks.global.paths = {    src: ‘./src‘,    out: ‘./bin‘,    get scripts() { return this.src + ‘/**/*.js‘; },    get jsEntry() { return this.src + ‘/index‘; }};// Require all tasks in gulp/tasks, including subfoldersrequireDir(‘./gulp/tasks‘, { recurse: true });// default taskgulp.task(‘default‘, [‘jshint‘, ‘build‘]);

The code is small, and jshint and build don't see it, how does it load in?

requireDir  = require(‘require-dir‘);

is the node module loaded according to the directory, and I often use the require-directory same function.

requireDir(‘./gulp/tasks‘, { recurse: true });

It's obvious, look at the Gulp directory.

?  gulp git:(master) tree ..├── tasks│   ├── build.js│   ├── clean.js│   ├── dev.js│   ├── jsdoc.js│   ├── jshint.js│   ├── scripts.js│   └── watch.js└── util    ├── bundle.js    ├── handleErrors.js    ├── jsdoc.conf.json    └── karma.conf.js2 directories, 11 files

It can be said that this is a relatively good practice of a gulp

Mount-tasks

According to the above Pixi, I used to require-directory change a version, not a few lines of code, mainly to implement the specified directory, the inside of the JS loaded into the Gulp available task.

Install

npm install --save mount-tasks

Usages

In the gulpfile.js.

var gulp        = require(‘gulp‘);// Require all tasks in vendor/tasks, including subfoldersrequire(‘mount-tasks‘)(__dirname + ‘/tasks‘)// default taskgulp.task(‘default‘, [‘clean‘, ‘build‘]);

In the tasks directory, we put 2 tasks, which are structured as follows

?  mount-tasks git:(master) tree taskstasks├── build.js└── clean.js0 directories, 2 files

At this point, you can start the clean and build tasks by executing gulp.

Let's take a quick look at how the task is defined and whether it's simple enough

Clean.js code (Build.js and the like)

var gulp    = require(‘gulp‘);gulp.task(‘clean‘, function () {  console.log(‘clean‘);});

Isn't it simple enough?

If you don't know much about gulp, you can look at this document

Https://github.com/streakq/js-tools-best-practice/blob/master/doc/Gulp.md

End of full text

Welcome to my public number "node full stack"

Gulp Structured Practice