我正在学习 johnpapa 的 Gulp 自动化类(class),但似乎遇到了奇怪的障碍:当我尝试运行 CSS 和 JS 连接和缩小任务时,它无法进行缩小。
这是任务:
gulp.task('optimize', ['inject'], function () {
var assets = $.useref.assets({searchPath: ''});
var cssFilter = $.filter(['**/*.css'], {restore: true});
var jsFilter = $.filter(['**/*.js'], {restore: true});
return gulp
.src(config.indexFile)
.pipe($.rename('test.jsp'))
.pipe($.plumber())
.pipe(assets)
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore)
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore)
.pipe(assets.restore())
.pipe($.useref())
.pipe(gulp.dest(config.indexLocation))
;
});
inject
是将 css 和 js 引用注入(inject)索引文件的任务(正常工作),$
是 require('gulp-load-plugins' )({lazy: true})
和 config.indexFile
是 index.jsp
。
我的文件结构(与类(class)中的不同)是:
- ModuleDir
- dist
- css
- lib.css
- app.css
- fonts
- images
- js
- lib.js
- app.js
- css
- js
- web-app
- InnerDir
- index.jsp
- test.jsp
- package.json, bower.json, etc. (all the required files)
基本上,index.jsp 是针对 CSS 和 JS 库和应用程序 Assets 进行处理的,它们被缩小并连接成 lib.css、lib.js、app.css 和 app.js。之后所有这些都被注入(inject)到名为 test.jsp 的 index.jsp 副本中。
Assets 收集、串联和注入(inject)工作出色。缩小 - 没那么多......
任何想法或指示将不胜感激。
最佳答案
仅供引用 userref 也随着 v3.0 发生了变化。
这是我使用最新版本的 gulp-filters 和 gulp-useref 编写的代码。对于学习 JP 的 gulp 类(class)的任何人来说可能都很方便...
gulp.task('optimise', ['inject', 'fonts', 'images'], function() {
log('Optimising the JavaScript, CSS, HTML');
// $.useref looks for <!-- build:js js/app.js --> in index.html and compiles until <!-- endbuild -->
var templateCache = config.temp + config.templateCache.file;
var cssFilter = $.filter('**/*.css', {restore: true});
var jsFilter = $.filter('**/*.js', {restore: true});
return gulp
.src(config.index)
.pipe($.plumber())
.pipe($.inject(gulp.src(templateCache, {read: false}), {
starttag: '<!-- inject:templates:js -->'
}))
.pipe($.useref({searchPath: './'}))
.pipe(cssFilter)
.pipe($.csso())
.pipe(cssFilter.restore)
.pipe(jsFilter)
.pipe($.uglify())
.pipe(jsFilter.restore)
.pipe(gulp.dest(config.build));
});
注意:我还更正了函数名称中“optimise”的拼写,因为我是英语:)
关于javascript - CSS 和 JS 缩小不适用于 gulp-filter、gulp-csso、gulp-uglify,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32615542/