Javascript 大口缩小_Javascript_Gulp

Javascript 大口缩小

javascript gulp

Javascript 大口缩小,javascript,gulp,Javascript,Gulp,我正在使用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来运行任务，比如缩小和压缩我的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'));
});

谢谢

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

这将在

css/combined.css

中生成一个单一的、连接的和缩小的css，并在

dist/index.html

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


(...)

我发现了这个问题，但它与Grunt（）一起工作，您可以使用它来处理HTML文件。

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