Gulp 缩小 css答案

【问题标题】：Gulp minification cssGulp 缩小 css
【发布时间】：2014-12-30 02:49:57
【问题描述】：

我正在使用 Gulp 来运行诸如缩小和连接我的 css、js 之类的任务......

我使用 gulp-minify-css 插件来缩小我的 css，它工作正常...但我有一个问题，我需要在我的 html 中更改 .css 的新路由和.js？我可以用任务做到这一点吗？

// including plugins
var gulp = require('gulp')
, minifyCss = require("gulp-minify-css");

// task
gulp.task('minify-css', function () {
    gulp.src('./Css/one.css') // path to your file
    .pipe(minifyCss())
    .pipe(gulp.dest('path/to/destination'));
});

谢谢！！

【问题讨论】：

我找到了这个问题，但它适用于 Grunt (stackoverflow.com/questions/20337819/…)
您可以使用cheerio 来处理 HTML 文件。

标签： javascript gulp

【解决方案1】：

你可以使用gulp-useref插件来提取你的html中引用的所有css文件，缩小它们并用替换的引用保存新的html。

这是一个完整的工作示例：

index.html

<html>
<head>
    <!-- build:css css/combined.css -->
    <link href="css/one.css" rel="stylesheet">
    <link href="css/two.css" rel="stylesheet">
    <!-- endbuild -->
</head>
<body>
(...)
</body>
</html>

gulpfile.js

var gulp = require('gulp');
var useref = require('gulp-useref');
var minifyCss = require('gulp-minify-css');

gulp.task('minify-css', function () {
    var assets = useref.assets();

    return gulp.src('index.html')
        .pipe(assets)
        .pipe(minifyCss())
        .pipe(assets.restore())
        .pipe(useref())
        .pipe(gulp.dest('dist/index.html'));
});

这将在css/combined.css 和dist/index.html 中生成以下html 中的单个、连接和缩小的css

<html>
<head>
    <link href="css/combined.css" rel="stylesheet">
</head>
<body>
(...)
</body>
</html>

【讨论】：