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')); });