Question

我可以使用一些帮助，只将引用的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']);

Answer 1

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>

如何通过gulp仅将引用的.css复制到dest？

1 个答案: