[英]gulp minify all css files to a single file
我有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'))
});
如何將src / css中的所有css文件縮小為dist / css / style.min.css中的單個文件?
你的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'))
這是一個關於gulp構建的非常好的教程:
http://www.smashingmagazine.com/2014/06/11/building-with-gulp/
我認為更好的是使用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/'))
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.