如何使用 gulp 进行压缩？

mySun 发表于 Dev

我的太阳

我需要压缩 CSS 和 JS 文件，而不需要“多个 css 文件为一个”。

我的 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'));
});

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

艾文万

固定答案

您可以尝试使用foreachgulp模块遍历所有文件，并分别缩小每个文件。

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'));
});

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。