CSS 使用 gulp 缩小和重命名
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25764668/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS minify and rename with gulp
提问by Howard
I've a variable like
我有一个像
var files = {
'foo.css': 'foo.min.css',
'bar.css': 'bar.min.css',
};
What I want the gulp to do for me is to minifythe files and then renamefor me.
我希望 gulp 为我做的是minify文件，然后rename是我。
But the tasks is currently written as (for one file)
但是任务目前写为（对于一个文件）
gulp.task('minify', function () {
gulp.src('foo.css')
.pipe(minify({keepBreaks: true}))
.pipe(concat('foo.min.css'))
.pipe(gulp.dest('./'))
});
How to rewrite so it work with my variable filesdefined above?
如何重写以使其适用于我files上面定义的变量？
回答by Doodlebot
You should be able to select any files you need for your src with a Glob rather than defining them in an object, which should simplify your task. Also, if you want the css files minified into separate files you shouldn't need to concat them.
您应该能够使用 Glob 选择 src 所需的任何文件，而不是在对象中定义它们，这应该可以简化您的任务。此外，如果您希望将 css 文件缩小为单独的文件，则不需要连接它们。
var gulp = require('gulp');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');
gulp.task('minify', function () {
gulp.src('./*.css')
.pipe(minify({keepBreaks: true}))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./'))
;
});
gulp.task('default', ['minify'], function() {
});
回答by bbuie
I tried the earlier answers, but I got a never ending loop because I wasn't ignoring the files that were already minified.
我尝试了较早的答案，但我得到了一个永无止境的循环，因为我没有忽略已经缩小的文件。
First use this code which is similar to other answers:
首先使用与其他答案类似的代码：
//setup minify task
var cssMinifyLocation = ['css/build/*.css', '!css/build/*.min.css'];
gulp.task('minify-css', function() {
return gulp.src(cssMinifyLocation)
.pipe(minifyCss({compatibility: 'ie8', keepBreaks:false}))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(stylesDestination));
});
Notice the '!css/build/*.min.css'in the src (i.e. var cssMinifyLocation)
注意'!css/build/*.min.css'src中的（即var cssMinifyLocation）
//Watch task
gulp.task('default',function() {
gulp.watch(stylesLocation,['styles']);
gulp.watch(cssMinifyLocation,['minify-css']);
});
You have to ignore minified files in both the watch and the task.
您必须忽略手表和任务中的缩小文件。
回答by Tom Stickel
This is what I have done
这就是我所做的
var injectOptions = {
addSuffix: '?v=' + new Date().getTime()
};
Then
然后
return gulp.src('*.html')
.pipe(wiredep(options))
.pipe(inject(injectSrc, injectOptions))
.pipe(gulp.dest(''));
end result is unique timestamp added
最终结果是添加了唯一的时间戳
Example in index.html
index.html 中的示例
<script src="/public/js/app.js?v=1490309718489"></script>
