सीएसएस कम करें और नाम बदलने के घूंट

Question

साथ मैंने जैसे

var files = { 
    'foo.css': 'foo.min.css', 
    'bar.css': 'bar.min.css', 
}; 

एक चर मैं घूंट मेरे लिए क्या करना चाहते हैं क्या minify फ़ाइलें करने के लिए है और फिर rename मेरे लिए।

लेकिन कार्य वर्तमान में के रूप में (एक फ़ाइल के लिए)

gulp.task('minify', function() { 
    gulp.src('foo.css') 
     .pipe(minify({keepBreaks: true})) 
     .pipe(concat('foo.min.css')) 
     .pipe(gulp.dest('./')) 
}); 

कैसे पुनर्लेखन के लिए लिखा है तो यह मेरी चर files ऊपर परिभाषित के साथ काम?

Answer 1

आपको किसी ऑब्जेक्ट में उन्हें परिभाषित करने के बजाय किसी ग्लोब के साथ अपने स्रोत के लिए आवश्यक फ़ाइलों को चुनने में सक्षम होना चाहिए, जो आपके कार्य को सरल बनाना चाहिए। साथ ही, यदि आप सीएसएस फ़ाइलों को अलग-अलग फाइलों में छोटा करना चाहते हैं तो आपको उन्हें संयोजित करने की आवश्यकता नहीं है।

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() { 

}); 

Answer 2

मैंने पहले जवाब की कोशिश की, लेकिन क्योंकि मैं फ़ाइलों कि पहले से ही न्यूनतम किया गया अनदेखी नहीं कर रहा था मैं ख़त्म न होने वाली पाश मिला है।

सबसे पहले उपयोग इस कोड को जो अन्य उत्तर के समान है:

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

सूचना src में '!css/build/*.min.css' (यानी वर cssMinifyLocation)

//Watch task 
gulp.task('default',function() { 
    gulp.watch(stylesLocation,['styles']); 
    gulp.watch(cssMinifyLocation,['minify-css']); 
}); 

आप दोनों घड़ी में minified फ़ाइलों की अनदेखी करने के लिए है और कार्य।

Answer 3

यह मैं

var injectOptions = { 
    addSuffix: '?v=' + new Date().getTime() 
}; 

फिर

return gulp.src('*.html') 
    .pipe(wiredep(options)) 
    .pipe(inject(injectSrc, injectOptions)) 
    .pipe(gulp.dest('')); 

अंतिम परिणाम अद्वितीय टाइमस्टैम्प है क्या किया है है जोड़ा

index.html में उदाहरण

<script src="/public/js/app.js?v=1490309718489"></script>