Gulp入门套件，配有gulp-load-plugins

作者: 仙风道骨刘憨憨
发布时间: 2022-03-08 02:55:39 (2年前)
转自：

4 条回复

0#
回复此人
咿呀哟 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我用过 <code> gulp-load-plugins </code> 但发现它主要增加了复杂性并掩盖了我的代码。对于不那么熟悉Gulp的人来说，也很难理解。将所有模块显式声明在顶部，看起来更清晰，更容易理解。 </p> </DIV>

编辑
1#
回复此人
不浪漫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 如果每个插件都有一个单独的文件，为什么不使用gulp-load-plugins？ </p> </DIV>

编辑
2#
回复此人
十二* | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这是我加载gulp-load-plugins的方式： </p> <pre> <code> $ = require('gulp-load-plugins')({ pattern: ['gulp-*', 'gulp.*'], replaceString: /\bgulp[\-.]/, lazy: true, camelize: true }), </code> </pre> <P> 以下是修订插件的示例： </p> <pre> <code> // revision styles gulp.task('rev-styles', function () { return gulp.src(dev.css) .pipe($.rev()) .pipe($.cssmin()) .pipe(gulp.dest(dist.css)) .pipe($.filesize()) .pipe($.rev.manifest({merge: true})) .pipe(gulp.dest('./')) //rev replace .on('end', function() { return gulp.src(['./rev-manifest.json', 'dist/*.html']) .pipe($.revCollector({ replaceReved: true, dirReplacements: { 'css': 'css' } })) .pipe(gulp.dest(dist.dist)) }); }); </code> </pre> <P> 如你所见，我的所有管道都被调用了 <code> .pipe($.pluginName()) </code> 意思是$代表gulp-。如果你有一个名为gulp-name-secondname的插件，你可以像这样调用它： <code> .pipe($.nameSecondname()) </code> 。 <BR/> <BR/> 顶部是我需要gulp-load-plugins我将camelize设置为true。延迟加载仅加载您使用的插件而不是所有插件。 <BR/> <BR/> 作为旁注，我强烈建议不要在不同文件中分离插件，但可以对它们进行调制，这意味着将重要任务分离到单独的文件中，如编译文件，优化文件，构建文件等。 <BR/> </p> <P> 这可能有助于您更好地理解gulp文件分离 <a href="http://macr.ae/article/splitting-gulpfile-multiple-files.html" rel="nofollow"> http://macr.ae/article/splitting-gulpfile-multiple-files.html </A> <BR/> <BR/> </p> <P> 小心gulp-load-plugins，因为它会减慢你的任务，例如我运行gulp-webserver，当我使用gulp-load-plugins时，任务在200ms后完成，而如果我正常使用它则需要20ms。因此，不要使用所有内容，玩它看看你在每个任务上失去了多少性能并确定优先级。 </p> </DIV>

编辑

登录后才能参与评论