文章/答案/技术大牛

发布

社区首页 >问答首页 >吞咽小型化css

问吞咽小型化css
EN

Stack Overflow用户

提问于 2014-11-03 12:29:59

回答 1查看 1.4K关注 0票数 2

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

谢谢！！

gulp

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-03 13:26:33

您可以使用吞咽-使用者插件提取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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26714390

复制

相似问题

问吞咽小型化css
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问吞咽小型化cssEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问吞咽小型化css
EN