Question

我需要压缩CSS和JS文件而没有＆＃34;多个css文件到一个＆＃34;。

我的IDE：PhpStorm
我的框架：Laravel 5.3

例如：

我需要压缩这个文件：

<link rel="stylesheet" href="/fonts/fonts.css">
<link rel="stylesheet" href="/site/css/menu.css">
<link rel="stylesheet" href="/site/css/select2.css" />
<link rel="stylesheet" href="/site/css/bootstrap.css">

为：

<link rel="stylesheet" href="/fonts/fonts.min.css">
<link rel="stylesheet" href="/site/css/menu.min.css">
<link rel="stylesheet" href="/site/css/select2.min.css" />
<link rel="stylesheet" href="/site/css/bootstrap.min.css">

我在Gulpfile.js中使用此代码：

gulp.task('BootstrapCss', function () {
gulp.src('public/site/css/bootstrap.css')
    .pipe(cssmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('public/site/dist/css'));
});

是否应为每个文件编写代码？

Answer 1

已修复答案

您可以尝试foreach gulp模块迭代所有文件并分别缩小每个文件。

var foreach = require('gulp-foreach');

gulp.task('BootstrapCss', function () {
  gulp.src('public/site/css/*.css')
    .pipe(foreach(function(stream, file){
      return stream
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
    }))
    .pipe(gulp.dest('public/site/dist/css'));
});

旧答案

只需使用全能*.css。我已将bootstrap.css替换为下面的*.css：

gulp.task('BootstrapCss', function () {
gulp.src('public/site/css/*.css')
    .pipe(cssmin())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('public/site/dist/css'));
});

如何使用gulp进行压缩？

1 个答案: