日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 >

gulp结构化实践

發布時間:2025/1/21 35 豆豆
生活随笔 收集整理的這篇文章主要介紹了 gulp结构化实践 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

gulp結構化是一個很大的問題,如果一直在Gulpfile.js上增加,大到一定程度上問題就來了

  • 可讀性差
  • 莫名其妙的bug
  • 測試難

有沒有比好的實踐呢?

pixi

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

這個一個非常出名的 HTML 5 2D rendering engine。做游戲和一些微信超炫應用是比較好的一個技術選型。

它自己吹的是“it's fast. Really fast”。

對于一個開發來說,一定要扒出點好東西才算合格。

它的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 subfolders requireDir('./gulp/tasks', { recurse: true });// default task gulp.task('default', ['jshint', 'build']);

代碼量很小,而且jshint和build根本沒看到,它是怎么加載進來的呢?

requireDir = require('require-dir');

是根據目錄加載的node模塊,和我常用的require-directory是一樣的功能。

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

這就很明顯了,看一下gulp目錄

? 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

可以說這是一個比較好的一個gulp實踐

mount-tasks

我根據上面pixi的做法,使用require-directory改了一個版本,沒幾行代碼,主要是實現了指定目錄,把里面的js加載成gulp 可用的 task。

Install

npm install --save mount-tasks

Usages

在Gulpfile.js里

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

在tasks目錄,我們放2個task,結構如下

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

此時,執行gulp,就可以出發clean和build任務了。

我們簡單看一下任務是如何定義的,是否足夠簡單

clean.js里代碼(build.js和這個類似)

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

是不是足夠簡單呢?

如果你對gulp不太了解,可以看看這篇文檔

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

全文完

歡迎關注我的公眾號【node全棧】

轉載于:https://my.oschina.net/nodeonly/blog/476208

總結

以上是生活随笔為你收集整理的gulp结构化实践的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。