Gulp縮小CSS

Question

我正在使用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'));
});

謝謝！！

Answer 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生成單個，串聯並縮小的css，並在dist/index.html生成以下html

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

Gulp縮小CSS

問題描述

1 個解決方案

解決方案1
3 已采納 2014-11-03 13:26:33

Gulp縮小CSS

問題描述

1 個解決方案

解決方案1 3 已采納 2014-11-03 13:26:33

解決方案1
3 已采納 2014-11-03 13:26:33