node.js gulp 将所有 css 文件缩小到一个文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26273358/
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
gulp minify all css files to a single file
提问by Dipendra Gurung
I have gulp task script as following,
我有 gulp 任务脚本如下，
// loads various gulp modules
var gulp = require('gulp');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');
// create task
gulp.task('css', function(){
gulp.src('src/css/**/*.css')
.pipe(minifyCSS())
.pipe(rename('style.min.css'))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
.pipe(gulp.dest('dist/css'))
});
How to minify all the css files from src/css to a single file as dist/css/style.min.css?
如何将 src/css 中的所有 css 文件缩小为一个文件，如 dist/css/style.min.css？
回答by Modern Labs
Your gulp task is missing the concat pipe.
您的 gulp 任务缺少 concat 管道。
gulp.src('src/css/**/*.css')
.pipe(minifyCSS())
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
.pipe(concat('style.min.css'))
.pipe(gulp.dest('dist/css'))
Here is a very good tutorial about building with gulp:
这是一个关于使用 gulp 构建的非常好的教程：
http://www.smashingmagazine.com/2014/06/11/building-with-gulp/
http://www.smashingmagazine.com/2014/06/11/building-with-gulp/
回答by Seyed Abbas Seyedi
I think better is used the cleancss gulp plugin.
我认为更好的是使用 cleancss gulp 插件。
const cleanCSS = require('gulp-clean-css'); // npm install gulp-clean-css --save-dev
gulp.task('css', () => {
return gulp.src('assets/styles/*.css')
.pipe(cleanCSS({
debug: true,
compatibility: 'ie8',
level: {
1: {
specialComments: 0,
},
},
}))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
.pipe(rename({
basename: 'main-styles',
suffix: '.min',
}))
.pipe(gulp.dest('dist/assets/styles/'))
});
