npm install --save-dev gulp-minify-css
// including plugins
var gulp = require('gulp');
var 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'));
});
// task
gulp.task('minify-multi-css', function () {
gulp.src(__dirname+'/css/*.css') // path to your file
.pipe(minifyCss())
.pipe(gulp.dest('path/to/destination'));
});
gulp minify-css gulp minify-multi-css
var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('minify-css', function () {
gulp.src('./css/*.css')
.pipe(concat("finally.css"))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('build/css'));
});
gulp.task('minify-js', function(){
gulp.src(__dirname + "/js/*.js")
.pipe(concat("finally.js"))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('build/js'))
});
compatibility
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', function() {
return gulp.src('styles/*.css')
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(gulp.dest('dist'));
});
callback
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
gulp.task('minify-css', function() {
return gulp.src('styles/*.css')
.pipe(cleanCSS({debug: true}, function(details) {
console.log(details.name + ': ' + details.stats.originalSize);
console.log(details.name + ': ' + details.stats.minifiedSize);
}))
.pipe(gulp.dest('dist'));
});
給css檔案裡引用url加版本號(md5sum),像這樣:
background: url(../images/pc-banner-bg.jpg?v=4facbd0914639f296faec4dba4d358f0) no-repeat;}
npm install --save-dev gulp-make-css-url-version
var gulp = require('gulp'),
minifier = require('gulp-minify-css');
cssver = require('gulp-make-css-url-version');
gulp.task('testCssmin', function () {
gulp.src('src/css/*.css')
.pipe(cssver()) //給css檔案裡引用檔案加版本號(檔案MD5)
.pipe(minifier())
.pipe(gulp.dest('dist/css'));
});