在串联和缩小期间不要缩小已经缩小的文件
Do not minify already minified files during concatenation and minification
我有一个 gulp 任务,它缩小 CSS 个文件并将它们连接到一个文件中:
gulp.task('minify-css', function() {
'use strict';
var pathsToMinifyAndConcat = [
'css/index.css'
];
var pathsToConcatOnly = [
'lib/css/font-awesome-4.3.0/font-awesome.min.css'
];
var minifyFiles = require('gulp-cssnano');
var concatAllFilesToOneFile = require('gulp-concat');
return gulp.src(
[]
.concat(pathsToMinifyAndConcat)
.concat(pathsToConcatOnly)
)
.pipe(minifyFiles())
.pipe(concatAllFilesToOneFile('application.min.css'))
.pipe(gulp.dest('dist'));
});
但是,如果某些文件已经缩小(例如 font-awesome.min.css
),则不应再次缩小 - 它应该只是连接起来,并且应该从缩小过程中省略。有没有没有 hacky 解决方案的方法(我不想使用我无法完全理解的解决方案 - 而且我对 gulp 很陌生)保留文件顺序?我找到了一个插件可以在管道中的任何一点添加 src 文件:gulp-add-src,但它似乎有一段时间不活动了。
有不止一种方法可以做你想做的事。我举两个例子。
第一个:
var gulp = require('gulp');
var minify = require('gulp-cssnano');
var concat = require('gulp-concat');
var merge = require('merge-stream');
gulp.task('minify-css', function() {
var pathsToMinify = [
'css/style1.css'
];
var pathsToConcat = [
'css/style2.css'
];
var minStream = gulp.src(pathsToMinify)
.pipe(minify());
var concatStream = gulp.src(pathsToConcat)
return merge(minStream, concatStream)
.pipe(concat('all.css'))
.pipe(gulp.dest('dist'));
});
在此示例中,它创建了两个不同的流。一个被缩小,另一个没有。最后这两个流被合并、串联,然后文件被写入磁盘。
第二个:
var gulp = require('gulp');
var minify = require('gulp-cssnano');
var concat = require('gulp-concat');
var gulpFilter = require('gulp-filter');
gulp.task('minify-css', function() {
var paths = [
'css/style1.css',
'css/style2.css'
];
// Files to minify.
var filter = gulpFilter([
'style1.css'
],
{
restore: true
});
return gulp.src(paths)
.pipe(filter)
.pipe(minify())
.pipe(filter.restore)
.pipe(concat('all.css'))
.pipe(gulp.dest('dist'));
});
在这个例子中,只创建了一个流,但乙烯基文件对象被 gulp-filter 过滤,并且只有过滤后的对象被缩小。然后,管道中原来的所有文件都用 filter.restore 恢复并连接起来。
还有其他可能性,例如创建两个不同的任务,其中一个只是缩小另一个连接,但使用这种方法,您需要将缩小的文件临时写入磁盘。
像往常一样迟到了,但另一种选择是使用 gulp-if
有条件地缩小文件。这样的事情应该有效:
const gulp = require('gulp'),
gulpif = require('gulp-if'),
concat = require('gulp-concat'),
minifyCss = require('gulp-cssnano');
gulp.task('css', function () {
gulp.src([
'css/index.css',
'lib/css/font-awesome-4.3.0/font-awesome.min.css'
])
.pipe(gulpif(file => !(file.path.includes('.min.css')), minifyCss()))
.pipe(concat('app.min.css'))
.pipe(gulp.dest('dist'));
});
希望对您有所帮助!
我有一个 gulp 任务,它缩小 CSS 个文件并将它们连接到一个文件中:
gulp.task('minify-css', function() {
'use strict';
var pathsToMinifyAndConcat = [
'css/index.css'
];
var pathsToConcatOnly = [
'lib/css/font-awesome-4.3.0/font-awesome.min.css'
];
var minifyFiles = require('gulp-cssnano');
var concatAllFilesToOneFile = require('gulp-concat');
return gulp.src(
[]
.concat(pathsToMinifyAndConcat)
.concat(pathsToConcatOnly)
)
.pipe(minifyFiles())
.pipe(concatAllFilesToOneFile('application.min.css'))
.pipe(gulp.dest('dist'));
});
但是,如果某些文件已经缩小(例如 font-awesome.min.css
),则不应再次缩小 - 它应该只是连接起来,并且应该从缩小过程中省略。有没有没有 hacky 解决方案的方法(我不想使用我无法完全理解的解决方案 - 而且我对 gulp 很陌生)保留文件顺序?我找到了一个插件可以在管道中的任何一点添加 src 文件:gulp-add-src,但它似乎有一段时间不活动了。
有不止一种方法可以做你想做的事。我举两个例子。
第一个:
var gulp = require('gulp');
var minify = require('gulp-cssnano');
var concat = require('gulp-concat');
var merge = require('merge-stream');
gulp.task('minify-css', function() {
var pathsToMinify = [
'css/style1.css'
];
var pathsToConcat = [
'css/style2.css'
];
var minStream = gulp.src(pathsToMinify)
.pipe(minify());
var concatStream = gulp.src(pathsToConcat)
return merge(minStream, concatStream)
.pipe(concat('all.css'))
.pipe(gulp.dest('dist'));
});
在此示例中,它创建了两个不同的流。一个被缩小,另一个没有。最后这两个流被合并、串联,然后文件被写入磁盘。
第二个:
var gulp = require('gulp');
var minify = require('gulp-cssnano');
var concat = require('gulp-concat');
var gulpFilter = require('gulp-filter');
gulp.task('minify-css', function() {
var paths = [
'css/style1.css',
'css/style2.css'
];
// Files to minify.
var filter = gulpFilter([
'style1.css'
],
{
restore: true
});
return gulp.src(paths)
.pipe(filter)
.pipe(minify())
.pipe(filter.restore)
.pipe(concat('all.css'))
.pipe(gulp.dest('dist'));
});
在这个例子中,只创建了一个流,但乙烯基文件对象被 gulp-filter 过滤,并且只有过滤后的对象被缩小。然后,管道中原来的所有文件都用 filter.restore 恢复并连接起来。
还有其他可能性,例如创建两个不同的任务,其中一个只是缩小另一个连接,但使用这种方法,您需要将缩小的文件临时写入磁盘。
像往常一样迟到了,但另一种选择是使用 gulp-if
有条件地缩小文件。这样的事情应该有效:
const gulp = require('gulp'),
gulpif = require('gulp-if'),
concat = require('gulp-concat'),
minifyCss = require('gulp-cssnano');
gulp.task('css', function () {
gulp.src([
'css/index.css',
'lib/css/font-awesome-4.3.0/font-awesome.min.css'
])
.pipe(gulpif(file => !(file.path.includes('.min.css')), minifyCss()))
.pipe(concat('app.min.css'))
.pipe(gulp.dest('dist'));
});
希望对您有所帮助!