我可以使用一些帮助，只将引用的 css 包含到我的生产文件夹中。由于“**/*.css”，我的 bower_components 文件夹中的所有 css 文件都包含在内。有更好的方法吗？我的 index.html 中引用了所有必要的 CSS。
我的 gulp 文件如下所示:
var gulp = require('gulp'),
durandal = require('gulp-durandal');
var dest = '../production';
gulp.task('durandal', function() {
return durandal({
almond: true,
minify: true
}).pipe(gulp.dest(dest + '/app'));
});
gulp.task('statics', function() {
return gulp.src(['**/*.png', '**/*.css', '**/*.ttf', '**/*.woff', 'index.html', '**/require.js', '!./node_modules/**'])
.pipe(gulp.dest(dest));
});
gulp.task('build-simple', ['durandal', 'statics']);
感谢您的帮助。
更新:解决方案
var gulp = require('gulp'),
durandal = require('gulp-durandal'),
del = require('del'),
useref = require('gulp-useref'),
flatten = require('gulp-flatten');
var assets = useref.assets();
var dest = '../dist';
gulp.task('clean', function(cb) {
del(['../dist/*'], {
force: true
});
});
gulp.task('durandal', function() {
return durandal({
almond: true,
minify: true
}).pipe(gulp.dest(dest + '/app'));
});
gulp.task('assets', function() {
return gulp.src('index.html').pipe(assets).pipe(assets.restore()).pipe(useref()).pipe(gulp.dest(dest));
});
gulp.task('fonts', function() {
return gulp.src(['**/*.ttf', '**/*.woff', ]).pipe(flatten()).pipe(gulp.dest(dest + '/fonts'));
});
gulp.task('statics', function() {
return gulp.src(['**/*.png', '**/require.js', '!./node_modules/**']).pipe(gulp.dest(dest));
});
gulp.task('production', ['durandal', 'statics', 'assets', 'fonts']);
最佳答案
gulp-useref应该是适合您的工具，它甚至已经连接了引用的文件:
var gulp = require('gulp');
var useref = require('gulp-useref');
var assets = useref.assets();
gulp.task('assets', function() {
return gulp.src('app/index.html')
.pipe(assets)
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest('dist'));
})
你只需要在你的html文件中做一些注释:
<!doctype html>
<html>
<head>
<!-- build:css css/combined.css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<!-- endbuild -->
</head>
<body>
<!-- build:css js/combined.js -->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild -->
</body>
</html>
关于css - 如何使用 gulp 仅将引用的 .css 复制到目标？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29409157/