私のような変数があります
var files = {
'foo.css': 'foo.min.css',
'bar.css': 'bar.min.css',
};
Gulpが私のためにしたいことは、ファイルをminify
してからrename
することです。
しかし、タスクは現在(1つのファイルに対して)として記述されています
gulp.task('minify', function () {
gulp.src('foo.css')
.pipe(minify({keepBreaks: true}))
.pipe(concat('foo.min.css'))
.pipe(gulp.dest('./'))
});
上で定義した変数files
で動作するように書き換える方法は?
オブジェクトで定義するのではなく、Globを使用してsrcに必要なファイルを選択できる必要があります。これにより、タスクが簡素化されます。また、cssファイルを個別のファイルに縮小したい場合は、それらを連結する必要はありません。
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() {
});
以前の回答を試してみましたが、既に縮小されたファイルを無視していないため、終わりのないループが発生しました。
最初に、他の回答に似ているこのコードを使用します。
//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));
});
'!css/build/*.min.css'
src内(つまり、var cssMinifyLocation)
//Watch task
gulp.task('default',function() {
gulp.watch(stylesLocation,['styles']);
gulp.watch(cssMinifyLocation,['minify-css']);
});
監視とタスクの両方で縮小されたファイルを無視する必要があります。
これは私がやったことです
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>