让我告诉你我有什么以及我是如何做到的,也许这会有所帮助。
我的package.json
:
{
"dependencies": {
"gulp": "*",
"gulp-autoprefixer": "*",
"gulp-html-validator": "0.0.5",
"gulp-image-optimization": "^0.1.3",
"gulp-plumber": "*",
"gulp-rev-collector": "^0.1.4",
"gulp-rev-manifest-replace": "0.0.5",
"gulp-ruby-sass": "*",
"gulp-sass": "*",
"gulp-scss-lint": "^0.1.10",
"gulp-sourcemaps": "*",
"imagemin-optipng": "^4.2.0",
"imagemin-pngquant": "^4.0.0",
"vinyl-paths": "^1.0.0"
},
"devDependencies": {
"del": "^1.1.1",
"gulp-cached": "^1.0.4",
"gulp-concat": "^2.5.2",
"gulp-cssmin": "^0.1.6",
"gulp-filesize": "0.0.6",
"gulp-gzip": "^1.0.0",
"gulp-htmlhint": "0.0.9",
"gulp-htmlmin": "^1.1.1",
"gulp-if": "^1.2.5",
"gulp-imagemin": "^2.2.1",
"gulp-load-plugins": "^0.8.0",
"gulp-rename": "^1.2.0",
"gulp-rev": "^3.0.1",
"gulp-uglify": "^1.1.0",
"gulp-useref": "^1.1.1",
"gulp-webserver": "^0.9.0",
"run-sequence": "^1.0.2"
}
}
我如何运行gulp-load-plugins
:
'use strict';
var gulp = require('gulp'),
$ = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*'],
replaceString: /\bgulp[\-.]/,
lazy: true,
camelize: true
}),
这是一个插件的例子:
// html optimization
gulp.task('htmloptimize', function () {
return gulp.src(dev.html)
.pipe($.htmlmin({
collapseWhitespace: true
}))
.pipe(gulp.dest(dist.dist))
});
如您所见,我所有的管道都称为 .pipe($.plugin()) ,这意味着 $ 代表 gulp- 。如果你有一个名为 gulp-name-secondname 的插件,你可以这样称呼它: .pipe($.nameSecondname()) 。
最重要的是我需要 gulp-load-plugins 我已将 camelize 设置为 true 。延迟加载只加载您使用的插件,而不是全部。
小心 gulp-load-plugins 因为它会减慢你的任务,例如我运行 gulp-webserver ,当我将它与 gulp-load-plugins 一起使用时,如果我正常使用它,任务会在 200 毫秒后完成,而 20 毫秒。所以不要对所有东西都使用,玩它看看你在每项任务上损失了多少性能并确定优先级。